安装

npm install -g eslint

eslint --init

新建文件

与src同级，新建新建.eslintrc.js文件

规则：

​ 0 => 关闭规则

​ 1=>将规则视为一个警告

​ 2=>将规则视为一个错误

module.exports = {
  "root": true,
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true
  },
  "extends": [
    "plugin:vue/essential"
  ],
  // "extends": ['plugin:vue/recommended', 'eslint:recommended'], // 最严格模式，会在命令窗口打印错误提示
  // 在js里面有些时候用到一些全局变量，防止eslint无脑报错
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly",
    "process": false
  },
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "rules": {
    'no-console': 0, // 禁用 console
    'no-unused-vars': [1, {
      'vars': 'all',
      'args': 'none'
    }], // 禁止出现未使用过的变量
    // 'semi': [2, 'never'], // 要求或禁止使用分号代替 ASI，分号设置：never 从不出现分号，always 必须分号结尾
    'semi': [1,'always'],
    'spaced-comment': [2, 'always', {
      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
    }], // 强制在注释中 // 或 /* 使用一致的空格
    'array-bracket-spacing': [2, 'never'], // 强制数组方括号中使用一致的空格
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, // 禁用 debugger
    'no-with': 2, // 禁用 with 语句
    'no-unsafe-finally': 2, // 禁止在 finally 语句块中出现控制流语句
    'no-self-assign': 2, // 禁止自我赋值
    'no-self-compare': 2, // 禁止自身比较
    'no-eval': 2, // 禁用 eval()
    'no-implied-eval': 2, // 禁止使用类似 eval() 的方法 
    'no-duplicate-case': 2, // 禁止出现重复的 case 标签
    'no-fallthrough': 2, // 禁止 case 语句落空
    'no-dupe-keys': 2, // 禁止对象字面量中出现重复的 key
    'no-dupe-args': 2, // 禁止 function 定义中出现重名参数
    'block-spacing': [2, 'always'], // 禁止或强制在代码块中开括号前和闭括号后有空格
    'indent': [2, 2, {
      'SwitchCase': 1
    }], // 强制使用一致的缩进
    'quotes': [2, 'single', {
      'avoidEscape': true,
      'allowTemplateLiterals': true
    }], // 强制使用一致的反勾号、双引号或单引号 single  double
    'space-before-blocks': [2, 'always'], // 强制在块之前使用一致的空格
    'object-curly-spacing': [2, 'always', {
      objectsInObjects: false
    }], // 强制在大括号中使用一致的空格
    'space-infix-ops': 2, // 要求操作符周围有空格
    'space-unary-ops': [2, {
      'words': true,
      'nonwords': false
    }], // 强制在一元操作符前后使用一致的空格
    'space-in-parens': [2, 'never'], // 强制在圆括号内使用一致的空格
    'space-before-function-paren': [2, 'never'], // 强制在 function的左括号之前使用一致的空格
    'semi-spacing': [2, {
      'before': false,
      'after': true
    }], // 强制分号之前和之后使用一致的空格
    'padded-blocks': [1, 'never'], // 要求或禁止块内填充
    'operator-linebreak': [2, 'after', {
      'overrides': {
        '?': 'before',
        ':': 'before'
      }
    }], // 强制操作符使用一致的换行符
    'no-useless-escape': 0, // 禁用不必要的转义字符
    'no-whitespace-before-property': 2, // 禁止属性前有空白
    'no-unmodified-loop-condition': 2, // 禁用一成不变的循环条件
    'no-trailing-spaces': 1, // 禁用行尾空格
    'no-return-assign': [2, 'except-parens'], // 禁止在 return 语句中使用赋值语句
    'no-multiple-empty-lines': [2, {
      'max': 2,
      "maxEOF": 2,
      "maxBOF": 2,
    }], // 禁止出现多行空行（此处设置最多出现连续2个空行）
    'no-multi-spaces': 2, // 禁止使用多个空格
    'no-mixed-spaces-and-tabs': 2, // 禁止空格和 tab 的混合缩进
    'no-lone-blocks': 2, // 禁用不必要的嵌套块
    'no-irregular-whitespace': 2, // 禁止在字符串和注释之外不规则的空白
    'no-func-assign': 2, // 禁止对 function 声明重新赋值
    'no-extra-parens': [2, 'functions'], // 禁止不必要的括号
    'no-extra-boolean-cast': 2, // 禁止不必要的布尔转换
    'no-ex-assign': 2, // 禁止对 catch 子句的参数重新赋值
    'no-empty-character-class': 2, // 禁止在正则表达式中使用空字符集
    'no-dupe-class-members': 2, // 禁止类成员中出现重复的名称
    'no-delete-var': 2, // 禁止删除变量
    'no-const-assign': 2, // 禁止修改 const 声明的变量
    'new-cap': [2, {
      'newIsCap': true,
      'capIsNew': false
    }], // 要求构造函数首字母大写
    'keyword-spacing': [2, {
      'before': true,
      'after': true
    }], // 强制在关键字前后使用一致的空格
    'key-spacing': [2, {
      'beforeColon': false,
      'afterColon': true
    }], // 强制在对象字面量的属性中键和值之间使用一致的间距
    'dot-location': [2, 'property'], // 强制在点号之前和之后一致的换行
    'curly': [2, 'multi-line'], // 强制所有控制语句使用一致的括号风格
    'comma-style': [2, 'last'], // 强制使用一致的逗号风格
    'comma-spacing': [2, {
      'before': false,
      'after': true
    }], // 强制在逗号前后使用一致的空格
    'camelcase': [0, {
      'properties': 'always'
    }], // 强制使用骆驼拼写法命名约定
    'brace-style': [2, '1tbs', {
      'allowSingleLine': true
    }], // 强制在代码块中使用一致的大括号风格
    'arrow-spacing': [2, {
      'before': true,
      'after': true
    }], // 强制箭头函数的箭头前后使用一致的空格
    'accessor-pairs': 2, // 强制 getter 和 setter 在对象中成对出现
    'eqeqeq': [2, 'allow-null'], // 要求使用 === 和 !==
      'generator-star-spacing': [2, {
        'before': true,
        'after': true
    }], // 强制 generator 函数中 * 号周围使用一致的空格
    'constructor-super': 2, // 要求在构造函数中有 super() 的调用
    'no-extra-bind': 2, // 禁止不必要的 .bind() 调用
    'no-floating-decimal': 2, // 禁止数字字面量中使用前导和末尾小数点
    'no-redeclare': 2, // 禁止多次声明同一变量
    'no-unneeded-ternary': [0, {
      'defaultAssignment': false
    }], // 禁止可以在有更简单的可替代的表达式时使用三元操作符
    'no-unreachable': 2, // 禁止在return、throw、continue 和 break 语句之后出现不可达代码
    'no-useless-call': 2, // 禁止不必要的 .call() 和 .apply()
    'valid-typeof': 2, // 强制 typeof 表达式与有效的字符串进行比较
    'prefer-const': 0, // 要求使用 const 声明那些声明后不再被修改的变量
  }
}

保存自动格式化

下载Eslint插件（在VsCode中）

打开设置

编辑setting.json

{
  "workbench.colorTheme": "Default Light+"  
  "workbench.activityBar.visible": true,
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "window.zoomLevel": 0,
  // 代码字体大小
  "editor.fontSize": 22,
  //-----------------------------新增加的配置---------------------------------
  // 关闭VSCode在Save时候自动格式化，因为VSCode自带的格式化和ESlint规范并不兼容
  "editor.formatOnSave": false,
  // 代码保存时，自动执行ESlint格式化代码
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
  // 配置 ESLint 检查的文件类型
  "eslint.validate": [
    "javascript",
    "vue",
    "html"
  ]
}