prettier插件装了却没生效，根本原因是vscode未将esbenp.prettier-vscode设为默认格式化器或语言特定配置被覆盖；需检查settings.json中"editor.defaultformatter"设置、文件类型识别准确性、eslint冲突及项目级.prettierrc配置是否到位。
Prettier 是当前最可靠、冲突最少的前端代码格式化方案，但必须配合 ESLint 和正确配置才能真正落地。
为什么 Prettier 插件装了却没生效？
常见现象是保存后代码毫无变化，或只对部分文件起作用。根本原因不是插件没装，而是 VSCode 没选对默认格式化器，或语言特定设置被覆盖。
- 检查
settings.json中是否设置了"editor.defaultFormatter": "esbenp.prettier-vscode"—— 这行必须存在，且不能被其他语言配置覆盖 - 确认文件类型是否被识别正确：比如
.jsx文件可能被识别为javascriptreact，需额外加语言块："[javascriptreact]": {"editor.defaultFormatter": "esbenp.prettier-vscode"} - 如果同时装了 ESLint 插件，
editor.formatOnSave会优先走 ESLint 的修复逻辑，而非 Prettier 格式化 —— 此时应关闭 ESLint 的自动修复，或用"editor.codeActionsOnSave": {"source.fixAll.eslint": true}显式控制顺序
如何让 Prettier 和 ESLint 不打架？
二者定位不同：ESLint 检查逻辑与规范（如 no-console），Prettier 只管样式（缩进、引号、换行）。冲突通常发生在规则重叠（如分号、引号）上。
- 在项目根目录安装
eslint-config-prettier，并在.eslintrc.js中加入extends: ["eslint:recommended", "prettier"] - 不要在
.eslintrc.js里再写"quotes": ["error", "single"]这类格式规则 —— 它们应由 Prettier 统一管理 - VSCode 的
settings.json中可指定 Prettier 参数，例如："prettier.semi": false、"prettier.singleQuote": true，这些会覆盖 Prettier 默认行为
哪些 Prettier 配置项真正影响日常开发？
不必堆砌全部参数，掌握几个关键项就能应对大多数团队场景：
-
"prettier.printWidth": 100—— 超过该宽度自动折行，避免横向滚动；设为80更保守，120适合宽屏协作 -
"prettier.tabWidth": 2—— 前端主流缩进，和多数 ESLint 配置一致；设为4容易和 Python/Java 项目混淆 -
"prettier.useTabs": false—— 强制空格缩进，避免混合缩进引发 Git diff 噪音 -
"prettier.trailingComma": "es5"—— 允许对象/数组末尾逗号，提升 diff 可读性，也兼容老浏览器
项目级配置比用户级配置更重要
你本地设好了 settings.json，但队友没配，或者 CI 流水线不认，格式化就形同虚设。
- 把
.prettierrc放进项目根目录（JSON 或 JS 格式均可），内容如：{"semi": false, "singleQuote": true} - 同时提交
.vscode/settings.json到仓库（注意不提交敏感配置），让新成员开箱即用 - 用
.prettierignore排除node_modules、dist、build等目录，避免格式化工具卡死或误操作
真正麻烦的从来不是装插件，而是让格式化规则在编辑器、命令行、CI、不同操作系统之间保持一致 —— 一旦忽略 .prettierrc 和 .vscode/settings.json 的协同，就会出现“我本地格式正常，Git 提交后 CI 报错”的典型问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
