vue中eslintrc.js配置最詳細介紹

本文是對vue項目中自帶文件eslintrc.js的內容解析，
介紹了各個eslint配置項的做用，以及爲何這樣設置。
比較詳細，看完能對eslint有較爲全面的瞭解，基本解除對該文件的疑惑。
/**
 * 參考文檔
 * 【eslint英文文檔】https://eslint.org/docs/user-guide/configuring
 * 【eslint中文文檔】http://eslint.cn/docs/rules/
 */
 
/**
 * eslint有三種使用方式
 * 【1】js代碼中經過註釋的方式使用
 * 【2】經過webpack的eslintConfig字段設置，eslint會自動搜索項目的package.json文件中的配置
 * 【3】經過配置文件的方式使用，配置文件有多種文件方式，如JavaScript、JSON 或者 YAML等
 */
 
/**
 * 文件忽略
 * 【】讓eslint跳過特定文件的檢測
 * 【】經過當前工做目錄下 「.eslintignore」 文件進行設置
 *  其使用的是Glob路徑書寫方式，與「.gitignore」的使用方法相同
 * 【】也能夠在 package.json 文件中，經過 eslintIgnore 參數進行設置
 */
 
/**
 * 文件內局部設置
 * 【】eslint能夠具體文件中設置特定代碼的規則，經常使用於跳過某條語句的檢測。
 * 【】註銷所有規則，在代碼前新建一行，添加註銷 /* eslint-disable *\/  。若是沒有恢復設置的語句，則下列所有代碼都會跳過檢測。
 * 【】恢復eslint，在代碼前新建一行，添加註銷 /* eslint-enable *\/
 * 【】指定忽略的規則，/* eslint-disable no-alert, no-console *\/
 * 【】在特定行禁用，// eslint-disable-line
 * 【】在下一行禁用，// eslint-disable-next-line
 */
 
