ESLint负责代码质量与错误检查，Prettier负责统一格式化；需通过eslint-config-prettier关闭冲突规则、eslint-plugin-prettier桥接二者，并确保prettier在extends末尾、保存时自动修复生效。
在 Vite 项目中集成 ESLint 和 Prettier，核心是让两者协同工作：ESLint 负责代码质量与潜在错误检查，Prettier 负责统一格式化（缩进、引号、换行等），避免规则冲突。关键在于正确安装依赖、配置文件顺序、以及确保开发时自动校验。
安装必要依赖
执行以下命令一次性安装所需工具（以 Vue 项目为例，React 或纯 JS 项目只需调整插件）：
npm install -D eslint @eslint/js eslint-plugin-vue @vue/eslint-config-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser prettier eslint-config-prettier eslint-plugin-prettier
说明：
- @eslint/js 提供 ESLint 官方推荐的 JavaScript 基础规则
-
@vue/eslint-config-typescript 是 Vue + TS 项目的官方 ESLint 配置（若用 JS 可换为
@vue/eslint-config-airbnb或@vue/eslint-config-standard） - eslint-config-prettier 用于关闭所有与 Prettier 冲突的 ESLint 格式类规则
-
eslint-plugin-prettier 将 Prettier 作为 ESLint 的一个插件运行，使
eslint --fix同时支持 Prettier 自动修复
配置 ESLint（.eslintrc.cjs）
根目录下创建 .eslintrc.cjs，内容如下（适配 Vue + TS）：
立即学习“Java免费学习笔记（深入）”；
module.exports = {
root: true,
extends: [
'@eslint/js',
'plugin:vue/vue3-essential',
'@vue/eslint-config-typescript',
'prettier', // 放最后，确保覆盖前面的格式规则
],
plugins: ['vue', '@typescript-eslint', 'prettier'],
rules: {
'prettier/prettier': 'error', // 把 Prettier 错误当作 ESLint 错误提示
},
overrides: [
{
files: ['**/*.ts', '**/*.tsx'],
parserOptions: { project: ['./tsconfig.json'] },
},
],
}
注意：prettier 必须放在 extends 数组末尾，否则会被前面的配置覆盖；prettier/prettier 规则开启后，ESLint 就能报告 Prettier 不符合项（如多余空格、单引号变双引号等）。
配置 Prettier（.prettierrc）
根目录新建 .prettierrc，定义格式偏好（推荐精简实用）：
{
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"printWidth": 100,
"endOfLine": "lf"
}
搭配 eslint-config-prettier 后，这些设置会完全生效，且不会被 ESLint 格式规则干扰。
启用保存时自动修复（VS Code）
在项目根目录创建 .vscode/settings.json（不提交到 Git 可加到 .gitignore）：
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": false,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
这样 VS Code 保存文件时会触发 ESLint 的自动修复（含 Prettier），无需手动运行命令。确保已安装插件 Prettier 和 ESLint。
添加脚本并验证
在 package.json 中加入常用脚本：
"scripts": {
"lint": "eslint --ext .js,.ts,.vue src/",
"lint:fix": "eslint --ext .js,.ts,.vue src/ --fix",
"format": "prettier --write \"src/**/*.{js,ts,vue}\""
}
运行 npm run lint 查看问题，npm run lint:fix 一键修复。若想统一用 Prettier 格式化非 JS/TS/Vue 文件（如 JSON、MD），可扩展 format 脚本 glob 模式。
不复杂但容易忽略的是：Prettier 和 ESLint 的职责要分清——Prettier 只管“怎么写好看”，ESLint 管“怎么写正确”；二者共存必须靠 eslint-config-prettier 和 eslint-plugin-prettier 桥接，否则会反复打架。
