VSCode 默认不格式化 .js 文件,因未显式绑定 Prettier 且未启用语言专属 editor.formatOnSave;必须在 [javascript] 配置块中设 "editor.formatOnSave": true 和 "editor.defaultFormatter": "esbenp.prettier-vscode",并确保项目已安装 prettier 包及正确配置 .prettierrc。

VSCode 默认不格式化 Node.js 代码(即 .js 文件),必须显式绑定 Prettier 并启用保存触发,否则按 Ctrl+S 完全没反应。
为什么 .js 文件保存时不格式化?
VSCode 对 JavaScript 文件默认使用内置的 vscode.typescript-language-features 格式器,Prettier 插件装了也不会自动接管。
- 右下角状态栏打开一个
.js文件,若显示的是ESLint或None,说明 Prettier 没绑定成功 -
editor.formatOnSave放在全局设置里无效——它只对语言特定配置块生效 - 必须在
.vscode/settings.json中为[javascript]显式开启:"[javascript]": {"editor.formatOnSave": true} - 扩展 ID 必须写对:
"editor.defaultFormatter": "esbenp.prettier-vscode",写成prettier或prettier-vscode都会失败
本地 prettier 包是硬性依赖
Prettier 扩展本身不含 CLI,它只是调用你本地安装的 prettier 包;没装包会报错 Failed to load module 'prettier',且静默跳过格式化。
- 推荐在项目根目录运行:
npm install --save-dev prettier(或yarn add -D prettier) - 避免全局安装:
npm install -g prettier在 macOS + nvm 或 Windows 权限受限环境下常找不到可执行路径 - 如需强制指定路径,加配置项:
"prettier.pretterrcPath": "./node_modules/prettier" - Node.js 项目通常用 ESM,若配置文件是
.prettierrc.cjs,确保用module.exports = {...};若项目是纯 ESM("type": "module"),则改用.prettierrc.js并用export default
Node.js 场景下的关键配置项
Node.js 代码常见风格偏好(如无分号、单引号、宽松换行)需显式声明,否则 Prettier 会回退到默认规则。
-
"semi": false:禁用分号(Node.js 社区主流选择) -
"singleQuote": true:避免模板字符串中混用双引号 -
"trailingComma": "all":对象/数组末尾逗号,提升 git diff 可读性 -
"printWidth": 100:比默认 80 更适合 Node.js 的长链式调用(如fs.promises.readFile().then(...).catch(...)) - 不要漏掉
.prettierignore:至少排除node_modules/和dist/,否则格式化整个依赖树会卡死
和 ESLint 共存时的最小冲突配置
ESLint 不该负责格式化,只做逻辑检查;否则保存时两者反复覆盖,导致代码“抖动”或报错。
- 安装冲突消除插件:
npm install --save-dev eslint-config-prettier - 在
.eslintrc.cjs的extends数组里,把"prettier"放在**最后**:["eslint:recommended", "prettier"] - 禁用 ESLint 的自动修复:
"eslint.enable": true但不要设"eslint.autoFixOnSave": true - 确认 VSCode 的 ESLint 扩展(
dbaeumer.vscode-eslint)未启用eslint.format.enable,否则它会抢走格式化权
最易被忽略的一点:修改 .prettierrc 后,VSCode 不会热重载——必须重启窗口或重新打开文件,否则新规则不生效。尤其当配置语法有误(比如 JSON 多了个逗号),Prettier 会静默失效,回退到默认样式,你却看不到任何提示。


















