VS CODE 下的 ESLint 安裝以及使用

經過半年的前端磨練(就是不停地敲敲代碼),自認水平提高的速度還是可以的.
現在回頭看下寫過的代碼,發現以前寫的代碼真的是不忍慘睹.
比如

1. 變量名亂起
2. 風格多變
3. 注釋亂寫或者沒寫
   等等錯誤;

這不是一個很好的消息!

一個人單兵作戰久了,風格都變得隨心所欲,這為以后的團隊合作帶來極大的隱患.
趁今天事情少, 我決定去研究下 ESLint !

關於 ESLint

ESLint 是一個開源的項目, 由 Nicholas C. Zakas 於2013年6月發布
具有

1. 規則可配置性高
2. 支持插件擴展以及自定義規則
   等優點.

如何在 VS CODE 編輯器使用 ESLint

因為很喜歡 Visual Studio Code 這款小巧的編輯器
雖然是微軟出品,但是沒有想象中的那種龐大臃腫樣子,使用起來很得心應手.前端開發使用還是很不錯的.
因此我也只研究了下怎么在 VS CODE 里去使用 ESLint

環境

1. 1.3版本或以上的 Visual Studio Code (想使用 ESLint 的時候恰好碰到版本更新)

安裝 ESLint 插件

在 VS CODE 里按 F1 輸入 ext install vscode-eslint 即可安裝 ESLint;

使用 ESLint 插件

在項目根目錄下 新建一個名為 .eslintrc 的文件.
.eslintrc 文件里寫配置(使用 JSON 和 YAML 語法)
ESLint 的相關設置 參考 ESLint 或者 ESLint_docs;

ESLint配置的主要內容

內容	描述
env	環境
globals	全局變量
rules	規定的代碼規則

忽略文件

我們可以通過 .eslintignore 文件 來告訴 ESLint 要忽略的文件