玩轉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的規範是很火的代碼規範。

github.com/airbnb/java…

For Chinese version

github.com/lin-123/jav….

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.