本文是對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 參數(shù)進行設置 *//** * 文件內局部設置 * 【】eslint可以具體文件中設置特定代碼的規(guī)則，常用于跳過某條語句的檢測。 * 【】注銷全部規(guī)則，在代碼前新建一行，添加注銷 /* eslint-disable *//  。如果沒有恢復設置的語句，則下列全部代碼都會跳過檢測。 * 【】恢復eslint，在代碼前新建一行，添加注銷 /* eslint-enable *// * 【】指定忽略的規(guī)則，/* 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配置文件，用于私人開發(fā)者，用于整個電腦全局約束的。這個配置通過本配置項root去設置，設置了root,eslint檢測時將不會再往上搜索  * 【】eslint的生效規(guī)則是就近使用，越近的配置項優(yōu)先級越高，覆蓋其他配置項。如一個項目中，可以在不同文件夾中都添加配置文件，這些規(guī)則將重疊組合生效  */ root: true, // 標識當前配置文件為eslint的根配置文件，讓其停止在父級目錄中繼續(xù)尋找。 /**  * 解析器  * http://eslint.cn/docs/user-guide/configuring#specifying-parser  * 【】ESLint 默認使用Espree作為其解析器  * 【】解析器必須是本地安裝的一個 npm 模塊。即必須按照在本地的node_module中  * 【】解析器是用于解析js代碼的，怎么去理解每一個表達式，有點C++中編譯器的概念，會對js進行一些語法分析，語義分析什么的，才能判斷語句符不符合規(guī)范。而不是通過簡單的字符串對比。  * 【】解析器有很多，但兼容eslint的解析器有以下幾個  * Espree：默認解析器，一個從Esprima中分離出來的解析器，做了一些優(yōu)化  * 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  * 【】這里設置的配置項將會傳遞到解析器中，被解析器獲取到，進行一定的處理。具體被利用到，要看解析器的源碼有沒有對其進行利用。這里僅僅做了參數(shù)定義，做了規(guī)定，告訴解析器的開發(fā)者可能有這些參數(shù)  * 【】配置項目有：  * "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: {}, /**  * 運行環(huán)境  * http://eslint.cn/docs/user-guide/configuring#specifying-environments  * 【】一個環(huán)境定義了一組預定義的全局變量  * 【】獲得了特定環(huán)境的全局定義，就不會認為是開發(fā)定義的，跳過對其的定義檢測。否則會被認為改變量未定義  * 【】常見的運行環(huán)境有以下這些，更多的可查看官網(wǎng)  * browser - 瀏覽器環(huán)境中的全局變量。  * 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, // 瀏覽器環(huán)境 }, /**  * 全局變量  * http://eslint.cn/docs/user-guide/configuring#specifying-globals  * 【】定義額外的全局，開發(fā)者自定義的全局變量，讓其跳過no-undef 規(guī)則  * 【】key值就是額外添加的全局變量  * 【】value值用于標識該變量能否被重寫，類似于const的作用。true為允許變量被重寫  * 【】注意：要啟用no-global-assign規(guī)則來禁止對只讀的全局變量進行修改。  */ globals: {  // gTool: true, // 例如定義gTool這個全局變量，且這個變量可以被重寫 }, /**  * 插件  * http://eslint.cn/docs/user-guide/configuring#configuring-plugins  * 【】插件同樣需要在node_module中下載  * 【】注意插件名忽略了「eslint-plugin-」前綴，所以在package.json中，對應的項目名是「eslint-plugin-vue」  * 【】插件的作用類似于解析器，用以擴展解析器的功能，用于檢測非常規(guī)的js代碼。也可能會新增一些特定的規(guī)則。  * 【】如 eslint-plugin-vue，是為了幫助我們檢測.vue文件中 <template> 和 <script> 中的js代碼  */ plugins: [  'vue' ], /**  * 規(guī)則繼承  * http://eslint.cn/docs/user-guide/configuring#extending-configuration-files  *【】可繼承的方式有以下幾種  *【】eslint內置推薦規(guī)則，就只有一個，即「eslint:recommended」  *【】可共享的配置， 是一個 npm 包，它輸出一個配置對象。即通過npm安裝到node_module中  *  可共享的配置可以省略包名的前綴 eslint-config-，即實際設置安裝的包名是 eslint-config-airbnb-base  *【】從插件中獲取的規(guī)則，書寫規(guī)則為 「plugin:插件包名/配置名」，其中插件報名也是可以忽略「eslint-plugin-」前綴。如'plugin:vue/essential'  *【】從配置文件中繼承，即繼承另外的一個配置文件，如'./node_modules/coding-standard/eslintDefaults.js'  */ extends: [  'plugin:vue/essential', // 額外添加的規(guī)則可查看 https://vuejs.github.io/eslint-plugin-vue/rules/  /**   * 「airbnb，愛彼迎」   * 【】有兩種eslint規(guī)范，一種是自帶了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', ], /**  * 規(guī)則共享參數(shù)  * http://eslint.cn/docs/user-guide/configuring#adding-shared-settings  * 【】提供給具體規(guī)則項，每個參數(shù)值，每個規(guī)則項都會被注入該變量，但對應規(guī)則而言，有沒有用，就看各個規(guī)則的設置了，就好比 parserOptions，解析器用不用它就不知道了。這里只是提供這個方法  * 【】不用懷疑，經源碼驗證，這就是傳遞給每個規(guī)則項的，會當做參數(shù)傳遞過去，但用不用，就是具體規(guī)則的事情  */ settings: {  /**   *   * 注意，「import/resolver」并不是eslint規(guī)則項，與rules中的「import/extensions」不同。它不是規(guī)則項   * 這里只是一個參數(shù)名，叫「import/resolver」，會傳遞給每個規(guī)則項。   * settings并沒有具體的書寫規(guī)則，「import/」只是import模塊自己起的名字，原則上，它直接命名為「resolver」也可以，加上「import」只是為了更好地區(qū)分。不是強制設置的。   * 因為「import」插件很多規(guī)則項都用的這個配置項，所以并沒有通過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配置項。使用里面的參數(shù)。    * 主要是使用以下這些參數(shù)，共享給import規(guī)則，讓其正確識別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格式，一個類似正則的路徑規(guī)則，可以匹配不同的文件  * 【】配置幾乎與 ESLint 的其他配置相同。覆蓋塊可以包含常規(guī)配置中的除了 extends、overrides 和 root 之外的其他任何有效配置選項，  */ overrides: [  {   'files': ['bin/*.js', 'lib/*.js'],   'excludedFiles': '*.test.js',   'rules': {    'quotes': [2, 'single']   }  } ], /**  * 自定義規(guī)則  * http://eslint.cn/docs/user-guide/configuring#configuring-rules  * 【】基本使用方式  * "off" 或者0 關閉規(guī)則  * "warn" 或者1 將規(guī)則打開為警告（不影響退出代碼）  * "error" 或者2 將規(guī)則打開為錯誤（觸發(fā)時退出代碼為1）  * 如：'no-restricted-syntax': 0, // 表示關閉該規(guī)則  * 【】如果某項規(guī)則，有額外的選項，可以通過數(shù)組進行傳遞，而數(shù)組的第一位必須是錯誤級別。如0,1,2  * 如 'semi': ['error', 'never'], never就是額外的配置項  */ rules: {  /**   * 具體規(guī)則   * 【】具體的規(guī)則太多，就不做介紹了，有興趣的同學可以上eslint官網(wǎng)查   * 【】注意 xxx/aaa 這些規(guī)則是 xxx 插件自定的規(guī)則，在eslint官網(wǎng)是查不到的。需要到相應的插件官網(wǎng)中查閱   * 【】如 import/extensions，這是「eslint-plugin-import」自定義的規(guī)則，需要到其官網(wǎng)查看 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, // 不允許給函數(shù)參數(shù)重新賦值  "no-param-reassign": 0, // 不允許給函數(shù)參數(shù)重新賦值  "no-mixed-operators": 0, // 不允許混合使用運算符  "no-underscore-dangle": 0, // 不允許下劃線作為變量名之一  "no-under": 0, // 不允許混合使用運算符  'generator-star-spacing': 'off',  'no-console': 'off', // 禁用no-console規(guī)則  'semi': ['error', 'never'], // 行尾不使用分號  'comma-dangle': ['error'],  'eqeqeq': 0, // 不需要強制使用全等  'max-len': 0,  'radix': 0,// parseInt不需要傳第二個參數(shù)  'linebreak-style': 0, // 強制執(zhí)行一致的換行樣式，windows和mac不一樣  'consistent-return': 0, // 箭頭函數(shù)最后不需要最后強制return值  'no-unused-expressions': ["error", { "allowShortCircuit": true, "allowTernary": true }], // 允許您在表達式中使用三元運算符  'no-multi-spaces': ['error', { "ignoreEOLComments": true }], }}