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