本篇文章中，我們將要和讀者說明，在使用vim開發javascript應用時，如何可以在每一次儲存時，自動的檢查我們js是否有問題，讓我們在開發時，可以更快速的進行修正。
配置完成果會如下圖，你可以看到他會自動顯示什麼地方需要修改，以及修改的原因。
Step1. 安裝syntastic
首先我們第一步，要先安裝syntastic ，它是一個vim的套件，它的功用就是可以針對程式碼進行檢查，你可以針對不同的程式碼配置不同的檢查器，像我們要檢查javascipt時，就是配置了eslint這個檢查器。
由於我是使用vundle，所以只要在.vimrc加入下面這行。然後再執行PluginInstall就會自動幫你裝好這套件了。
Plugin 'scrooloose/syntastic'
接下來我們會在.vimrc檔案內加入以下的配置。
set statusline+=%#warningmsg#
set statusline+=%{SyntasticStatuslineFlag()}
set statusline+=%*
let g:syntastic_always_populate_loc_list = 1
let g:syntastic_auto_loc_list = 1
let g:syntastic_check_on_open = 1
let g:syntastic_check_on_wq = 0
let g:syntastic_javascript_checkers = ['standard']
let g:syntastic_javascript_standard_generic = 1
let g:syntastic_javascript_checkers = ['eslint']
let g:syntastic_javascript_eslint_exec = 'eslint'
Step2. 安裝eslint checker.
上面的步驟我們已經完成了vim的配置，並且已經設置好javascript的檢查器為eslint，但我們實際上還沒安裝好eslint，所以我們這裡將要說明如何安裝eslint。
首先要安裝全域的eslint。
npm install -g eslint
然後在有packjson下的專案，執行下列指令，該指令可以進行eslint的規則配置，它會問你是否用es6或react之類的問題，然後根據你的回答產生出配置檔。
eslint --init
產生出配置檔如下。eslint會根據該配置檔，來檢查javascript檔案。正常來說，這樣就該可以使用，但有時還是會有問題。
module.exports = {
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"double"
],
"semi": [
"error",
"always"
]
}
};
BUG—沒有出現錯誤訊息
正常來說，上面的流程有配置好，應該就可以使用，但是呢，我就在這邊debug了很久，它的錯誤提示一直沒有跑出來。我來說明一下我的debug流程。
首先，我在vim中使用:SyntasticInfo來確定，我的eslint checker是否有設定好。根據輸出的資料，Available checker與Currently enabled checker都有設定好。那問題又出在那呢?
Syntastic version: 3.8.0-24 (Vim 704, Darwin, GUI)
Info for filetype: javascript
Global mode: active
Filetype javascript is active
The current file will be checked automatically
Available checker: eslint
Currently enabled checker: eslint
接下來我上網查到，可以看到syntastic的complie log。首先你需要至.vimrc新增一行指令。
let g:syntastic_debug=3
然後再回到要檢查的檔案，並開起，你就會自動看到它跑出的complie log，如果沒自動跑出來你可以執行:mes一樣會跑出來。
開起後你就會看到一坨輸出。其中我看到這段輸出怪怪的，它說無法讀取到eslint-plugin-react。
syntastic: 2.113305: checker output: ['', 'Oops! Something went wrong! :(', '', 'ESLint couldn''t find the plugin "eslint-plugin-react". This can happen for a
couple different reasons:', '', '1. If ESLint is installed globally, then make sure eslint-plugin-react is also installed globally. A globally-installed ESLi
nt cannot find a locally-installed plugin.', '', '2. If ESLint is installed locally, then it''s likely that the plugin isn''t installed correctly. Try reinsta
lling by running the following:', '', ' npm i eslint-plugin-react@latest --save-dev', '', 'If you still can''t figure out the problem, please stop by https
://gitter.im/eslint/eslint to chat with the team.', '', '']
所以最後我就根據它的說明，直接安裝全域的eslint-plugin-react就解決囉。
npm install -g eslint-plugin-react
React的eslint規則設定
以下為用來測試的react檔如下。
import React from "react";
import ReactDOM from "react-dom";
var a ;
function App () {
return (
<div className="container">Hello</div>);
}
const app = document.createElement("div");
document.body.appendChild(app);
ReactDOM.render(<App/>, app);
然後我們實際執行eslint時會出現這三個錯誤。
1 app/app.jsx|1 col 8 error| 'React' is defined but never used. (no-unused-vars) |~
2 app/app.jsx|4 col 5 error| 'a' is defined but never used. (no-unused-vars) |~
3 app/app.jsx|5 col 10 error| 'App' is defined but never used. (no-unused-vars)
但是我們發現，這幾個檢查在我們使用react時，都是一定會產生的，那要如何讓eslint不要略過這幾項呢?
首先，我們先看第三個錯誤'App' is defined but never used，我們App實際上是有使用在ReactDOM.render(<App/>, app)這上面，但eslint卻沒判斷到，這時我們只要在.eslintrc裡加入下面這行，就可以解決。
"react/jsx-uses-vars": [2]
那第一個錯誤呢'React' is defined but never used，雖然我們的確沒用到它，但在jsx檔中一定需要它，這時我們可以用這招，在該行加入這行文字// eslint-disable-line no-unused-vars就解決囉~
import React from "react"; // eslint-disable-line no-unused-vars
syntastic的顏色設定
一開始預設的的錯誤訊息以及提示的顏色不是很好看，如果你想修改，可以在.vimrc下加入這幾行。
其中SyntasticError 指的是程式碼內的錯誤提示，而SyntasticErrorSign 則是提示那一行有錯誤的那個箭頭。
highlight link SyntasticError ErrorMsg
highlight link SyntasticErrorSign WarningMsg
而ErrorMsg 與WarningMsg 為顏色與樣式，你可以在vim中輸入:highlight就可以看到很多的顏色與樣式可給你選擇了。
:highlight
