在 Vue 中将 ESLint 从 v8 升级到 v9

妖孽白YoonA
574 阅读3分钟

ESLint 近期发布了它的重大更新版本 v9。这个新版本带来了一些重大变化，可能会对你的项目产生影响。在这篇文章中，我们将了解如何在 Vue.js 项目中从 ESLint v8 升级到 v9。

ESLint v9 的新变化

ESLint v9 有几个重大变化：

  1. Node.js 的最低支持版本现在是 18.18.0
  2. 重大的配置文件变化
  3. 扁平化配置及其优先级
  4. 引入新的配置系统

ESLint v9 移除了对 CJS 配置的支持，现在必须使用 eslint.config.js 文件（而不是 .eslintrc.*）来配置 ESLint。这是完全不同的方法，新的配置文件导出一个配置对象数组，而不是导出单个配置对象。

ESLint v9 主要侧重于改进配置系统，这也是它的主要变化所在。现在，ESLint 规则只应用于你明确为之配置的文件。这给了你对要 lint 哪些文件以及应用哪些规则更多的控制权。

升级到 ESLint v9

升级 ESLint 到 v9 的第一步是：

bash
npm install eslint@^9.0.0 --save-dev

然后，你需要创建配置文件 eslint.config.js（不是 .eslintrc.js）：

js
export default [  {    files: ["**/*.js", "**/*.mjs", "**/*.cjs"],
    rules: {
      semi: "error",
    },
  },
];

现在，我们可以运行检查：

bash

npx eslint .

你会看到 ESLint 只检查我们在 files 中定义的那些文件。

Vue.js 中配置 ESLint v9

好的，现在我们知道了如何配置 ESLint v9，让我们看看如何在 Vue.js 项目中做同样的事情。

在 ESLint v8 中，Vue.js 项目通常使用以下插件和配置：

  • eslint-plugin-vue - 处理 .vue 文件
  • @vue/eslint-config-typescript - 处理 TypeScript
  • @vue/eslint-config-prettier - 集成 Prettier

这些插件仍然可以正常工作，但由于我们现在使用新的配置系统，我们需要以不同的方式导入它们。

ESLint 插件 Vue

首先，让我们安装 eslint-plugin-vue：

npm install eslint-plugin-vue@^9.2.0 --save-dev

然后，在我们的配置文件中，我们需要导入插件并使用它：

import eslint from "@eslint/js";
import pluginVue from "eslint-plugin-vue";

export default [
  eslint.configs.recommended, // ESLint 推荐规则
  ...pluginVue.configs["flat/recommended"], // Vue 推荐规则
  {
    files: ["**/*.js", "**/*.mjs", "**/*.cjs", "**/*.vue"],
    rules: {
      semi: "error",
    },
  },
];

请注意：新版的 eslint-plugin-vue 包含了特别为扁平配置设计的配置文件。我们通过 pluginVue.configs["flat/recommended"] 访问它们。

TypeScript 与 ESLint v9

要在 ESLint v9 中使用 TypeScript，你需要 @typescript-eslint/eslint-plugin 和 @typescript-eslint/parser。


npm install @typescript-eslint/eslint-plugin@^7.0.0 @typescript-eslint/parser@^7.0.0 --save-dev

然后，在你的配置文件中：

import eslint from "@eslint/js";
import pluginVue from "eslint-plugin-vue";
import typescriptParser from "@typescript-eslint/parser";
import typescriptPlugin from "@typescript-eslint/eslint-plugin";

export default [
  eslint.configs.recommended,
  ...pluginVue.configs["flat/recommended"],
  {
    files: ["**/*.ts", "**/*.tsx", "**/*.vue"],
    languageOptions: {
      parser: typescriptParser,
      parserOptions: {
        ecmaVersion: "latest",
        sourceType: "module",
      },
    },
    plugins: {
      "@typescript-eslint": typescriptPlugin,
    },
    rules: {
      ...typescriptPlugin.configs.recommended.rules,
    },
  },
  {
    files: ["**/*.js", "**/*.mjs", "**/*.cjs", "**/*.vue"],
    rules: {
      semi: "error",
    },
  },
];

在 ESLint v9 中，parser 和 plugins 是在 languageOptions 中定义的。parserOptions 也在 languageOptions 中定义。

集成 Prettier 与 ESLint v9

使用 ESLint v9 集成 Prettier 很简单，只需安装 eslint-config-prettier 和 eslint-plugin-prettier：

bash

npm install eslint-config-prettier@^9.1.0 eslint-plugin-prettier@^5.1.3 --save-dev

然后，在你的配置文件中：


import eslint from "@eslint/js";
import pluginVue from "eslint-plugin-vue";
import typescriptParser from "@typescript-eslint/parser";
import typescriptPlugin from "@typescript-eslint/eslint-plugin";
import prettierPlugin from "eslint-plugin-prettier";
import prettierConfig from "eslint-config-prettier";

export default [
  eslint.configs.recommended,
  ...pluginVue.configs["flat/recommended"],
  {
    files: ["**/*.ts", "**/*.tsx", "**/*.vue"],
    languageOptions: {
      parser: typescriptParser,
      parserOptions: {
        ecmaVersion: "latest",
        sourceType: "module",
      },
    },
    plugins: {
      "@typescript-eslint": typescriptPlugin,
    },
    rules: {
      ...typescriptPlugin.configs.recommended.rules,
    },
  },
  {
    files: ["**/*.js", "**/*.mjs", "**/*.cjs", "**/*.vue"],
    rules: {
      semi: "error",
    },
  },
  {
    files: ["**/*.js", "**/*.mjs", "**/*.cjs", "**/*.vue", "**/*.ts", "**/*.tsx"],
    plugins: {
      prettier: prettierPlugin,
    },
    rules: {
      ...prettierConfig.rules,
      "prettier/prettier": "error",
    },
  },
];

这样，Prettier 将仅在我们配置的那些文件上运行。

总结

使用 ESLint v9 的新配置系统，我们可以更精确地为每个文件类型定义规则。这使得配置变得更加直观和可预测。

以下是对我们需要做什么的总结：

  1. 使用 eslint.config.js 而不是 .eslintrc.*
  2. 定义我们想要检查的文件类型
  3. 使用正确的插件并进行相应的配置

通过遵循这些步骤，你可以成功将 ESLint 从 v8 升级到 v9，并在你的 Vue.js 项目中使用它。

原文链接：vueschool.io/articles/vu…

avatar
文章
阅读
粉丝