Syntastic:在 Vim 中檢查 JS 語法錯誤

寫程式就是不斷的 debug,要是有一些顯而易見的語法錯誤可以直接被編輯器抓出來就好了。現在 VS Code 等編輯器都會先幫你抓出一些簡單的語法問題,Vim 也可以透過 Syntastic 達到這個效果。

Syntax Error vs. Semantic Error

Syntax Error 是語法錯誤,有點像是文法錯誤,當語法錯誤的時候,電腦就不知道你真正想表達的意思是什麼,那就無法成功編譯或執行,舉個例子,在英文中常見的 Syntax Error 可能像這樣:

You is funny.

You 後面的 be 動詞應該使用 are 而不是 is,雖然我們還稍微可以看懂整句話的意思,但電腦的程式語言就沒有那麼厲害了。

常見的 Syntax Error 就像變數未宣告就使用、少了一個括號等等問題。

Semantic Error 則是邏輯上的問題,就是乍看之下這個句子沒有錯,但仔細去想的話這件事情是沒有意義的,例如:

The fish is walking on the sidewalk.

這句話就沒什麼文法問題,是一個正常的現在進行式。但是仔細去想就會發現,魚就不會走路,要怎麼在人行道上走路。

常見的邏輯問題就像弄錯運算子(拿兩個字串相乘)、無窮迴圈、下載一個不存在的檔案等等。

而絕大部分的編輯器都只能找出 Syntax Error,並不能找到 Semantic Error。如果要檢查 Semantic 等邏輯問題,通常可以使用單元測試或整合測試。

Code style

Code style 則是另外一個團隊中會遇到的問題。大括號要不要換行?用 Tab 還是 Space?能不能接受使用 bitwise 語法?這些問題並不會影響程式的執行,也沒有絕對的好壞,原則上團隊溝通好就好。而且不用浪費時間爭執這種東西,可以讓工具自己轉就好。

在 JavaScript 中,ESLint 正好可以幫你解決 Syntax Error 和 Code style 的問題。

安裝 Syntastic

前面先介紹程式語言會有什麼問題,現在要來到今天的主角,Syntastic。Syntastic 是一個 Vim 的套件,他可以搭配不同的編譯器或工具去檢查你的程式語言出了什麼問題,例如寫 C 語言可以使用 gcc 來檢查,而 JavaScript 可以使用 ESLint 來檢查。

首先你需要 Vundle,安裝好之後編輯 ~/.vimrc 檔案,一樣加入 Syntastic 套件的設定

Plugin 'scrooloose/syntastic'

接著執行這個指令安裝套件:

vim +PluginInstall

接著在 .vimrc 加上這些配置:

" Syntastic config start
set statusline+=%#warningmsg#
let 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 = ['eslint']
let g:syntastic_javascript_eslint_exec = 'eslint'
" Syntastic config end

為什麼前後要加 Synastic config?你也可以不要,但是身為一個 Vim 初學者,幾個月後回來看 Vimrc 一定是什麼都看不懂。加上一些註解,之後如果決定不要使用 Syntatsic,就知道哪些設定可以砍掉。

安裝 ESLint 並設定格式

剛剛我們已經在 .vimrc 中設定 javascript checkers 使用 eslint 了。因此我們要來安裝 ESLint,並設定好 ESLint 的設定檔,讓 ESLint 知道該怎麼檢查。首先我們先透過 npm 安裝 ESLint:

npm install -g eslint

註:一定要以 global 的方式安裝,Syntastic 才有辦法執行 ESLint。

如果你還沒有 Node.js 環境而無法使用 npm 的話,可以使用 nvm 工具來安裝 Node.js。

接著你會需要設定 ESLint 格式。如果你的專案下已經有 .eslintrc.eslintrc.json 或是 .eslintrc.js 這種設定檔案的話,你就不需要再次初始化;如果沒有,請透過這個指令來設定你要的格式:

eslint --init

不知道怎麼設定 ESLint 格式嗎?閱讀 ESLint:檢查 Code Style 的好工具 看看推薦的設定。

全部都設定好後,就可以回到 Vim 去看看了。刻意打一行有問題的句子在 JS 程式中,下方就會出現不同的 Error 或 Warning,告訴你可能的問題在哪裡。每次你打開檔案的時候會檢查一次,你存檔(:w)的時候也會觸發一次檢查。

本篇文章同步發表在 iT邦幫忙