vscode在vue3项目中配置ESLint

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-