一、ESLint
創(chuàng)新互聯(lián)公司是專業(yè)的天津網(wǎng)站建設(shè)公司，天津接單;提供成都網(wǎng)站設(shè)計、做網(wǎng)站,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行天津網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊,希望更多企業(yè)前來合作!
協(xié)同開發(fā)過程中，經(jīng)常感受到來自代碼檢視的惡意。代碼習(xí)慣不一致，看半天；居然提交低級錯誤，我的天(╯‵□′)╯︵┻━┻！...研究了一番，決定使用ESLint來做代碼規(guī)范檢查。
二、配置方式
三、配置過程(配置文件)
安裝相關(guān)npm包
yarn add eslint babel-eslint eslint-plugin-vue eslint-friendly-formatter --dev
增加文件
修改webpack配置文件
重慶分公司
重慶分公司
module.exports = {
module: {
rules: [
test: /\.(js|vue)$/,
loader: "eslint-loader",
enforce: "pre",
//指定檢查的目錄
include: [resolve(__dirname, 'src')],
//eslint檢查報告的格式規(guī)范
options: {
formatter: require("eslint-friendly-formatter")
}
]
}
}
四、配置文件詳解
以.eslintrc.js為例
module.exports = {
//一旦配置了root，ESlint停止在父級目錄中查找配置文件
root: true,
//解析器
parser: "babel-eslint",
//想要支持的JS語言選項
parserOptions: {
//啟用ES6語法支持(如果支持es6的全局變量{env: {es6: true}}，則默認(rèn)啟用ES6語法支持)
//此處也可以使用年份命名的版本號：2015
ecmaVersion: 6,
//默認(rèn)為script
sourceType: "module",
//支持其他的語言特性
ecmaFeatures: {
//...
}
},
//代碼運行的環(huán)境，每個環(huán)境都會有一套預(yù)定義的全局對象，不同環(huán)境可以組合使用
env: {
es6: true,
browser: true,
jquery: true
},
//訪問當(dāng)前源文件中未定義的變量時，no-undef會報警告。
//如果這些全局變量是合規(guī)的，可以在globals中配置，避免這些全局變量發(fā)出警告
globals: {
//配置給全局變量的布爾值，是用來控制該全局變量是否允許被重寫
test_param： true
},
//支持第三方插件的規(guī)則，插件以eslint-plugin-作為前綴，配置時該前綴可省略
//檢查vue文件需要eslint-plugin-vue插件
plugins: ["vue"],
//集成推薦的規(guī)則
extends: ["eslint:recommended", "plugin:vue/essential"],
//啟用額外的規(guī)則或者覆蓋默認(rèn)的規(guī)則
//規(guī)則級別分別：為"off"(0)關(guān)閉、"warn"(1)警告、"error"(2)錯誤--error觸發(fā)時，程序退出
rules: {
//關(guān)閉“禁用console”規(guī)則
"no-console": "off",
//縮進(jìn)不規(guī)范警告，要求縮進(jìn)為2個空格，默認(rèn)值為4個空格
"indent": ["warn", 2, {
//設(shè)置為1時強(qiáng)制switch語句中case的縮進(jìn)為2個空格
"SwitchCase": 1,
//分別配置var、let和const的縮進(jìn)
"VariableDeclarator": { "var": 2, "let": 2, "const": 3 }
}],
//定義字符串不規(guī)范錯誤，要求字符串使用雙引號
quotes: ["error", "double"],
//....
//更多規(guī)則可查看http://eslint.cn/docs/rules/
}
}
使用JavaScript注釋啟用或禁止指定規(guī)則
/* eslint-disable */
alert('message');
/* eslint-enable no-alert, no-console*/
...
層疊配置
ESlint支持層疊配置，檢測文件的規(guī)則是其目錄層級結(jié)構(gòu)中所有.eslintrc文件的組合，當(dāng)規(guī)則沖突的時候，離檢測文件最近的規(guī)則優(yōu)先。
默認(rèn)情況下，ESlint會沿著父級目錄網(wǎng)上尋找配置文件，直到根目錄。如果配置文件中有root: true，則ESlint會停止在父級目錄中查找。
五、配置過程中出現(xiàn)的問題
出現(xiàn)錯誤：Use the latest vue-eslint-parser。
解決方法： 把parser: "babel-eslint"移動到parserOptions中。
{
//parser: "babel-eslint",
parserOptions: {
parser: "babel-eslint",
//...
}
}
問題原因： eslint-plugin-vue中的很多規(guī)則都需要vue-eslint-parser檢查, vue-eslint-parser和babel-parser二者有沖突。
參考鏈接
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
