ESLint簡(jiǎn)介

關(guān)于ESLint的介紹網(wǎng)上很多，這里就簡(jiǎn)單說(shuō)些有用的。

ESLint的作用是檢查代碼錯(cuò)誤和統(tǒng)一代碼風(fēng)格的。由于每個(gè)人寫(xiě)代碼的習(xí)慣都會(huì)有所不同，所以統(tǒng)一代碼風(fēng)格在團(tuán)隊(duì)協(xié)作中尤為重要。

vue-cli的eslint相關(guān)

vue-cli在init初始化時(shí)會(huì)詢(xún)問(wèn)是否需要添加ESLint，確認(rèn)之后在創(chuàng)建的項(xiàng)目中就會(huì)出現(xiàn).eslintignore和.eslintrc.js兩個(gè)文件。

• .eslintignore類(lèi)似Git的.gitignore用來(lái)忽略一些文件不使用ESLint檢查。
• .eslintrc.js是ESLint配置文件，用來(lái)設(shè)置插件、自定義規(guī)則、解析器等配置。

.eslintrc.js

// http://eslint.org/docs/user-guide/configuring

module.exports = {
 root: true,
 parser: 'babel-eslint',
 parserOptions: {
  sourceType: 'module'
 },
 env: {
  browser: true,
 },
 // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
 extends: 'standard',
 // required to lint *.vue files
 plugins: [
  'html'
 ],
 // add your custom rules here
 'rules': {
  // allow paren-less arrow functions
  'arrow-parens': 0,
  // allow async-await
  'generator-star-spacing': 0,
  // allow debugger during development
  'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
 }
}

解析器(parser)：使用了babel-eslint，這個(gè)可以在package.json中找到，說(shuō)明我們已經(jīng)安裝過(guò)該解析器了。

環(huán)境配置(env)：在瀏覽器中使用eslint。

繼承(extends)：該配置文件繼承了standard規(guī)則，具體規(guī)則自己看文檔，看不懂有中文版的。

規(guī)則(rules)：對(duì)于三個(gè)自定義規(guī)則，我特地查了官方文檔。

• arrow-parems 允許箭頭函數(shù)參數(shù)使用括號(hào),具體操作請(qǐng)看文檔
• generator-star-spacing 允許方法之間加星號(hào)，如function * generator() {}。文檔在此。特地查了下，發(fā)現(xiàn)這是ES6提供的生成器函數(shù)，回頭學(xué)習(xí)下。
• no-debugger' 允許在開(kāi)發(fā)環(huán)境下使用debugger。這個(gè)比較簡(jiǎn)單，不過(guò)還是貼下文檔便于查看。

注意：在rules中每個(gè)配置項(xiàng)后面第一個(gè)值是eslint規(guī)則的錯(cuò)誤等級(jí)。

* “off” 或 0 - 關(guān)閉這條規(guī)則
* “warn” 或 1 - 違反規(guī)則會(huì)警告（不會(huì)影響項(xiàng)目運(yùn)行）
* “error” 或 2 - 違反規(guī)則會(huì)報(bào)錯(cuò)（屏幕上一堆錯(cuò)誤代碼~）

遇到過(guò)的問(wèn)題

由于一開(kāi)始我不了解ESLint就寫(xiě)項(xiàng)目，不知道要看Standard的文檔，所以遇到了很多ESLint的錯(cuò)誤和警告，分享下希望能對(duì)朋友們有幫助。

1. Do not use ‘new' for side effects

該錯(cuò)誤是由于我刪除了/* eslint-disable no-new*/這段注釋引發(fā)的，/* eslint-disable */這段注釋的作用就是不讓eslint檢查注釋下面的代碼。

new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: { App }
})

錯(cuò)誤原因：不可以直接new一個(gè)新對(duì)象，需要將新對(duì)象賦值給一個(gè)變量。

var vm = new Vue()

2. Strings must use singlequote

錯(cuò)誤原因：字符串必須用單引號(hào)

return {
   msg: "Welcome to Your Vue.js App", //雙引號(hào)，報(bào)錯(cuò)！
  }

3. Expected space(s) after “return”

錯(cuò)誤原因：括號(hào)兩側(cè)必須要有空格隔開(kāi)

return{// 沒(méi)有空格報(bào)錯(cuò)
 msg: 'Welcome to Your Vue.js App', 
}

startClock (){} //){中間沒(méi)有空格，報(bào)錯(cuò)！

4. Expected indentation of 8 spaces but found 6

錯(cuò)誤原因：使用兩個(gè)空格進(jìn)行縮進(jìn)。

   if (this.IntervalID === '') {
   this.IntervalID = setInterval(this.countDown, 1000)
   }

其實(shí)ESLint的報(bào)錯(cuò)并不難懂，只要理解錯(cuò)誤原因還是很好解決的。如果提前看看文檔，更不會(huì)出現(xiàn)太多報(bào)錯(cuò)問(wèn)題了。這個(gè)故事告訴我們看文檔是很重要滴~%>_<%

Tips

發(fā)現(xiàn)ESLint的報(bào)錯(cuò)都會(huì)在報(bào)錯(cuò)語(yǔ)句前面顯示一個(gè)URL，點(diǎn)擊進(jìn)去可以看到詳細(xì)的錯(cuò)誤信息哦。這是我剛在寫(xiě)博客的時(shí)候發(fā)現(xiàn)的。

 http://eslint.org/docs/rules/no-new Do not use 'new' for side effects 
 E:\Github\EfficiencyTools\EfficiencyTool-VueMobile\src\main.js:15:1
 new Vue({

這里的 http://eslint.org/docs/rules/no-new 就是ESLint規(guī)則報(bào)錯(cuò)的原因，還是很人性化的。

總結(jié)

其實(shí)vue-cli的ESLint不需要我們配置太多，基本的都配置好了，如果你愿意完全可以照著vue-cli提供的規(guī)則去寫(xiě)代碼。當(dāng)我們需要修改一些規(guī)則的時(shí)候添加到rules中替換原有規(guī)則就可以了。一開(kāi)始用ESLint寫(xiě)代碼很煩，經(jīng)常由于一些格式問(wèn)題調(diào)試報(bào)錯(cuò)，讓回去改格式。不過(guò)慢慢的就會(huì)發(fā)現(xiàn)使用ESLint之后代碼的確可讀性、美觀性上都好了很多。
推薦使用ESLint來(lái)規(guī)范代碼編輯~

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。