Eslint相關知識和配置大全

ESLint最初是由Nicholas C. Zakas 於2013年6月建立的開源項目。它的目標是提供一個插件化的javascript代碼檢測工具。

代碼檢查是一種靜態的分析，經常使用於尋找有問題的模式或者代碼，而且不依賴於具體的編碼風格。

ESLint 可讓程序員在編碼的過程當中發現問題而不是在執行的過程當中。

ESLint 使用 Node.js 編寫，這樣既能夠有一個快速的運行環境的同時也便於安裝。

一. 環境配置

在npmjs.com內查詢 eslint 能夠發現

目前最新版Eslint@5.4.0，安裝條件

Prerequisites: Node.js (>=6.14), npm version 3+.

 若是想檢測vue組件的語法，須要  eslint-plugin-vue 

• ESLint >=3.18.0.
  • >=4.7.0 to use eslint --fix.
  • >=4.14.0 to use with babel-eslint.
• Node.js >=4.0.0

首先安裝符合要求的node和npm版本，安裝yarn（建議經過msi文件全局安裝）

 

二. 配置校驗規則

在根目錄下新建 .eslintrc.js 文件, 亦能夠 eslint --init 生成：

module.exports = {
    "root": true,
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended"
    ],
    "parserOptions": {
        "sourceType": "module"
    },
    "rules": {"indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "off"
        ],
        "semi": [
            2, "always"
        ],
        "no-console": [
            "off"
        ]
    }
};

咱們使用 eslint:recommended   plugin:vue/recommended   plugin:import  規則進行校驗，並優先使用  standard style 規則。

 

須要注意如下幾點：

1. 要校驗vue組件，須要安裝  eslint-plugin-vue  ，並在配置中增長 plugin:vue/recommended 
2.  eslint-plugin-import 用於校驗es6的import規則，若是增長import plugin，在咱們使用webpack的時候，若是你配置了resove.config.js的alias，那麼咱們但願import plugin的校驗規則會從這裏取模塊的路徑，此時須要配置

   「rules」: {},
   "settings": {
           // 使用webpack中配置的resolve路徑
           "import/resolver": "webpack" 
   }

3. 使用babel-eslint語法解析器代替Esprima。EsLint是創建在Esprima(ECMAScript解析架構)的基礎上的。Esprima支持ES5.1,自己也是用ECMAScript編寫的，用於多用途分析。

4. stanard style建議縮進用兩個空格，咱們這裏根據本身的使用習慣用4個空格規則進行覆蓋。
5. 設置提示規則：

"rules": {
"semi": [2, "always"],
"quotes": [2, "double"]
}

　　規則有3種配置： 

• 0：禁止使用該規則(off)
• 1：將該規則定義爲警告 (warn) 等級（不影響exit code）
• 2：將該規則定義爲錯誤 (error) 等級（exit code爲1） 

完整版配置見github。

 

三. 自動修復

eslint須要全局安裝  yarn global add eslint  

eslint --fix 主動自動修復

eslint --ignore-pattern 'lib/*'  --fix **/*.js **/*.vue

 此命令能夠修復大部分語法，剩下的須要手動修復。

注意：eslint須要全局安裝，對應的eslint-plugin-vue, eslint-plugin-import等插件也須要全局安裝才能使用fix。

對於webpack編譯時的自動修復，能夠以下配置：

{
    loader: 'eslint-loader',
    options: {
        fix: true
    }
}

 

 

四. 編輯器校驗配置

用sublime作vue組件的校驗時，雖然各類插件都安裝了，但依然是沒有效果的，最可能是用js語法校驗.vue組件，這是不行的。不知道是否是個人配置有問題，致使不能用vue組件的語法進行校驗，因此這裏放棄了使用sublime。

本文推薦你們使用vscode做爲本身的新IDE。功能豐富、強大，配置簡單，會自動根據你打開的文件推薦安裝有用的插件。還能夠同步sublime等編輯器的操做習慣好比快捷鍵等。有着方便的語法庫提示。

打開左下角設置，加入如下配置，將包安裝方式改成yarn（默認是npm），增長保存即進行自動修復，修復文件報錯vue文件。若是不加language：vue，則只對js文件修復，一樣若是相對html進行修復，則再增長language: html

"eslint.packageManager": "yarn",
"eslint.validate": [
        "javascript",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
"eslint.autoFixOnSave": true, 

 

 在左側欄擴展中安裝 ESLint和 Vetur插件

 

重啓IDE既能夠看到校驗效果

 

左側會顯示語法錯誤數和是否修改了此文件， 右側會波浪線顯示語法錯誤的地方。

 

有時會遇到保存一次修復不徹底的狀況，多保存幾回便可修復大部分語法。對於敲一會代碼保存一下的能夠不用擔憂這個問題。 

 

 eslintrc.js 完整配置見github

 vscode user settings 推薦配置見github