資工問題雜筆

[資工雜筆] 建置 vim + syntastic + eslint + gcclint

花了一點時間看一些vim的plugin,發現有一個plugin很酷,叫做syntastic。這個plugin可以提供lint的功能,讓程式設計師在真正執行code前可以先用這東西檢查一下,到底有沒有語法上的錯誤或者任何可能潛在的錯誤。特別是對Javascript這種不好debug,還有各種潛在規則的程式語言而言,真的是寫程式的一大助力。

首先,要先下載syntastic,我是使用Vundle,所以只要在.vimrc裡面放上

Plugin 'scrooloose/syntastic'
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'

前面兩行註解起來的是另一個linter,叫standard。這個linter的特性是都幫你把所有的rule都弄好了,而且不能修改。例如像他規定沒有分號,空白鍵又是兩格……。因為我的vim indent的script跟它的lint不太合,一個lint下去,一推warning,又不能客製化,所以我就選擇了eslint了。

eslint真的很好用,因為可以客製化,想要空幾格、有沒有JSX、有沒有分號,甚至\n是windows或unix都可以設定。但是前提是你要花一點時間去弄就是了。

eslint下載方式,-g的意思是下載到全電腦,所以他會把node-modules存在/usr/local/lib底下

npm install -g eslint

接著到家目錄,設定我們的.eslintrc,

eslint --init

設定完之後,可以視情況把node-modules目錄刪掉,留下.eslintrc就好了。此外,如果當時選的是支援react的話,它會自動再幫載一個eslint-plugin-react的plugin。

此外,再去下載eslint.vim,載點在下方syntax checker,然後把它放到~/.vim底下。

如果想要更改一些lint的設定,可以更改

/usr/local/lib/node_modules/eslint/conf/eslint.json

像我有時候會在其它檔案設定全域變數,如果沒有把no-undef改掉的話,就會一直出錯,覺得很煩。所以我就把這個設定改掉了,反正我用的是strict mode,也會幫我檢查,到底有沒有問題。

弄完之後,開我們的eslint,如果程式碼有錯的話,就會看到下面有一行console,沒有bug的話,它就會消失。此外,我現在才知道原來javascript可以不要寫分號,不過不寫分號可能會遇到其它問題,所以我覺得還是加一下好了,也剛好符合其它語言的習慣。開始享受高速debug的感覺吧!

eslint

11/18

補上C++的lint。因為GCC本來就lint了,所以就直接使用它的就好了,不過試了很久,總是沒有成功。於是在normal mode底下run

:SyntasticInfo

得到底下結果

gcclint

然後查了一下,發現只在.vimrc裡面補上這一行即可

let g:ycm_show_diagnostics_ui = 0
參考資料

linter列表
https://github.com/scrooloose/syntastic/wiki/Syntax-Checkers

syntax checker
https://github.com/scrooloose/syntastic/tree/master/syntax_checkers

eslint
https://github.com/eslint/eslint

eslint-plugin-react
https://www.npmjs.com/package/eslint-plugin-react

eslint rules
http://eslint.org/docs/rules/

standard
https://github.com/feross/standard

Are Semicolons Necessary in JavaScript?
https://www.youtube.com/watch?v=gsfbh17Ax9I

解決cpp lint
https://github.com/scrooloose/syntastic/issues/1246
https://github.com/Valloric/YouCompleteMe#user-content-the-gycm_show_diagnostics_ui-option

3 thoughts on “[資工雜筆] 建置 vim + syntastic + eslint + gcclint

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s