玩轉EsLint
ESLint is an open source project originally created by Nicholas C. Zakas in June 2013. Its goal is to provide a pluggable linting utility for JavaScript.
還是放個中文的介紹吧～
ESLint最初是由Nicholas C. Zakas 於2013年6月建立的開源專案。它的目標是提供一個外掛化的javascript程式碼檢測工具。
簡單的說，eslint就是一個能夠幫我們檢查我們程式碼的格式、語法，從而來規範前端開發團隊在開發流程中的程式碼。
開始使用
安裝在專案本地
如果你想讓 ESLint 成為你專案構建系統的一部分，我們建議在本地安裝。你可以使用 npm：
$ npm install eslint --save-dev 複製程式碼
緊接著你應該設定一個配置檔案：
$ ./node_modules/.bin/eslint --init 複製程式碼
之後，你可以在你專案根目錄執行 ESLint：
$ ./node_modules/.bin/eslint yourfile.js 複製程式碼
或者你可以使用npx來執行 ESLint Instead of navigating to ./node_modules/.bin/ you may also use npx to run eslint:
$ npx eslint 複製程式碼
全域性安裝
如果你想使 ESLint 適用於你所有的專案，我們建議你全域性安裝 ESLint。你可以使用 npm：
$ npm install -g eslint 複製程式碼
緊接著你應該設定一個配置檔案：
$ eslint --init 複製程式碼
之後，你可以在任何檔案或目錄執行 ESLint：
$ eslint yourfile.js 複製程式碼
.eslintrc配置
執行eslint --init
之後，.eslintrc 檔案會在你的資料夾中自動建立。你可以在 .eslintrc 檔案中看到許多像這樣的規則：
{
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "double"]
}
}
複製程式碼
這裡，"semi"指的是分號，如果你的程式碼語句缺少分號，則報錯。"always"表示總是需要分號。具體的配置項可以到ESLint官網檢視。
你可以直接在.eslintrc這裡面配置自己專案的rules，但我們也可以直接使用現在比較火的程式碼規範Airbnb's javascript style guide 。
Airbnb's javascript style guide
我喜歡使用Airbnb's javascript style guide 作為校驗javascript的規則。Airbnb的規範是很火的程式碼規範。
For Chinese version
Important: 強烈推薦新增eslint-config-airbnb 到你的ESLint. 更多資訊和配置請訪問www.npmjs.com/package/esl… .
使用 eslint-config-airbnb
我們需要安裝正確版本的包，以下命令可以檢視
npm info "eslint-config-airbnb@latest" peerDependencies 複製程式碼
當然，可以直接
npm i eslint-config-airbnb 複製程式碼
如果安裝上面遇到問題，建議訪問官網.
安裝好之後，新增 "extends": "airbnb" 到你的.eslintrc.
{"extends": "airbnb",
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "double"]
}
}
複製程式碼
如果你碰到你不喜歡、或者不適用當前專案的規範規則，你可以選擇遮蔽掉。像這樣。
{"extends": "airbnb",
"rules": {
"import/prefer-default-export": 0,
"jsx-a11y/href-no-hash": 0,
"react/forbid-prop-types": 1,
"react/require-default-props": 1,
"react/jsx-no-bind": 0,
"jsx-a11y/rule-name": 0,
"react/prop-types": 0,
"jsx-a11y/click-events-have-key-events": 0,
"jsx-a11y/no-static-element-interactions": 0,
"react/destructuring-assignment": 0,
"jsx-a11y/anchor-is-valid": 0,
"react/no-unescaped-entities": 1,
"react/react-in-jsx-x": 0,
"react/react-in-jsx-scope": 0
}
}
複製程式碼
- "off" or 0 - 關閉規則
- "warn" or 1 - 將規則視為一個警告（不會影響退出碼）
- "error" or 2 - 將規則視為一個錯誤 (退出碼為1)
配置IDE
- VS code 需要安裝外掛ESLint ，直接在extensions裡面搜尋，安裝後重啟編輯器即可。
- Atom 需要安裝外掛linter, linter-eslint, linter-ui-default .