ESLint簡介

關于ESLint的介紹網上很多，這里就簡單說些有用的。

ESLint的作用是檢查代碼錯誤和統一代碼風格的。由于每個人寫代碼的習慣都會有所不同，所以統一代碼風格在團隊協作中尤為重要。

vue-cli的eslint相關

vue-cli在init初始化時會詢問是否需要添加ESLint，確認之后在創建的項目中就會出現.eslintignore和.eslintrc.js兩個文件。

.eslintrc.js

// http://eslint.org/docs/user-guide/configuringmodule.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，這個可以在package.json中找到，說明我們已經安裝過該解析器了。

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

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

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

注意：在rules中每個配置項后面第一個值是eslint規則的錯誤等級。

* “off” 或 0 - 關閉這條規則
* “warn” 或 1 - 違反規則會警告（不會影響項目運行）
* “error” 或 2 - 違反規則會報錯（屏幕上一堆錯誤代碼~）

遇到過的問題

由于一開始我不了解ESLint就寫項目，不知道要看Standard的文檔，所以遇到了很多ESLint的錯誤和警告，分享下希望能對朋友們有幫助。

1. Do not use ‘new' for side effects

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

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

錯誤原因：不可以直接new一個新對象，需要將新對象賦值給一個變量。