跳转到主内容
极星编程网:以代码为星,赴技术山海!

VSCode离线安装代码美化包_Vue项目格式自动调整【流程】

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

相关文章