開發中常見開發工具的ESlint代碼校驗工具的配置
現在這個項目使用vue+webpack開發的，因爲開發人員很多，然後組長就引入了ESlint來規範我們的代碼。
- 安裝
-
一般都是在本項目中安裝，不過想全局安裝也是可以的。
- 在我看來，如果只是自己本地開發玩玩，或者學習，那就全局安裝，這樣就不需要開發每個項目時都重新安裝一遍。
npm i -g eslint (全局安裝)
-
一般開發人員參與較多，是推薦局部安裝的，這樣直接在package.json中配置，其他開發人員在拉版本的時候，只需要npm i 一下就ok了。
npm install eslint -save-dev (在項目的package.json中直接配置)
- 初始化
-
*安裝完畢後進行初始化
eslint –init
- 這樣會在動生成一個.eslintrc.js文件。自己手動新建一個也是可以的，載項目根目錄下
-指定執行環境
// .eslintrc.js
module.exports = {
env: {
browser: true, //表示在瀏覽器中可以執行
node: true, //在node環境中執行
},
};
還有很多環境可以自己去網上查
- 指定全局變量
使用註釋來配置
可以在配置文件或註釋中指定額外的全局變量，false表明變量只讀：/* global var1, var2 */
/* global var1:false, var2:false */使用配置文件來配置
// .eslintrc.js
module.exports = {
globals: {
var1: true,
var2: true,
},
};
規則
在配置文件中可以設置一些規則。
這些規則的等級有三種：
- “off” 或者 0：關閉規則。
- “warn” 或者 1：打開規則，並且作爲一個警告（不影響exit code）。
- “error” 或者 2：打開規則，並且作爲一個錯誤（exit code將會是1）。
例如：
// .eslintrc.js
module.exports = {
rules: {
eqeqeq: ‘off’,
curly: ‘error’,
},
};
- 使用註釋來配置
/* eslint eqeqeq: “off”, curly: “error” */
/* eslint eqeqeq: 0, curly: 2 */
也可以在註釋中關閉所有或者某個規則：
/* eslint-disable */
/* eslint-enable */
/* eslint-disable no-alert, no-console */
/* eslint-enable no-alert, no-console */
具體的規則可以在官網上找到，或者使用別人寫好的配置，例如eslint-config-airbnb。
使用方法
命令行
通過命令行工具來使用 eslint 。
eslint [options] file.js [file.js] [dir]
編輯器
- WebStorm中引用eslint
file –> Settings( Default Settings) –> 搜索eslint –> 勾選Enable –> 指定文件ESlint package目錄（示例：C:\Users\gary\node_modules\eslint）
假如全局安裝（路徑在appdata裏面，可通過在開始菜單中%appdata%回車查看 路徑：C:\Users\gary\AppData\Roaming\npm\node_modules\eslint）
-運行程序 node server.js
-重啓webstorm