问题描述

在使用 pnpm lint 运行 ESLint 时，出现以下错误：

Oops! Something went wrong! :(
ESLint: 9.31.0
ReferenceError: prettier is not defined

该错误导致 ESLint 无法正确执行代码格式检查，但 不会影响项目的实际运行（如 pnpm dev 或 pnpm build）。

错误原因

1. eslint-plugin-prettier 未正确导入

   • 在 eslint.config.js 中使用了 prettier/prettier 规则，但没有正确引入 eslint-plugin-prettier。

2. ESLint v9+ 的 Flat Config 格式兼容性问题

   • 旧版 ESLint 的配置方式（如 .eslintrc.js）与新版 eslint.config.js 不兼容。

解决方案

方法 1：修复 eslint.config.js（推荐）

1. 安装必要依赖

pnpm add -D eslint-plugin-prettier prettier

2. 修改 eslint.config.js

import { defineConfig } from "eslint/config";
import globals from "globals";
import js from "@eslint/js";
import pluginVue from "eslint-plugin-vue";
import prettierPlugin from "eslint-plugin-prettier"; // 正确导入 Prettier 插件

export default defineConfig([
  {
    files: ["**/*.{js,mjs,jsx,vue}"],
    ignores: ["**/dist/**", "**/dist-ssr/**", "**/coverage/**"],
  },
  {
    languageOptions: {
      globals: {
        ...globals.browser,
      },
    },
  },
  js.configs.recommended,
  ...pluginVue.configs["flat/essential"],
  {
    plugins: {
      prettier: prettierPlugin, // 注册 Prettier 插件
    },
    rules: {
      "prettier/prettier": [
        "warn",
        {
          singleQuote: true,
          semi: false,
          printWidth: 60,
          trailingComma: "none",
          endOfLine: "auto",
        },
      ],
      "vue/multi-word-component-names": [
        "warn",
        { ignores: ["index"] },
      ],
      "vue/no-setup-props-destructure": "off",
      "no-undef": "error",
    },
  },
]);

3. 重新运行 ESLint

pnpm lint

方法 2：降级 ESLint（兼容旧配置）

如果不想使用 ESLint v9+ 的 Flat Config，可以降级到 ESLint v8：

pnpm add eslint@8.56.0 -D

然后改用 .eslintrc.js 配置（旧版格式）：

module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:vue/essential",
    "plugin:prettier/recommended", // 使用 Prettier 推荐配置
  ],
  rules: {
    "prettier/prettier": [
      "warn",
      {
        singleQuote: true,
        semi: false,
        printWidth: 60,
        trailingComma: "none",
        endOfLine: "auto",
      },
    ],
    "vue/multi-word-component-names": [
      "warn",
      { ignores: ["index"] },
    ],
    "vue/no-setup-props-destructure": "off",
    "no-undef": "error",
  },
};