前言

最近学习Vue，通过vue-cli脚手架创建的项目环境，写了段时间后，发现这个ESlint语法检测真是令人抓狂！！！所以不得不停下手中的代码去学习下ESlint的规则配置。

其实我并不反对这些语法检测，但是像许多反个人意愿的那就真的不得不吐槽了，比如vue-cli脚手架创建的默认eslint规则：
代码末尾不能加分号 ;

• 代码中不能存在多行空行

• tab键不能使用，必须换成两个空格

• 代码中不能存在声明了但未使用的变量

以上规则个人认为真的反人类！调试代码太难了。
好吧进入正题...
 

关闭eslint

这里只说vue-cli脚手架的关闭方法，其实很简单，就是把 build/webpack.base.conf.js
配置文件中的eslint rules注释掉即可。

module: {
    rules: [      // {
      //   test: /\.(js|vue)$/,
      //   loader: 'eslint-loader',
      //   enforce: 'pre',
      //   include: [resolve('src'), resolve('test')],
      //   options: {
      //     formatter: require('eslint-friendly-formatter')
      //   }
      // },
      
      ...
     ]
     ...
   }

如图：

世界都安静了！有木有。
 

配置文件

如果想保留eslint的语法检测，那就把不符合自己习惯的规则去掉吧。
配置文件在项目根目录里，文件名以 .eslintrc.* 为名。

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {    //设置"script"（默认）或"module"如果你的代码是在ECMAScript中的模块。
    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,    "no-unused-vars": [2, { 
      // 允许声明未使用变量
      "vars": "local",      // 参数不检查
      "args": "none" 
    }],    // 关闭语句强制分号结尾
    "semi": [0],    //空行最多不能超过100行
    "no-multiple-empty-lines": [0, {"max": 100}],    //关闭禁止混用tab和空格
    "no-mixed-spaces-and-tabs": [0],
  }
}

PS：其中 rules 就是配置规则的。
 

配置参数

rules: {    "规则名": [规则值, 规则配置]
}

规则值：

"off"或者0    //关闭规则关闭"warn"或者1    //在打开的规则作为警告（不影响退出代码）"error"或者2    //把规则作为一个错误（退出代码触发时为1）

更多详细的说明请移步

本文转载自：https://segmentfault.com/a/1190000008742240