prettier插件需认准作者esbenp安装并重启vscode;shift+alt+f无效主因是未将它设为默认格式化器、右下角语言模式错误或项目缺少本地prettier包,须配合.editor.defaultformatter配置及.prettierrc规则文件方可生效。

Prettier 是目前最常用、兼容性最好、开箱即用的代码格式化插件,尤其适合 JavaScript/TypeScript/HTML/CSS/JSON 等前端生态。它不解决“写什么”,只管“怎么写得整齐”——缩进、换行、引号、分号、括号空格,全由规则驱动。
怎么装 Prettier 插件?
不是搜“prettier”就完事,必须认准作者和名字:
- 打开 VSCode 扩展面板(
Ctrl+Shift+X) - 搜
Prettier - Code formatter - 确认作者是
Esben Petersen(Prettier 官方团队维护) - 点击安装,**重启 VSCode**(关键:不重启插件可能不加载语言绑定)
装完为什么 Shift+Alt+F 没反应?
VSCode 不会自动把新插件设为默认格式化器,它只调用当前语言绑定的那个格式器。常见卡点:
- 右下角状态栏语言模式不对:比如
.vue文件被识别成Plain Text,点一下语言名手动切到Vue - 没指定默认格式化器:按
Ctrl+Shift+P→ 输入Format Document With→ 选Configure Default Formatter→ 选esbenp.prettier-vscode - 当前文件类型没被 Prettier 支持:默认支持
javascript、typescript、html、css、json等;vue或markdown需额外配置语言专属规则
为什么还要在项目里装 npm install --save-dev prettier?
Prettier 插件本身不带执行引擎,它只是个“遥控器”,运行时会去项目 node_modules/.bin/prettier 找可执行模块。没这个二进制文件,就会报错:
Failed to load module 'prettier'所以:
- 不要只靠
npm install -g prettier(全局安装路径 VSCode 很难定位,尤其 macOS + nvm / WSL) - 每个项目都应
npm install --save-dev prettier(或yarn add -D prettier) - 如果项目已有
.prettierrc.json或prettier.config.js,插件会自动读取;否则 fallback 到内置默认(tabWidth: 2,semi: true),容易和团队规范不一致
其他语言怎么加格式化支持?
比如 C/C++,Prettier 不适用,得换 clang-format:
- 装扩展:
Clang-Format(作者:xaver)或启用clangd扩展的格式化能力 - 项目根目录放
.clang-format文件(内容如IndentWidth: 4,UseTab: Never) - 在
settings.json里配路径:"clang-format.executable": "file:/path/to/.clang-format"或让 clangd 自动读取 - 对
[cpp]语言单独绑定:"[cpp]": {"editor.defaultFormatter": "llvm-vs-code-extensions.vscode-clan..."}(注意 ID 要查扩展详情页)
不同语言的格式化器互不兼容,也别指望一个插件通吃——关键是看右下角语言标识,再对应配 defaultFormatter。











