必须关闭vscode自带js/css格式化器以避免与prettier冲突；项目根目录配置.prettierrc优先于全局设置；eslint共存需安装eslint-config-prettier并置于extends末尾；vue/react文件须通过overrides指定parser并安装对应插件。
直接装插件就行，但必须关掉自带格式化
VSCode 自带的 JavaScript 和 CSS 格式化（vscode-eslint 或 typescript-language-features）会和 Prettier 冲突，导致保存时反复“打架”——比如缩进变两空格又弹回四空格，或者单引号被强制转双引号。装完 Prettier 插件后，第一件事不是写配置，而是关掉默认格式化器。
操作路径：设置 → Text Editor → Formatting → Format On Save 先确保开启；然后重点设：Default Formatter 改成 esbenp.prettier-vscode；最后检查 Format On Save Mode 设为 modifications（只格式化改过的行，更安全）。
项目级配置优先于全局配置
多人协作或跨项目时，靠 VSCode 全局设置（settings.json 里写 "prettier.singleQuote": true）容易失效或覆盖他人偏好。正确做法是：在项目根目录放一个 .prettierrc 文件，内容用 JSON 或 YAML 都行，例如：
{
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5"
}
VSCode 的 Prettier 插件会自动识别这个文件，比用户级 settings.json 优先级更高。注意：.prettierrc.js 也支持，但需确保 Node 环境可用，纯前端小项目不建议用 JS 版本，免得 CI 或队友本地跑不起来。
和 ESLint 共存必须用 eslint-config-prettier
如果项目已用 ESLint，Prettier 默认不处理规则冲突（比如 no-console 是 ESLint 管，max-len 可能两边都报）。不处理就会出现：保存后代码被 Prettier 格式化了，但 ESLint 仍标红提示“该行超长”。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
解决方法分三步：
- 安装
eslint-config-prettier：npm install --save-dev eslint-config-prettier - 在
.eslintrc.js的extends数组末尾加上'prettier'（注意：必须放最后，否则会被前面规则覆盖） - 确认没启用
eslint-plugin-prettier的 auto-fix——它会让 ESLint 强制调 Prettier，反而增加保存延迟
Vue/React 文件需要额外声明解析器
Prettier 默认不认 .vue 单文件组件里的 <template></template> 或 JSX，会报错 Cannot parse unknown language。得在 .prettierrc 里加语言映射：
{
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"parser": "flow",
"overrides": [
{
"files": ["*.vue"],
"options": { "parser": "vue" }
},
{
"files": ["*.jsx", "*.tsx"],
"options": { "parser": "babel" }
}
]
}
注意：parser 字段不能直接写 "vue" 顶层，必须走 overrides；且确保已安装对应解析器包（prettier-plugin-vue、@prettier/plugin-php 等），否则 override 不生效。
真实项目里最常漏的是 overrides 块和对应插件安装，一保存就静默失败——看着没报错，但 .vue 文件根本不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
