一、ESLint

協同開發過程中，經常感受到來自代碼檢視的惡意。代碼習慣不一致，看半天；居然提交低級錯誤，我的天(╯‵□′)╯︵┻━┻！...研究了一番，決定使用ESLint來做代碼規范檢查。

二、配置方式

三、配置過程(配置文件)

安裝相關npm包

yarn add eslint babel-eslint eslint-plugin-vue eslint-friendly-formatter --dev

增加文件

修改webpack配置文件

module.exports = { module: {  rules: [   test: //.(js|vue)$/,   loader: "eslint-loader",   enforce: "pre",   //指定檢查的目錄   include: [resolve(__dirname, 'src')],   //eslint檢查報告的格式規范   options: {    formatter: require("eslint-friendly-formatter")   }  ] }}

四、配置文件詳解

以.eslintrc.js為例

module.exports = { //一旦配置了root，ESlint停止在父級目錄中查找配置文件 root: true, //解析器 parser: "babel-eslint", //想要支持的JS語言選項 parserOptions: {  //啟用ES6語法支持(如果支持es6的全局變量{env: {es6: true}}，則默認啟用ES6語法支持)  //此處也可以使用年份命名的版本號：2015  ecmaVersion: 6,  //默認為script  sourceType: "module",  //支持其他的語言特性  ecmaFeatures: {   //...  } }, //代碼運行的環境，每個環境都會有一套預定義的全局對象，不同環境可以組合使用 env: {  es6: true,  browser: true,  jquery: true }, //訪問當前源文件中未定義的變量時，no-undef會報警告。 //如果這些全局變量是合規的，可以在globals中配置，避免這些全局變量發出警告 globals: {  //配置給全局變量的布爾值，是用來控制該全局變量是否允許被重寫  test_param： true }, //支持第三方插件的規則，插件以eslint-plugin-作為前綴，配置時該前綴可省略 //檢查vue文件需要eslint-plugin-vue插件 plugins: ["vue"], //集成推薦的規則 extends: ["eslint:recommended", "plugin:vue/essential"], //啟用額外的規則或者覆蓋默認的規則 //規則級別分別：為"off"(0)關閉、"warn"(1)警告、"error"(2)錯誤--error觸發時，程序退出 rules: {  //關閉“禁用console”規則  "no-console": "off",  //縮進不規范警告，要求縮進為2個空格，默認值為4個空格  "indent": ["warn", 2, {   //設置為1時強制switch語句中case的縮進為2個空格   "SwitchCase": 1,   //分別配置var、let和const的縮進   "VariableDeclarator": { "var": 2, "let": 2, "const": 3 }  }],  //定義字符串不規范錯誤，要求字符串使用雙引號  quotes: ["error", "double"],  //....  //更多規則可查看http://eslint.cn/docs/rules/ }}