ESLint 配置错误：ReferenceError: prettier is not defined 解决方案

问题描述

在使用 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",},
};