eslint-config-airbnb-vue3-ts

结合了 airbnb 和 prettier 风格规范的 eslint 配置，适用于 vue3、js、ts 项目。

使用

npm i -D eslint-config-airbnb-vue3-ts

配置 .eslintrc.js 文件：

1module.exports = {
2  root: true,
3  env: {
4    browser: true,
5    node: true,
6    es6: true,
7  },
8  extends: ['eslint-config-airbnb-vue3-ts'],
9  rules: {
10    // nestjs 请关闭以下规则，避免造成程序报错
11    // '@typescript-eslint/consistent-type-imports': 'off',
12    // 'no-empty-function': 'off',
13    // 'no-useless-constructor': 'off',
14    // 'max-classes-per-file': 'off',
15  },
16}

配置 .prettierrc.json 文件：

1{
2  "$schema": "https://json.schemastore.org/prettierrc",
3  "singleQuote": true,
4  "semi": false,
5  "printWidth": 120,
6  "tabWidth": 2,
7  "useTabs": false,
8  "jsxSingleQuote": false,
9  "bracketSameLine": false,
10  "jsxBracketSameLine": false,
11  "trailingComma": "all"
12}

配置 .vscode/settings.json 文件，当保存代码时使用 prettier 格式化代码：

1{
2  "editor.codeActionsOnSave": {
3    "source.fixAll": "explicit"
4  },
5  "editor.formatOnSave": true,
6  "editor.defaultFormatter": "esbenp.prettier-vscode"
7}

配置 .vscode/extensions.json 文件：

1{
2  "recommendations": ["Vue.volar", "dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
3}

这个 eslint 插件将代码格式化的规则都禁用掉了，因为项目代码特别多的时候，eslint 格式化会很慢，经常需要等待。

所以在 eslint 只保留了代码错误的检查，代码格式化的工作需要使用 vsocde + prettier 插件来完成。但是这只会在保存代码的时候格式化代码，不会在提交代码的时候格式化代码。

所以需要配置 ci/cd 工具来在提交代码的时候格式化代码，例如可以使用 lint-staged + husky 来实现。

PS：这里提供了一个 DEMO 以供参考，如果你觉得配置不生效或者出错了，可以参考这个示例。