vue项目中配置ESLint

一.安装ESLint

安装ESLint主要由全局安装和项目安装两种方法，但是要注意一旦你选择全局安装ESLint相关的eslint插件页必须全局安装。

1.全局安装

npm i ESLint -g

2.项目安装

npm install eslint --save-dev

二.配置ESLint

1.创建 .eslintrc.js 文件

./node_modules/.bin/eslint --init

运行 eslint --init 之后，.eslintrc 文件会在你的文件夹中自动创建。你可以在 .eslintrc 文件中看到许多像这样的规则：

{
   
    "rules": {
   
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}

"semi" 和 "quotes" 是 ESLint 中 规则 的名称。第一个值是错误级别，可以使下面的值之一：

• "off" or 0 - 关闭规则
• "warn" or 1 - 将规则视为一个警告（不会影响退出码）
• "error" or 2 - 将规则视为一个错误 (退出码为1)
  这三个错误级别可以允许你细粒度的控制 ESLint 是如何应用规则

2.编辑 .eslintrc.js文件 可看官网上有详细ESLint配置选项介绍

module.exports = {
   
  // 默认情况下，ESLint会在所有父级组件中寻找配置文件，一直到根目录。ESLint一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。
  root: true,
  
  // 对Babel解析器的包装使其与 ESLint 兼容。
  parser: 'babel-eslint',
  parserOptions: {
    // 设置解析器选项能帮助 ESLint 确定什么是解析错误，所有语言选项默认都是 false
    ecmaVersion: 6, // 支持es6语法，但并不意味着同时支持新的 ES6 全局变量或类型（比如 Set 等新类型）
    sourceType: 'module', // 指定来源的类型，"script" (默认) 或 "module"（代码是 ECMAScript 模块)
    // 使用的额外的语言特性
    ecmaFeatures: {
   
      jsx: true, // 启用 JSX
      globalReturn: true, // 允许在全局作用域下使用 return 语句
      impliedStrict: true, // 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)
      experimentalObjectRestSpread: true, // 启用实验性的 object rest/spread properties 支持。(重要：这是一个实验性的功能,在未来可能会有明显改变。 建议你写的规则 不要 依赖该功能，除非当它发生改变时你愿意承担维护成本。)
    },
  },
  env: {
   
    browser: true, // 预定义的全局变量
    es6: true, // 启用 ES6 语法支持以及新的 ES6 全局变量或类型
  },
  
  // 扩展一个流行的风格指南，即 eslint-config-standard 
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  extends: 'standard',
  // required to lint *.vue files
  plugins: [
    // 此插件用来识别.html 和 .vue文件中的js代码
    'html',
    // standard风格的依赖包
    "standard",
    // standard风格的依赖包
    "promise"
  ],
  // add your custom rules here
  'rules': {
   
    // 自定义规则
  }
}

• 当你引入改写引入的组件时，通常需要关闭ESLint检测，以下是集中关闭方式
  （1）关闭所有规则/* eslint-disable */

/* eslint-disable */

...;

/* eslint-enable */

（2）关闭某一行的所有规则// eslint-disable-line

...; // eslint-disable-line

// eslint-disable-next-line
...;

（3）在某一行关闭指定的规则 // eslint-disable-line no-alert

...; // eslint-disable-line no-alert

// eslint-disable-next-line no-alert
...;

• 以下是一些常用的自定义规则，若要看完整的可移步官网查看

'rules': {
   
      "comma-dangle": ["error", "never"], //是否允许对象中出现结尾逗号
      "no-cond-assign": 2, //条件语句的条件中不允许出现赋值运算符
      "no-console": 2, //不允许出现console语句
      "no-constant-condition": 2, //条件语句的条件中不允许出现恒定不变的量
      "no-control-regex": 2, //正则表达式中不允许出现控制字符
      "no-debugger": 2, //不允许出现debugger语句
      "no-dupe-args": 2, //函数定义的时候不允许出现重复的参数
      "no-dupe-keys": 2