tip：js项目，ts项目见最后。

首先vscode先安装插件 ESLint

其次在vue项目中，安装包

npm install eslint@7.19.0 babel-eslint@10.1.0 eslint-plugin-vue@8.5.0 eslint-plugin-html@6.2.0  -D

在项目根目录下，新建 .eslintrc.cjs。

- 如果文件名是.eslintrc.js，记得package.json中的type不能为 module，要么删掉，要么改成commonjs

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true,
    'vue/setup-compiler-macros': true
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    /* 强制每行的最大属性 */
    'vue/max-attributes-per-line': [2, {
      /* 当开始标签位于单行时，每行的最大属性数 */
      'singleline': 10,
      /* 当开始标签位于多行时，每行的最大属性数 */
      'multiline': {
        'max': 1
      }
    }],
    /* 在单行元素的内容之前和之后需要换行符 */
    'vue/singleline-html-element-content-newline': 'off',
    /* 在单行元素的内容之前和之后需要换行符 */
    'vue/multiline-html-element-content-newline': 'off',
    /* 组件名称驼峰 */
    'vue/component-definition-name-casing': ['error', 'PascalCase'],
    /* 禁止使用 v-html  */
    'vue/no-v-html': 'off',
    /* 格式化箭头函数的箭头前后空格 */
    'arrow-spacing': [2, {
      'before': true,
      'after': true
    }],
    /* 强制缩进 */
    'block-spacing': [2, 'always'],
    /* 强制执行一个真正的大括号风格 */
    'brace-style': [2, '1tbs', {
      /* 允许一个块打开和关闭括号在同一行上 */
      'allowSingleLine': true
    }],
    /* 为属性名称强制执行 camelcase 样式 */
    'camelcase': [0, {
      'properties': 'always'
    }],
    /* 不允许对象和数组尾随逗号 */
    'comma-dangle': [2, 'never'],
    /* 对象逗号前后允许空格 */
    'comma-spacing': [2, {
      'before': false,
      'after': true
    }],
    /* 在数组元素、对象属性或变量声明之后和同一行上需要逗号 */
    'comma-style': [2, 'last'],
    /* 检查是否存在有效的super()调用 */
    'constructor-super': 2,
    /* 以允许支柱少单行if，else if，else，for，while，或do，同时还规定使用其他实例花括号 */
    'curly': [2, 'multi-line'],
    /* 成员表达式中的点应与属性部分位于同一行 */
    'dot-location': [2, 'property'],
    /* 在非空文件的末尾至少执行一个换行符 */
    'eol-last': 2,
    /* 强制使用===和!== */
    'eqeqeq': ['error', 'always'],
    /* 强化*发生器功能的间距 */
    'generator-star-spacing': [2, {
      'before': true,
      'after': true
    }],
    /* 使用回调模式时会处理这个错误 */
    'handle-callback-err': [2, '^(err|error)$'],
    /* 强制执行一致的缩进样式 */
    'indent': [2, 2, {
      /* 强制缩进级别case的条款switch声明 */
      'SwitchCase': 1
    }],
    /* 一致使用单引号 */
    'jsx-quotes': [2, 'prefer-single'],
    /* 强制在对象字面量属性中的键和值之间保持一致的间距 */
    'key-spacing': [2, {
      /* 不允许在对象文字中的键和冒号之间使用空格 */
      'beforeColon': false,
      /* 需要在冒号和对象文字中的值之间至少有一个空格 */
      'afterColon': true
    }],
    /* 强制执行围绕关键字和关键字标记的一致空格 */
    'keyword-spacing': [2, {
      'before': true,
      'after': true
    }],
    /* 要求构造函数名以大写字母开头 */
    'new-cap': [2, {
      /* 要求new使用大写启动函数调用所有操作符 */
      'newIsCap': true,
      /* 允许在没有new操作符的情况下调用大写启动的函数 */
      'capIsNew': false
    }],
    /* 在使用new关键字调用不带参数的构造函数时需要括号，以便提高代码清晰度 */
    'new-parens': 2,
    /* 不允许使用Array构造函数 */
    'no-array-constructor': 2,
    /* 阻止使用已弃用和次优代码 */
    'no-caller': 2,
    /* 禁止调用console对象的方法 */
    'no-console': 'off',
    /* 标记修改类声明的变量 */
    'no-class-assign': 2,
    /* 不允许在试验条件不明确赋值运算符if，for，while，和do...while语句 */
    'no-cond-assign': 2,
    /* 标记修改使用const关键字声明的变量 */
    'no-const-assign': 2,
    /* 不允许正则表达式中的控制字符 */
    'no-control-regex': 0,
    /* 不允许在变量上使用delete操作符 */
    'no-delete-var': 2,
    /* 不允许在函数声明或表达式中使用重复的参数名称 */
    'no-dupe-args': 2,
    /* 标记在级别成员中使用重复名称 */
    'no-dupe-class-members': 2,
    /* 不允许在对象文字中使用重复键 */
    'no-dupe-keys': 2,
    /* 不允许在switch语句的case子句中使用重复的测试表达式 */
    'no-duplicate-case': 2,
    /* 不允许在正则表达式中使用空字符类 */
    'no-empty-character-class': 2,
    /* 不允许空的解构模式 */
    'no-empty-pattern': 2,
    /* 禁止使用eval()函数来防止潜在的危险 */
    'no-eval': 2,
    /* 禁止对 catch 子句中的异常重新赋值 */
    'no-ex-assign': 2,
    /* 不允许直接修改内建对象的原型 */
    'no-extend-native': 2,
    /* 避免不必要的使用 */
    'no-extra-bind': 2,
    /* 禁止不必要的布尔转换 */
    'no-extra-boolean-cast': 2,
    /* 仅在函数表达式附近禁止不必要的括号 */
    'no-extra-parens': [2, 'functions'],
    /* 消除一个案件无意中掉到另一个案件 */
    'no-fallthrough': 2,
    /* 消除浮点小数点，并在数值有小数点但在其之前或之后缺少数字时发出警告 */
    'no-floating-decimal': 2,
    /* 不允许重新分配function声明 */
    'no-func-assign': 2,
    /* 消除隐含eval()通过使用setTimeout()，setInterval()或execScript() */
    'no-implied-eval': 2,
    /* 不允许function嵌套块中的声明 */
    'no-inner-declarations': [2, 'functions'],
    /* 不允许RegExp构造函数中的无效正则表达式字符串 */
    'no-invalid-regexp': 2,
    /* 捕获不是正常制表符和空格的无效空格 */
    'no-irregular-whitespace': 2,
    /* 防止因使用 __iterator__属性而出现的错误 */
    'no-iterator': 2,
    /* 禁用与变量同名的标签  */
    'no-label-var': 2,
    /* 禁用标签语句 */
    'no-labels': [2, {
      'allowLoop': false,
      'allowSwitch': false
    }],
    /* 禁用不必要的嵌套块 */
    'no-lone-blocks': 2,
    /* 禁止混用tab和space */
    'no-mixed-spaces-and-tabs': 2,
    /* 禁止出现多个空格  */
    'no-multi-spaces': 2,
    /* 禁止多行字符串 */
    'no-multi-str': 2,
    /* 强制最大连续空行数1 */
    'no-multiple-empty-lines': [2, {
      'max': 1
    }],
    /* 不允许修改只读全局变量 */
    'no-global-assign': 2,
    /* 不允许使用Object构造函数 */
    'no-new-object': 2,
    /* 消除new require表达的使用 */
    'no-new-require': 2,
    /* 防止Symbol与new操作员的意外呼叫 */
    'no-new-symbol': 2,
    /* 杜绝使用String，Number以及Boolean与new操作 */
    'no-new-wrappers': 2,
    /* 不允许调用Math，JSON和Reflect对象作为功能 */
    'no-obj-calls': 2,
    /* 不允许使用八进制文字 */
    'no-octal': 2,
    /* 不允许字符串文字中的八进制转义序列 */
    'no-octal-escape': 2,
    /* 防止 Node.js 中的目录路径字符串连接 */
    'no-path-concat': 2,
    /* 当一个对象被__proto__创建时被设置为该对象的构造函数的原始原型属性。getPrototypeOf是获得“原型”的首选方法 */
    'no-proto': 2,
    /* 消除在同一范围内具有多个声明的变量 */
    'no-redeclare': 2,
    /* 在正则表达式文字中不允许有多个空格 */
    'no-regex-spaces': 2,
    /* return陈述中的任务，除非用圆括号括起来，否则不允许赋值 */
    'no-return-assign': [2, 'except-parens'],
    /* 消除自我分配 */
    'no-self-assign': 2,
    /* 禁止自身比较 */
    'no-self-compare': 2,
    /* 不允许使用逗号操作符 */
    'no-sequences': 2,
    /* 关键字不能被遮蔽 */
    'no-shadow-restricted-names': 2,
    /* 不允许功能标识符与其应用程序之间的间距 */
    'no-spaced-func': 2,
    /* 禁用稀疏数组 */
    'no-sparse-arrays': 2,
    /* 在构造函数中禁止在调用super()之前使用this或super。 */
    'no-this-before-super': 2,
    /* 限制可以被抛出的异常 */
    'no-throw-literal': 2,
    /* 禁用行尾空白 */
    'no-trailing-spaces': 2,
    /* 禁用未声明的变量 */
    'no-undef': 2,
    /* 禁用未声明的变量 */
    'no-undef-init': 2,
    /* 禁止使用令人困惑的多行表达式 */
    'no-unexpected-multiline': 2,
    /* 禁用一成不变的循环条件 */
    'no-unmodified-loop-condition': 2,
    /* 禁止可以表达为更简单结构的三元操作符 */
    'no-unneeded-ternary': [2, {
      /* 禁止条件表达式作为默认的赋值模式 */
      'defaultAssignment': false
    }],
    /* 禁止在 return、throw、continue 和 break 语句后出现不可达代码 */
    'no-unreachable': 2,
    /* 禁止在 finally 语句块中出现控制流语句 */
    'no-unsafe-finally': 2,
    /* 禁止未使用过的变量  */
    'no-unused-vars': [2, {
      'vars': 'all',
      'args': 'none'
    }],
    /* 禁用不必要的 .call() 和 .apply() */
    'no-useless-call': 2,
    /* 禁止在对象中使用不必要的计算属性 */
    'no-useless-computed-key': 2,
    /* 禁用不必要的构造函数 */
    'no-useless-constructor': 2,
    /* 在不改变代码行为的情况下可以安全移除的转义 */
    'no-useless-escape': 0,
    /* 禁止属性前有空白 */
    'no-whitespace-before-property': 2,
    /* 禁用 with 语句 */
    'no-with': 2,
    /* 强制函数中的变量在一起声明或分开声明 */
    'one-var': [2, {
      /* 要求每个作用域的初始化的变量有多个变量声明 */
      'initialized': 'never'
    }],
    /* 强制操作符使用一致的换行符风格 */
    'operator-linebreak': [2, 'after', {
      /* 覆盖对指定的操作的全局设置 */
      'overrides': {
        '?': 'before',
        ':': 'before'
      }
    }],
    /* 要求或禁止块内填充  */
    'padded-blocks': [2, 'never'],
    /* 强制使用一致的反勾号、双引号或单引号 */
    'quotes': [2, 'single', {
      /* 允许字符串使用单引号或双引号，只要字符串中包含了一个其它引号，否则需要转义 */
      'avoidEscape': true,
      /* 允许字符串使用反勾号 */
      'allowTemplateLiterals': true
    }],
    /* 要求或禁止使用分号代替 ASI  */
    'semi': [2, 'never'],
    /* 强制分号前后有空格 */
    'semi-spacing': [2, {
      'before': false,
      'after': true
    }],
    /* 要求或禁止语句块之前的空格 */
    'space-before-blocks': [2, 'always'],
    /* 要求或禁止函数圆括号之前有一个空格 */
    'space-before-function-paren': [2, 'never'],
    /* 禁止或强制圆括号内的空格 */
    'space-in-parens': [2, 'never'],
    /* 要求中缀操作符周围有空格 */
    'space-infix-ops': 2,
    /* 要求或禁止在一元操作符之前或之后存在空格 */
    'space-unary-ops': [2, {
      /* 适用于单词类一元操作符，例如：new、delete、typeof、void、yield */
      'words': true,
      /* 适用于这些一元操作符: -、+、--、++、!、!! */
      'nonwords': false
    }],
    /* 要求或禁止在注释前有空白  */
    'spaced-comment': [2, 'always', {
      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
    }],
    /* 强制模板字符串中空格的使用 禁止花括号内出现空格 */
    'template-curly-spacing': [2, 'never'],
    /* 要求调用 isNaN()检查 NaN */
    'use-isnan': 2,
    /* 强制 typeof 表达式与有效的字符串进行比较 */
    'valid-typeof': 2,
    /* 需要把立即执行的函数包裹起来 */
    'wrap-iife': [2, 'any'],
    /* 强制在 yield* 表达式中 * 周围使用空格 */
    'yield-star-spacing': [2, 'both'],
    /* 要求或者禁止Yoda条件 */
    'yoda': [2, 'never'],
    /* 建议使用const */
    'prefer-const': 2,
    /* 禁用 debugger */
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    /* 强制在花括号中使用一致的空格 */
    'object-curly-spacing': [2, 'always', {
      /* 禁止以对象元素开始或结尾的对象的花括号中有空格  */
      objectsInObjects: false
    }],
    /* 禁止或强制在括号内使用空格 */
    'array-bracket-spacing': [2, 'never']
  }
}

最后重启下vscode即可。

ts项目，在上面的js基础上

npm isntall @typescript-eslint/eslint-plugin@5.54.1 @typescript-eslint/parser@5.54.1 -D

在.eslintrc.cjs添加

  extends: [
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    'ecmaVersion': 'latest',
    'parser': '@typescript-eslint/parser',
    'sourceType': 'module'
  },
  plugins: [
    'vue',
    '@typescript-eslint'
  ],
  rules: {}

再重启下。