作為一個(gè)前端開發(fā)er闸衫，寫的代碼最多的估計(jì)是javascript了献丑，由于javascript語言本身的特性末捣，寫代碼時(shí)是相當(dāng)?shù)撵`活，寫起來很爽创橄，但就很容易踩坑塔粒，很多的坑往往都是由于代碼不規(guī)范引起的，比如比較常見的一個(gè)錯(cuò)誤是xx is undefined筐摘。為了避免代碼不規(guī)范引起的錯(cuò)誤盔几，以及能讓我們寫出漂亮的代碼量没，就出現(xiàn)了很多的代碼檢測(cè)工具，比較常用的有JSLint，JSHint蟹腾，JSCS和ESLint并扇。針對(duì)這些工具钾麸，今天就不做對(duì)比了茁影，今天主要介紹的是ESLint。
1. 安裝
使用npm進(jìn)行全局安裝
npm install -g eslint
2.設(shè)置配置文件
使用如下命令設(shè)置一個(gè)配置文件
eslint --init
執(zhí)行完后确沸，會(huì)在目錄下生成一個(gè).eslintrc.js捌锭，如下所示：
module.exports = {
"env": {//指定想啟用的環(huán)境，
"browser": true,//瀏覽器環(huán)境
"es6": true//es6環(huán)境
},
"extends": "eslint:recommended",//啟用一系列核心規(guī)
"globals": {//腳本在執(zhí)行期間訪問的額外的全局變量
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018//用來指定es的版本號(hào)
},
"rules": {//啟用的規(guī)則及其各自的錯(cuò)誤級(jí)別
}
};
如果創(chuàng)建的項(xiàng)目沒有
package.json文件罗捎，需要先用npm init創(chuàng)建一個(gè)package.json文件观谦。
3.執(zhí)行
使用eslint 文件.js命令來檢測(cè)js文件，如果檢測(cè)到有不符合規(guī)范的桨菜，將在控制臺(tái)輸入錯(cuò)誤信息豁状，如下所示：
1:10 error 'EslintDemo' is defined but never used no-unused-vars
2:14 error 'add' is defined but never used no-unused-vars
JS文件的代碼是這樣的：
function EslintDemo() {
function add(a,b) {
var result = a + b;
return result;
}
}
4.webstorm開啟eslint
webstorm自帶了eslint，只需開啟就行了倒得，具體如下所示：
但是開啟后泻红，
webstorm會(huì)報(bào)錯(cuò)
TypeError: this.CliEngine is not a constructor
碰到這樣的錯(cuò)誤時(shí)，需要修改/languageService/eslint/bin/eslint-plugin.js文件霞掺。如下所示：
//this.CliEngine = require(this.basicPath + "lib/cli-engine");
this.CliEngine = require(this.basicPath + "lib/cli-engine").CLIEngine;
修改后重啟webstorm
5.eslint驗(yàn)證規(guī)則
eslint中驗(yàn)證規(guī)則有很多谊路，這里主要介紹一些常見的規(guī)則。設(shè)置規(guī)則的開啟與關(guān)閉是在.eslintrc.js中修改rules的相關(guān)屬性菩彬，下面是vue.js默認(rèn)生成的一些規(guī)則：
rules: {
// 強(qiáng)制 generator 函數(shù)中 * 號(hào)周圍使用一致的空格
'generator-star-spacing': 'off',
// 禁用 debugger
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
- "off" 或 0 - 關(guān)閉規(guī)則
- "warn" 或 1 - 開啟規(guī)則缠劝，使用警告級(jí)別的錯(cuò)誤：warn (不會(huì)導(dǎo)致程序退出)
- "error" 或 2 - 開啟規(guī)則，使用錯(cuò)誤級(jí)別的錯(cuò)誤：error (當(dāng)被觸發(fā)的時(shí)候挤巡，程序會(huì)退出)
常用驗(yàn)證規(guī)則
- semi： 要求或禁止使用分號(hào)代替 ASI剩彬，比如在開啟該規(guī)則后酷麦，如果在代碼結(jié)束行后加了分號(hào)矿卑，將提示錯(cuò)誤。
- comma-dangle：要求或禁止末尾逗號(hào)沃饶。比始在{}后面添加了逗號(hào)母廷，將提示錯(cuò)誤轻黑。
- comma-spacing：強(qiáng)制在逗號(hào)前后使用一致的空格。比如定義一個(gè)數(shù)組：
var arr = [1, 2, 3, 4]琴昆，如果在逗號(hào)后沒加空格氓鄙，將報(bào)錯(cuò)。- no-unused-vars：禁止出現(xiàn)未使用過的變量业舍。定義的變量抖拦，如果沒使用過，將提示錯(cuò)誤舷暮。
- space-infix-ops：要求操作符周圍有空格态罪，比如
for循環(huán)for (var i = 0; i <arr.length; i++)，在<的前后沒有空格時(shí)下面，將提示錯(cuò)誤复颈。- space-before-blocks：強(qiáng)制在塊之前使用一致的空格。比如
for循環(huán)for (var i = 0; i <arr.length; i++)｛的{前沒有空格時(shí)沥割，將提示錯(cuò)誤耗啦。- no-redeclare：禁止多次聲明同一變量。在同一作用域類重復(fù)申明同樣的變量會(huì)提示錯(cuò)誤机杜。
- indent：強(qiáng)制使用一致的縮進(jìn)帜讲。
- spaced-comment：強(qiáng)制在注釋中 // 或 /* 使用一致的空格。
// 前面要有空格
