详解ESLint在Vue中的使用小结

plugins: [
'html'
],
// add your custom rules here
// 下面这些rules是用来设置从插件来的规范代码的规则，使用必须去掉前缀eslint-plugin-
// 主要有如下的设置规则，可以设置字符串也可以设置数字，两者效果一致
// "off" -> 0 关闭规则
// "warn" -> 1 开启警告规则
//"error" -> 2 开启错误规则
// 了解了上面这些，下面这些代码相信也看的明白了
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// js语句结尾必须使用分号
'semi': ['off', 'always'],
// 三等号
'eqeqeq': 0,
// 强制在注释中 // 或 /* 使用一致的空格
'spaced-comment': 0,
// 关键字后面使用一致的空格
'keyword-spacing': 0,
// 强制在 function的左括号之前使用一致的空格
'space-before-function-paren': 0,
// 引号类型
"quotes": [0, "single"],
// 禁止出现未使用过的变量
// 'no-unused-vars': 0,
// 要求或禁止末尾逗号
'comma-dangle': 0
}
}

“off” 或 0 – 关闭规则
“warn” 或 1 – 开启规则
“error” 或 2 – 开启规则

如何在老项目中加入ESlint

1. 在目录中添加.editorconfig、.eslintrc.js、.eslintignore这三个文件

2. 在package.json的”devDependencies”中加入ESlint所需要的包

  "babel-eslint": "^7.1.1",
  "eslint": "^3.19.0",
  "eslint-config-standard": "^10.2.1",
  "eslint-friendly-formatter": "^3.0.0",
  "eslint-loader": "^1.7.1",
  "eslint-plugin-html": "^3.0.0",
  "eslint-plugin-import": "^2.7.0",
  "eslint-plugin-node": "^5.2.0",
  "eslint-plugin-promise": "^3.4.0",
  "eslint-plugin-standard": "^3.0.1",

3. 在bulid/webpack.base.conf.js文件中加入ESlint规则并生效

// 在module的rules中加入
 module: {
  rules: [
   {
    test: /.(js|vue)$/,
    loader: 'eslint-loader',
    enforce: 'pre',
    include: [resolve('src'), resolve('test')],
    options: {
     formatter: require('eslint-friendly-formatter'),
     // 不符合Eslint规则时只警告(默认运行出错)
     // emitWarning: !config.dev.showEslintErrorsInOverlay
    }
   },
  ] }

4. 重新bulid代码运行,完美生效!!!!!!

推荐三个VSCode插件

ESLint (只支持高亮显示js文件)
EditorConfig
Typings(代码错误提示)

常见的报错

文件末尾存在空行(eol-last)