一、文章参考

1. ESLint在Vue中的使用详解
2. 在VUE应用中配置ESLint(代码检查)

二、Vue工程eslint开关

对于初学者，写代码要按照一定的风格来编写，甚至导致出现开发完了编译无法通过的问题，很是苦恼，在Vue2.x 脚手架中，可以快速关闭eslint校验功能，项目名/config/index.js配置文件中，配置eslint:false

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  dev: {
    // Use Eslint Loader?
    // If true, your code will be linted during bundling and
    // linting errors and warnings will be shown in the console.
    useEslint: true,
  },
}

三、配置文件.eslintignore和.eslintrc

通常 .eslintignore 和 .eslintrc 文件需要在项目的根目录下面

.eslintignore文件

放置需要ESLint忽略的文件，只对.js文件有效

/build/
/config/
/dist/
/src/utils/
/src/router/*.js

.eslintrc文件

文件(用来配置ESLint的检查规则)

module.exports = {
    //此项是用来告诉eslint找当前配置文件不能往父级查找
    root: true, 
    //此项是用来指定eslint解析器的，解析器必须符合规则，babel-eslint解析器是对babel解析器的包装使其与ESLint解析
    parser: 'babel-eslint',
    //此项是用来指定javaScript语言类型和风格，sourceType用来指定js导入的方式，默认是script，此处设置为module，指某块导入方式
    parserOptions: {
        sourceType: 'module'
    },
    //此项指定环境的全局变量，下面的配置指定为浏览器环境
    env: {
        browser: true,
    },
    // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
    // 此项是用来配置标准的js风格，就是说写代码的时候要规范的写，如果你使用vs-code我觉得应该可以避免出错
    extends: 'standard',
    // required to lint *.vue files
    // 此项是用来提供插件的，插件名称省略了eslint-plugin-，下面这个配置是用来规范html的
    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
  }
}

ESLint的规则有三种级别

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

四、案例

下面是我经常犯的错误

字符串没有使用单引号(’quotes’: [1, ’single’])

缺少分号(‘semi’: [‘error’,’always’])