在vue3项目中配置eslint

Posted 2021-09-08 hello，是翠花呀

eslint 相关配置

创建好 vue3 项目后，安装npm install --save-dev eslint eslint-plugin-vue ，执行命令初始化 eslint 配置：

eslint --init

接下来看命令行执行，根据自己习惯选择相应配置选项。

执行完成后目录下会新增.eslintrc.js文件，同时新安装了几个插件，在package.json中可以看到。

这时候可以开始配置 eslint 具体项了。

比如我们不选用刚刚 init 时选择的规范包，那么可以修改 extends 为extends: ['plugin:vue/vue3-recommended']，然后开始配置 rules 规则。具体需要什么规则网上都有。

因为我们用的eslint-plugin-vue，对于 vue 文件 html 部分的校验可以在eslint-plugin-vue文档里寻找相应配置。

比如 vue 文件每行最大属性数：

'vue/max-attributes-per-line': [
  'error',
  {
    singleline: {
      max: 3,
      allowFirstLine: true
    },
    multiline: {
      max: 1,
      allowFirstLine: false
    }
  }
]

比如什么情况下标签自关闭:

'vue/html-self-closing': [
      // 标签是否自关闭
      'error',
      {
        html: {
          void: 'always',
          normal: 'never'
          // 'component': 'always' // 不需要设置则注释
        },
        svg: 'always',
        math: 'always'
      }
    ]

建议每配完一种规则就看一下是否生效，如果配置错误会影响到其他规则的生效。
稍微完整的例子：

module.exports = {
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020,
    sourceType: 'module',
    ecmaFeatures: {
      ts: true
    }
  },
  extends: [
    'plugin:vue/vue3-recommended'
  ],
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-unused-vars': ['error', { vars: 'all', args: 'after-used' }],
    'operator-linebreak': ['error', 'after'],
    'no-var': 'error',
    'array-bracket-spacing': ['error', 'never'],
    camelcase: 'error',
    quotes: ['error', 'single'],
    'no-multiple-empty-lines': ['error', { max: 2 }],
    'no-trailing-spaces': 'error',
    indent: ['error', 2],
    'arrow-parens': ['error', 'as-needed'],
    'vue/max-attributes-per-line': [
      'error',
      {
        singleline: {
          max: 3,
          allowFirstLine: true
        },
        multiline: {
          max: 1,
          allowFirstLine: false
        }
      }
    ],
    'vue/html-self-closing': [
      'error',
      {
        html: {
          void: 'always',
          normal: 'never',
          component: 'any'
        },
        svg: 'always',
        math: 'always'
      }
    ],
    'vue/attributes-order': [
      'error',
      {
        order: [
          'DEFINITION',
          'LIST_RENDERING',
          'CONDITIONALS',
          'RENDER_MODIFIERS',
          'GLOBAL',
          ['UNIQUE', 'SLOT'],
          'TWO_WAY_BINDING',
          'OTHER_DIRECTIVES',
          'OTHER_ATTR',
          'EVENTS',
          'CONTENT'
        ],
        alphabetical: false
      }
    ],
    'vue/html-closing-bracket-newline': [
      'error',
      {
        singleline: 'never',
        multiline: 'always'
      }
    ],
    'vue/singleline-html-element-content-newline': [
      'error',
      {
        ignoreWhenNoAttributes: true,
        ignoreWhenEmpty: true,
        ignores: ['pre', 'textarea', ...INLINE_ELEMENTS]
      }
    ],
    'vue/attribute-hyphenation': [
      'error',
      'always' | 'never',
      {
        ignore: []
      }
    ]
  }
}

配置prettierrc

vscode安装prettierrc插件。

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "arrowParens": "avoid",
  "eslintIntegration": true,
  "htmlWhitespaceSensitivity": "ignore"
}

配置相对较少，不过option+shift+f或者设置保存自动格式化的时候会比较方便。

htmlWhitespaceSensitivity的配置可以解决格式化的时候结尾>不对齐的情况。