eslint配置案例

案例一

// @ts-check
const { defineConfig } = require("eslint-define-config")

module.exports = defineConfig({
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true,
    "vue/setup-compiler-macros": true,
  },
  parser: "vue-eslint-parser",
  plugins: ["simple-import-sort"],
  parserOptions: {
    parser: "@typescript-eslint/parser",
    ecmaVersion: 2020,
    sourceType: "module",
    jsxPragma: "React",
    ecmaFeatures: {
      jsx: true,
    },
  },
  extends: [
    "plugin:vue/vue3-recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "plugin:prettier/recommended",
  ],
  rules: {
    "vue/script-setup-uses-vars": "error",
    "vue/multi-word-component-names": "off",
    "vue/comment-directive": "off",
    "@typescript-eslint/ban-ts-ignore": "off",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/no-var-requires": "off",
    "@typescript-eslint/no-empty-function": "off",
    "vue/custom-event-name-casing": "off",
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": "off",
    "@typescript-eslint/ban-ts-comment": "off",
    "@typescript-eslint/ban-types": "off",
    "@typescript-eslint/no-non-null-assertion": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-unused-vars": ["error", { varsIgnorePattern: ".*", args: "none" }],
    "no-unused-vars": [
      "error",
      // we are only using this rule to check for unused arguments since TS
      // catches unused variables but not args.
      { varsIgnorePattern: ".*", args: "none" },
    ],
    "space-before-function-paren": "off",

    "vue/attributes-order": [
      2,
      {
        order: [
          "LIST_RENDERING",
          "CONDITIONALS",
          "RENDER_MODIFIERS",
          "GLOBAL",
          "UNIQUE",
          "TWO_WAY_BINDING",
          "OTHER_ATTR",
          "EVENTS",
          "CONTENT",
          "DEFINITION",
        ],
      },
    ],
    "vue/one-component-per-file": "off",
    "vue/html-closing-bracket-newline": "off",
    "vue/max-attributes-per-line": "off",
    "vue/multiline-html-element-content-newline": "off",
    "vue/singleline-html-element-content-newline": "off",
    "vue/attribute-hyphenation": "off",
    "vue/require-default-prop": "off",
    "vue/html-self-closing": [
      "error",
      {
        html: {
          void: "always",
          normal: "never",
          component: "always",
        },
        svg: "always",
        math: "always",
      },
    ],
    "simple-import-sort/imports": [
      "error",
      {
        groups: [["^vue", "^@?\\w"], ["^"], ["^\\."], ["^/#"]],
      },
    ],
    "simple-import-sort/exports": "error",
    "@typescript-eslint/no-this-alias": "off",
  },
})

这个代码是一个用于配置 ESLint 的文件，使用了 eslint-define-config 以及多个 ESLint 插件和规则集来检查和格式化 TypeScript 和 Vue 3 代码中的代码风格。该配置文件主要目的是保证代码一致性、提高可读性，并自动排序导入（import）语句等。

主要内容解析

1. 根级别配置 (root: true)

通过设置 root: true，确保当前目录为 ESLint 的根目录，防止 ESLint 查找更高层的配置文件。

2. 环境设置 (env)

配置了代码运行环境，包括浏览器、Node.js 和 ES6 环境，还启用了 Vue 3 的 setup-compiler-macros 语法支持。

env: {
   browser: true,
   node: true,
   es6: true,
   'vue/setup-compiler-macros': true,
}

3. 解析器 (parser)

使用 vue-eslint-parser 作为解析器来支持 Vue 文件，同时指定 @typescript-eslint/parser 作为内嵌 TypeScript 解析器：

parser: 'vue-eslint-parser',
parserOptions: {
   parser: '@typescript-eslint/parser',
   ecmaVersion: 2020,
   sourceType: 'module',
   jsxPragma: 'React',
   ecmaFeatures: {
      jsx: true,
   },
}

这部分配置用于解析现代 JavaScript 和 TypeScript 语法，包括 JSX 支持。

4. 扩展 (extends)

使用了多个 ESLint 扩展规则集，这些扩展预设了很多常用的代码检查规则：

• plugin:vue/vue3-recommended：推荐的 Vue 3 风格规则。
• plugin:@typescript-eslint/recommended：TypeScript 推荐的规则。
• prettier 和 plugin:prettier/recommended：禁用与 Prettier 冲突的 ESLint 规则，并确保 Prettier 格式化规则优先。

extends: [
   'plugin:vue/vue3-recommended',
   'plugin:@typescript-eslint/recommended',
   'prettier',
   'plugin:prettier/recommended',
]

5. 规则 (rules)

定义了具体的 ESLint 规则来微调代码检查和格式化的行为。部分规则关闭了严格检查，减少了对代码的一些干扰：

• Vue 相关规则：

  • vue/script-setup-uses-vars: 避免 setup 中的变量被错误地标记为未使用。
  • vue/multi-word-component-names: 允许单词组件名称，不强制多单词组件名称。
  • vue/html-self-closing: 强制 HTML 标签的自闭合（例如 <br />）。

• TypeScript 相关规则：

  • @typescript-eslint/no-explicit-any: 允许使用 any 类型。
  • @typescript-eslint/no-unused-vars: 处理未使用的变量警告，忽略参数。

• 导入排序规则（simple-import-sort 插件）：

  • 通过 simple-import-sort 插件，自动排序 import 和 export 语句，按模块类别和路径进行分组：

    'simple-import-sort/imports': [
      'error',
      {
        groups: [['^vue', '^@?\\w'], ['^'], ['^\\.'], ['^/#']],
      },
    ],
    'simple-import-sort/exports': 'error',

• Prettier 相关规则：禁用了 space-before-function-paren 等规则以避免和 Prettier 冲突。

6. 所用到的包

• **eslint-define-config**：简化 ESLint 配置定义。
• **vue-eslint-parser**：解析 .vue 文件的 ESLint 解析器。
• **@typescript-eslint/parser**：TypeScript 代码的 ESLint 解析器。
• **@typescript-eslint/eslint-plugin**：提供 TypeScript 相关的 ESLint 规则。
• **eslint-plugin-vue**：针对 Vue.js 的 ESLint 插件，提供 Vue 特有的规则。
• **eslint-plugin-simple-import-sort**：用于对 import 和 export 语句进行排序。
• **prettier**：用于代码格式化，确保代码风格一致。
• **eslint-plugin-prettier**：将 Prettier 与 ESLint 集成，在 ESLint 规则中运行 Prettier。
• **eslint-config-prettier**：禁用可能与 Prettier 冲突的 ESLint 规则。

总结

这个配置文件结合了 TypeScript、Vue 3 和 Prettier 的规则，使用 simple-import-sort 来自动化 import 排序，并对 Vue 和 TypeScript 做了一些特定规则的调整。这种配置确保代码风格一致、可读性高，适用于 Vue 3 + TypeScript 项目。