使用ESLint對(duì)代碼書(shū)寫(xiě)進(jìn)行規(guī)范椎组，可以有效的提高代碼的質(zhì)量奋献，降低代碼出錯(cuò)的機(jī)率案训，因此有必要將ESLint引入到項(xiàng)目中店枣。
目前網(wǎng)上已經(jīng)存在標(biāo)準(zhǔn)的ESLint配置速警，該規(guī)范是目前業(yè)界比較推崇的代碼編寫(xiě)規(guī)范叹誉，以下是配置方法：
1. 安裝ESLint標(biāo)準(zhǔn)配置
npm install --D eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node
其中：eslint-config-standard是依賴于后面的plugin
2. 編寫(xiě)配置文件
在項(xiàng)目根目錄下添加.eslintrc文件，該文件是一個(gè)JSON配置文件闷旧，需要在該配置文件中指定"extends"字段為"standard"桂对，指明繼承標(biāo)準(zhǔn)配置文件。
配置文件內(nèi)容如下：
{
"extends": "standard"
}
此時(shí)在package.json中的scripts字段中配置"lint"命令鸠匀，如下
"lint": "eslint --ext .js --ext .vue src/"
調(diào)用本地的eslint命令，用--ext指明需要檢測(cè)js文件和vue文件逾柿，最后指定檢測(cè)的文件所在目錄為src/缀棍。
注意：在package.json中scripts字段中調(diào)用eslint命令使用項(xiàng)目中的eslint命令，如果想要在全局中調(diào)用eslint命令机错，需要全局安裝爬范。
調(diào)用后結(jié)果如下：
為什么會(huì)出錯(cuò)呢？
此時(shí)報(bào)錯(cuò)的都是vue文件弱匪，由于vue文件的書(shū)寫(xiě)格式特殊青瀑，所以需要配置后才能正確處理。
3. 配置Vue ESLint
Vue文件各個(gè)部分是由標(biāo)簽包裹的萧诫，因此編寫(xiě)規(guī)范同html一致斥难。此時(shí)，需要下載eslint-plugin-html插件帘饶，并且在eslint的配置文件中指明使用插件哑诊。
插件下載命令
npm install -D eslint-plugin-html
此時(shí)配置文件修改為：
{
"extends": "standard",
"plugins": [
"html"
]
}
此時(shí)在運(yùn)行，便沒(méi)有問(wèn)題（前提條件是代碼書(shū)寫(xiě)確實(shí)符合規(guī)范）
4. 在webpack中配置ESLint
我們想要達(dá)到的目的是及刻，在我們的代碼編寫(xiě)過(guò)程中镀裤，webpack可以實(shí)時(shí)對(duì)代碼進(jìn)行檢測(cè)，并給出提示缴饭。
在webpack＋vue的項(xiàng)目中暑劝，我們編寫(xiě)的代碼都需要通過(guò)babel編譯，編譯后的代碼并不能滿足eslint的規(guī)范颗搂，因此担猛，我們需要對(duì)編譯前的文件進(jìn)行檢查。這時(shí)丢氢，我們需要使用babel-eslint編譯器對(duì)文件進(jìn)行檢查（否則無(wú)法識(shí)別新特性或者特殊文件的編寫(xiě)格式毁习，如vue）。
安裝指令如下
npm install babel-eslint -D
修改.eslintrc如下
{
"extends": "standard",
"plugins": [
"html"
],
"parser": "babel-eslint"
}
指明解析器為babel-eslint
在webpack中卖丸，提供了eslint-loader支持對(duì)特定文件進(jìn)行代碼格式檢查纺且，因此，首先我們需要下載eslint-loader稍浆，然后在webpack配置文件中配置規(guī)則载碌。
{
"extends": "standard",
"plugins": [
"html"
],
"parser": "babel-eslint"
}
npm install eslint-loader -D
webpack中module.rules中新增一項(xiàng)規(guī)則
{
test: /\.(vue|js)$/,
loader: 'eslint-loader',
exclude: /node_modules/,
// 預(yù)處理
enforce: 'pre'
}
這里指明了對(duì)js和vue文件使用eslint-loader進(jìn)行處理猜嘱，并排除了/node_modules/目錄中的文件，并利用enforce字段指明嫁艇，該loader是進(jìn)行預(yù)處理的loader朗伶，先對(duì)指定文件進(jìn)行eslint后才會(huì)執(zhí)行babel編譯。
以上便可完成了所有配置步咪。
代碼提交之前對(duì)代碼進(jìn)行檢查
我們?cè)趃ithub托管代碼時(shí)论皆，會(huì)將自己的代碼提交到github倉(cāng)庫(kù)中，如果我們可以在每一次提交之前對(duì)我們的代碼進(jìn)行檢查猾漫，確定無(wú)誤后才正確提交点晴，這樣的話，就能保證線上的代碼也是合乎規(guī)范的悯周，這樣有利于代碼的維護(hù)粒督。
如何實(shí)現(xiàn)以上功能呢？
這里我們需要借助husky工具禽翼，安裝完該工具之后屠橄，該工具可以在我們提交代碼時(shí)，調(diào)用"precommit"鉤子闰挡，執(zhí)行預(yù)處理操作锐墙。
首先安裝該工具
npm install -D husky
然后在package.json的scripts字段中配置precommit，讓其執(zhí)行代碼檢測(cè)操作
"precommit": "eslint --ext .js --ext .vue src/"
此時(shí)提交的代碼存在問(wèn)題长酗，就會(huì)報(bào)錯(cuò)贮匕，提交失敗。
統(tǒng)一編輯器設(shè)置
目前網(wǎng)上存在很多編輯器花枫，其自定義配置也是各不相同刻盐，如何統(tǒng)一編輯器的設(shè)置呢？
所有的編輯器都提供了editorconfig的插件劳翰，它會(huì)讀取項(xiàng)目根目錄下的.editorconfig文件敦锌，然后進(jìn)行配置，因此我們可以通過(guò).editorconfig文件來(lái)編寫(xiě)編輯器的配置方案佳簸。
# 標(biāo)識(shí)為最終配置
root = true
# 所有文件配置
[*]
# 字符集
charset = utf-8
# 行結(jié)束符號(hào)
end_of_line = lf
# 縮緊
indent_size = 2
# 縮緊方式
indent_style = space
# 最后插入一行
insert_final_newline = true
# 刪除最后的空格
trim_trailing_whitespace = true
