使用 eslint flat 配置在 Vue 中与 TypeScript 搭配使用有哪些常见的配置和问题？

2024-05-29 22:10:08

使用 eslint flat 配置在 Vue 中与 TypeScript 配合使用

问题陈述

升级项目到 eslint 9 时，需要将 flat 配置与 Vue 3、TypeScript 和 prettier 结合使用。

解决方案

1. 设置忽略文件和 glob 模式

ignores: ["dist/**", "node_modules/** ", "**/cypress/** ", "html/", "coverage/"],
files: ["**/*.vue", "** /*.js", "**/*.ts", "** /*.jsx", "**/*.tsx"],

2. 配置 TypeScript ESLint

{
  plugins: {
    "@typescript-eslint": tseslint.plugin,
  },
  languageOptions: {
    parser: tseslint.parser,
    parserOptions: {
      project: true,
    },
  },
}

3. 添加 Vue ESLint 插件

...pluginVue.configs["flat/recommended"],
...pluginVue.configs["flat/strongly-recommended"],
...pluginVue.configs["flat/essential"],

4. 自定义规则

{
  rules: {
    "vue/match-component-import-name": "warn",
    "vue/match-component-file-name": [
      "error",
      {
        extensions: ["vue"],
        shouldMatchCase: true,
      },
    ],
    "vue/component-definition-name-casing": ["error", "PascalCase"],
    "vue/block-tag-newline": [
      "warn",
      {
        singleline: "always",
        multiline: "always",
        maxEmptyLines: 0,
      },
    ],
    "vue/html-self-closing": [
      "error",
      {
        html: {
          void: "always",
          normal: "never",
          component: "always",
        },
        svg: "always",
        math: "always",
      },
    ],
    "vue/require-default-prop": "off",
  },
}

5. 添加 prettier 集成

eslintConfigPrettier

常见问题解答

1. 如何排除特定目录？

ignores: ["dist/**", "node_modules/** ", "**/cypress/** ", "html/", "coverage/"],

2. 如何配置 TypeScript 解析器？

languageOptions: {
    parser: tseslint.parser,
    parserOptions: {
      project: true,
    },
  },

3. 如何启用 Vue flat 配置集？

...pluginVue.configs["flat/recommended"],
...pluginVue.configs["flat/strongly-recommended"],
...pluginVue.configs["flat/essential"],

4. 如何自定义 Vue 规则？

{
  rules: {
    "vue/match-component-import-name": "warn",
    "vue/match-component-file-name": [
      "error",
      {
        extensions: ["vue"],
        shouldMatchCase: true,
      },
    ],
    "vue/component-definition-name-casing": ["error", "PascalCase"],
    "vue/block-tag-newline": [
      "warn",
      {
        singleline: "always",
        multiline: "always",
        maxEmptyLines: 0,
      },
    ],
    "vue/html-self-closing": [
      "error",
      {
        html: {
          void: "always",
          normal: "never",
          component: "always",
        },
        svg: "always",
        math: "always",
      },
    ],
    "vue/require-default-prop": "off",
  },
}