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