module.exports = {
 
 /**
  * 根目錄標識
  * http://eslint.cn/docs/user-guide/configuring#using-configuration-files
  * http://eslint.cn/docs/user-guide/configuring#configuration-cascading-and-hierarchy
  * 【】標識當前配置文件爲最底層的文件，無需往更上一級的文件目錄中進行搜索
  * 【】默認eslint的配置文件搜索方式是，從目標文件夾進行搜索，遍歷內部每個文件夾，找到配置文件並層疊使用。再跳出本項目，往祖先文件夾進行遍歷
  * 【】注意「~/.eslintrc」的意義，「~」是指linux上的家目錄，「~/.eslintrc」是指家目錄下的eslint配置文件，用於私人開發者，用於整個電腦全局約束的。這個配置經過本配置項root去設置，設置了root,eslint檢測時將不會再往上搜索
  * 【】eslint的生效規則是就近使用，越近的配置項優先級越高，覆蓋其餘配置項。如一個項目中，能夠在不一樣文件夾中都添加配置文件，這些規則將重疊組合生效
  */
 root: true, // 標識當前配置文件爲eslint的根配置文件，讓其中止在父級目錄中繼續尋找。
 
 
 /**
  * 解析器
  * http://eslint.cn/docs/user-guide/configuring#specifying-parser
  * 【】ESLint 默認使用Espree做爲其解析器
  * 【】解析器必須是本地安裝的一個 npm 模塊。即必須按照在本地的node_module中
  * 【】解析器是用於解析js代碼的，怎麼去理解每個表達式，有點C++中編譯器的概念，會對js進行一些語法分析，語義分析什麼的，才能判斷語句符不符合規範。而不是經過簡單的字符串對比。
  * 【】解析器有不少，但兼容eslint的解析器有如下幾個
  * Espree：默認解析器，一個從Esprima中分離出來的解析器，作了一些優化
  * Esprima：js標準解析器
  * Babel-ESLint： 一個對Babel解析器的包裝，babel自己也是js解析器的一種（否則怎麼能轉化爲兼容性代碼呢？首先須要進行js解析，才能轉化）。若是咱們的代碼須要通過babel轉化，則對應使用這個解析器
  * typescript-eslint-parser(實驗) - 一個把 TypeScript 轉換爲 ESTree 兼容格式的解析器
  */
 parser: 'babel-eslint',
 
 
 /**
  * 解析器配置項
  * http://eslint.cn/docs/user-guide/configuring#specifying-parser-options
  * 【】這裏設置的配置項將會傳遞到解析器中，被解析器獲取到，進行必定的處理。具體被利用到，要看解析器的源碼有沒有對其進行利用。這裏僅僅作了參數定義，作了規定，告訴解析器的開發者可能有這些參數
  * 【】配置項目有：
  * "sourceType": "module",  // 指定JS代碼來源的類型，script(script標籤引入？) | module（es6的module模塊），默認爲script。爲何vue的會使用script呢？由於vue是經過babel-loader編譯的，而babel編譯後的代碼就是script方式
  * "ecmaVersion": 6,     // 支持的ES語法版本，默認爲5。注意只是語法，不包括ES的全局變量。全局變量須要在env選項中進行定義
  * "ecmaFeatures": {     // Features是特徵的意思，這裏用於指定要使用其餘那些語言對象
    "experimentalObjectRestSpread": true, //啓用對對象的擴展
    "jsx": true,              //啓用jsx語法
    "globalReturn":true,          //容許return在全局使用
    "impliedStrict":true          //啓用嚴格校驗模式
   }
  */
 parserOptions: {},
 
 
 /**
  * 運行環境
  * http://eslint.cn/docs/user-guide/configuring#specifying-environments
  * 【】一個環境定義了一組預約義的全局變量
  * 【】得到了特定環境的全局定義，就不會認爲是開發定義的，跳過對其的定義檢測。不然會被認爲改變量未定義
  * 【】常見的運行環境有如下這些，更多的可查看官網
  * browser - 瀏覽器環境中的全局變量。
  * node - Node.js 全局變量和 Node.js 做用域。
  * es6 - 啓用除了 modules 之外的全部 ECMAScript 6 特性（該選項會自動設置 ecmaVersion 解析器選項爲 6）。
  * amd - 將 require() 和 define() 定義爲像 amd 同樣的全局變量。
  * commonjs - CommonJS 全局變量和 CommonJS 做用域 (用於 Browserify/WebPack 打包的只在瀏覽器中運行的代碼)。
  * jquery - jQuery 全局變量。
  * mongo - MongoDB 全局變量。
  * worker - Web Workers 全局變量。
  * serviceworker - Service Worker 全局變量。
  */
 env: {
  browser: true, // 瀏覽器環境
 },
 
 
 /**
  * 全局變量
  * http://eslint.cn/docs/user-guide/configuring#specifying-globals
  * 【】定義額外的全局，開發者自定義的全局變量，讓其跳過no-undef 規則
  * 【】key值就是額外添加的全局變量
  * 【】value值用於標識該變量可否被重寫，相似於const的做用。true爲容許變量被重寫
  * 【】注意：要啓用no-global-assign規則來禁止對只讀的全局變量進行修改。
  */
 globals: {
  // gTool: true, // 例如定義gTool這個全局變量，且這個變量能夠被重寫
 },
 
 
 /**
  * 插件
  * http://eslint.cn/docs/user-guide/configuring#configuring-plugins
  * 【】插件一樣須要在node_module中下載
  * 【】注意插件名忽略了「eslint-plugin-」前綴，因此在package.json中，對應的項目名是「eslint-plugin-vue」
  * 【】插件的做用相似於解析器，用以擴展解析器的功能，用於檢測很是規的js代碼。也可能會新增一些特定的規則。
  * 【】如 eslint-plugin-vue，是爲了幫助咱們檢測.vue文件中 <template> 和 <script> 中的js代碼
  */
 plugins: [
  'vue'
 ],
 
 
 /**
  * 規則繼承
  * http://eslint.cn/docs/user-guide/configuring#extending-configuration-files
  *【】可繼承的方式有如下幾種
  *【】eslint內置推薦規則，就只有一個，即「eslint:recommended」
  *【】可共享的配置， 是一個 npm 包，它輸出一個配置對象。即經過npm安裝到node_module中
  *  可共享的配置能夠省略包名的前綴 eslint-config-，即實際設置安裝的包名是 eslint-config-airbnb-base
  *【】從插件中獲取的規則，書寫規則爲 「plugin:插件包名/配置名」，其中插件報名也是能夠忽略「eslint-plugin-」前綴。如'plugin:vue/essential'
  *【】從配置文件中繼承，即繼承另外的一個配置文件，如'./node_modules/coding-standard/eslintDefaults.js'
  */
 extends: [
  'plugin:vue/essential', // 額外添加的規則可查看 https://vuejs.github.io/eslint-plugin-vue/rules/
  /**
   * 「airbnb，愛彼迎」
   * 【】有兩種eslint規範，一種是自帶了react插件的「eslint-config-airbnb」，一種是基礎款「eslint-config-airbnb-base」，
   * 【】airbnb-base 包括了ES6的語法檢測，須要依賴 「eslint-plugin-import」
   * 【】因此在使用airbnb-base時，須要用npm額外下載 eslint-plugin-import
   * 【】因此eslint實際上已經由於 airbnb-base 基礎配置項目，添加上了 eslint-plugin-import 插件配置
   * 【】因此在setting和rules裏，都有 'import/xxx' 項目，這裏修改的就是 eslint-plugin-import 配置
   */
  'airbnb-base',
 ],
 
 
 /**
  * 規則共享參數
  * http://eslint.cn/docs/user-guide/configuring#adding-shared-settings
  * 【】提供給具體規則項，每一個參數值，每一個規則項都會被注入該變量，但對應規則而言，有沒有用，就看各個規則的設置了，就比如 parserOptions，解析器用不用它就不知道了。這裏只是提供這個方法
  * 【】不用懷疑，經源碼驗證，這就是傳遞給每一個規則項的，會當作參數傳遞過去，但用不用，就是具體規則的事情
  */
 settings: {
  /**
   *
   * 注意，「import/resolver」並非eslint規則項，與rules中的「import/extensions」不一樣。它不是規則項
   * 這裏只是一個參數名，叫「import/resolver」，會傳遞給每一個規則項。
   * settings並無具體的書寫規則，「import/」只是import模塊本身起的名字，原則上，它直接命名爲「resolver」也能夠，加上「import」只是爲了更好地區分。不是強制設置的。
   * 由於「import」插件不少規則項都用的這個配置項，因此並無經過rules設置，而是經過settings共享
   * 具體使用方法可參考https://github.com/benmosher/eslint-plugin-import
   */
  'import/resolver': {
   /**
    * 這裏傳入webpack並非import插件能識別webpack，並且經過npm安裝了「eslint-import-resolver-webpack」，
    * 「import」插件經過「eslint-import-resolver-」+「webpack」找到該插件並使用，就能解析webpack配置項。使用裏面的參數。
    * 主要是使用如下這些參數，共享給import規則，讓其正確識別import路徑
    * extensions: ['.js', '.vue', '.json'],
    * alias: {
    * 'vue$': 'vue/dist/vue.esm.js',
    * '@': resolve('src'),
    * 'static': resolve('static')
    * }
    */
   webpack: {
    config: 'build/webpack.base.conf.js'
   }
  }
 },
 
 /**
  * 針對特定文件的配置
  * 【】能夠經過overrides對特定文件進行特定的eslint檢測
  * 【】特定文件的路徑書寫使用Glob格式，一個相似正則的路徑規則，能夠匹配不一樣的文件
  * 【】配置幾乎與 ESLint 的其餘配置相同。覆蓋塊能夠包含常規配置中的除了 extends、overrides 和 root 以外的其餘任何有效配置選項，
  */
 overrides: [
  {
   'files': ['bin/*.js', 'lib/*.js'],
   'excludedFiles': '*.test.js',
   'rules': {
    'quotes': [2, 'single']
   }
  }
 ],
 
 /**
  * 自定義規則
  * http://eslint.cn/docs/user-guide/configuring#configuring-rules
  * 【】基本使用方式
  * "off" 或者0 關閉規則
  * "warn" 或者1 將規則打開爲警告（不影響退出代碼）
  * "error" 或者2 將規則打開爲錯誤（觸發時退出代碼爲1）
  * 如：'no-restricted-syntax': 0, // 表示關閉該規則
  * 【】若是某項規則，有額外的選項，能夠經過數組進行傳遞，而數組的第一位必須是錯誤級別。如0,1,2
  * 如 'semi': ['error', 'never'], never就是額外的配置項
  */
 rules: {
  /**
   * 具體規則
   * 【】具體的規則太多，就不作介紹了，有興趣的同窗能夠上eslint官網查
   * 【】注意 xxx/aaa 這些規則是 xxx 插件自定的規則，在eslint官網是查不到的。須要到相應的插件官網中查閱
   * 【】如 import/extensions，這是「eslint-plugin-import」自定義的規則，須要到其官網查看 https://github.com/benmosher/eslint-plugin-import
   */
  'import/extensions': ['error', 'always', {
   js: 'never',
   vue: 'never'
  }],
  'import/no-extraneous-dependencies': ['error', {
   optionalDependencies: ['test/unit/index.js']
  }],
  'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  "no-restricted-syntax": 0, //
  "guard-for-in": 0, //
  "prefer-const": 0, //
  "no-else-return": 0, //
  "no-plusplus": 0, // 不容許使用++符號
  "object-shorthand": ["error", "always", { "avoidQuotes": false }], // 去除禁止'videoData.isPause'(newValue) 的命名
  "no-lonely-if": 0, // 不容許給函數參數從新賦值
  "no-param-reassign": 0, // 不容許給函數參數從新賦值
  "no-mixed-operators": 0, // 不容許混合使用運算符
  "no-underscore-dangle": 0, // 不容許下劃線做爲變量名之一
  "no-under": 0, // 不容許混合使用運算符
  'generator-star-spacing': 'off',
  'no-console': 'off', // 禁用no-console規則
  'semi': ['error', 'never'], // 行尾不使用分號
  'comma-dangle': ['error'],
  'eqeqeq': 0, // 不須要強制使用全等
  'max-len': 0,
  'radix': 0,// parseInt不須要傳第二個參數
  'linebreak-style': 0, // 強制執行一致的換行樣式，windows和mac不同
  'consistent-return': 0, // 箭頭函數最後不須要最後強制return值
  'no-unused-expressions': ["error", { "allowShortCircuit": true, "allowTernary": true }], // 容許您在表達式中使用三元運算符
  'no-multi-spaces': ['error', { "ignoreEOLComments": true }],
 }
}