离线安装Prettier插件仅支持两种官方方式:命令行code --install-extension或拖拽.vsix文件至VSCode主编辑区;其他方式易因目录结构或签名问题失败。
离线安装 Prettier 插件必须用
或拖拽
VSCode 官方只认两种离线安装方式:命令行
和直接拖拽
文件到编辑器主窗口。其他方式(比如复制进 extensions 目录)容易因目录结构不匹配或签名缺失而失败。
常见错误现象:
或安装后插件列表里不显示、状态栏无 Prettier 图标。
拖拽前确保 VSCode 已打开一个文件夹(哪怕空的),且焦点在主编辑区,不是设置页或侧边栏
必须用绝对路径,Windows 路径含空格要加双引号,例如:
若提示
,需先在 VSCode 里按
运行
关掉 VSCode 自带 JS/CSS 格式化器,否则和 Prettier 冲突
VSCode 默认启用
的格式化能力,它会和 Prettier 在保存时反复覆盖——比如刚把缩进改成 2 空格,它又给你弹回 4 空格;或者单引号被强制转双引号后又被转回来。
必须手动禁用它,而不是指望“优先级更高”能自动解决。
立即学习
“
前端免费学习笔记(深入)
”;
打开设置 → 搜索
→ 设为
同样搜索
和
→ 全部设为
再确认
已设为
,不是
放项目根目录才生效,
只是辅助
团队协作中,靠用户级
里的
配置根本不可靠——队友没装插件、CI 不读 VSCode 配置、甚至你换台机器就失效。
VSCode 1.118
微软正式发布 Visual Studio Code 1.118 版本 。本次更新重点强化了 AI 开发体验与企业管理能力,其中最引人注目的是新增 Copilot CLI 远程控制功能,允许开发者通过手机或网页远程监控和接管 AI 会话 。同时,为了提高 AI 的运行性价比,新版本优化了令牌缓存策略以降低成本 。此外,1.118 版还引入了 Chronicle 本地历史追踪、TypeScript 7.0 支持以及更严格的企业级访问管控 。
下载
真正起效的是项目级配置文件,VSCode 的 Prettier 插件会自动识别它,且优先级高于所有全局设置。
在项目根目录新建
(JSON 格式)或
(JS 格式),推荐前者,免去 Node 环境依赖
内容示例:
Vue 文件需额外支持:在
中加
,否则
部分会报
Vue 文件要让 Prettier 接管,得同时改 Vetur 设置
Vetur 默认用自己的格式化器处理
文件,即使你装了 Prettier 并设了默认格式化器,它仍可能跳过
外的区域。
必须显式告诉 Vetur:“HTML、CSS、JS 全部交给 Prettier”,否则保存时只有 script 块被格式化,template 和 style 保持原样。
在项目
中添加:
如果项目已禁用 Vetur 格式化(
),那反而会导致 template 不被格式化——此时应删掉这行,只靠 Prettier + overrides
不要同时开启
的 auto-fix,它会让 ESLint 强制调 Prettier,保存延迟明显,且和
功能重复
最易被忽略的一点:Vetur 的
设置只对它自己的格式化流程起作用;而
控制的是 VSCode 原生的「格式化文档」动作。两者必须对齐,否则按
和保存触发的行为会不一致。
code --install-extensioncode --install-extension.vsixExtension is not compatible with VS Codecode --install-extensioncode --install-extension "D:\ext\esbenp.prettier-vscode-9.10.3.vsix"command not found: codeCtrl+Shift+PShell Command: Install 'code' command in PATHtypescript-language-featuresjavascript.format.enablefalsecss.format.enablehtml.format.enablefalseeditor.defaultFormatteresbenp.prettier-vscodevscode.typescript-language-features.prettierrc.vscode/settings.jsonsettings.jsonprettier.*.prettierrc.prettierrc.cjs{ "semi": false, "singleQuote": true, "tabWidth": 2, "printWidth": 120, "trailingComma": "es5" }.prettierrc"overrides": [{"files": ["*.vue"], "options": {"parser": "vue"}}]Cannot parse unknown language.vue.vscode/settings.json"vetur.format.defaultFormatter.html": "prettier", "vetur.format.defaultFormatter.css": "prettier", "vetur.format.defaultFormatter.js": "prettier""vetur.format.enable": falseeslint-plugin-prettiereditor.formatOnSavevetur.format.defaultFormatter.*editor.defaultFormatterShift+Alt+F