VSCode代码自动排版技巧_VSCode离线维护Vue项目【总结】-VSCode-PHP中文网

vscode保存时自动排版需插件、配置、语言模式三者对齐；离线vue项目须确保vetur、vue cli、prettier等本地可用，否则formatonsave无效。

vscode代码自动排版技巧_vscode离线维护vue项目【总结】

VSCode 保存时自动排版不会“自己动起来”，必须同时满足插件、配置、语言模式三者对齐；离线维护 Vue 项目时，Vetur 和 Vue CLI 的本地可用性比格式化设置更关键——没它们，editor.formatOnSave 再开也没用。

editor.formatOnSave 开了却没反应？先看右下角语言标识

VSCode 不会凭空格式化，它只对当前语言模式（Language Mode）启用对应格式化器。如果打开 .vue 文件后右下角显示的是 Plain Text 或 HTML，Prettier 或 Vetur 都不会触发。

点右下角语言标识 → 选 Vue（不是 Vue HTML 或 JavaScript React）
若没有 Vue 选项，说明 Vetur 插件未安装或未启用；离线环境需提前下载 Vetur 的 .vsix 文件手动安装
检查 settings.json 中是否写了 "[vue]": { "editor.defaultFormatter": "octref.vetur" } —— 注意是 octref.vetur，不是 esbenp.prettier-vscode，后者对 <template></template> 和 <style></style> 支持有限

Prettier + Vetur 混用时，.prettierrc 只对 <script> 生效</script>

Vetur 默认把 .vue 文件拆成三块处理：<template></template> 用 html 格式化器，<style></style> 用 css 格式化器，<script></script> 才走 javascript 链路并读取 .prettierrc。所以你在 .prettierrc 里设的 semi、singleQuote 只影响脚本区。

Auth0 Vue

在 Vue.js 3 中添加身份验证（登录、注销、用户会话、受保护路由），集成 @auth0/auth0-vue SDK，配合 Vite 使用。

下载

<template></template> 对齐靠 vetur.format.options.wrapAttributes 控制，比如设为 "force-aligned-multiple" 才能让多属性垂直对齐
<style></style> 区域若用 SCSS，需额外装 mrmlnc.vscode-scss 并配 "[scss]": { "editor.defaultFormatter": "mrmlnc.vscode-scss" }
离线时 .prettierrc 必须放在项目根目录，且文件名不能带后缀（不是 .prettierrc.json），否则 Vetur 不识别

离线 Vue 项目无法格式化？优先确认 dartfmt / vue-cli / prettier 是否真在本地

VSCode 的格式化本质是调用外部命令：Vetur 调 prettier（JS）、vls（Vue Language Server）；Vue CLI 创建的项目若含 eslint-plugin-vue，还会触发 ESLint 的 --fix。离线环境下，这些二进制或依赖包缺一个，保存就静默失败。

打开 VSCode 内置终端，运行 npx prettier --version，无输出说明项目没装 prettier（devDependencies 里没它，或离线安装时漏了）
运行 vue --version，报错则 Vue CLI 未离线部署成功；应提前在有网机器上执行 npm pack @vue/cli，再在离线机用 npm install -g xxx.tgz
若用 Volar 替代 Vetur（Vue 3 推荐），离线安装必须包括 Vue Server 的二进制（node_modules/@volar/vue-language-server/bin/vue-language-server.js），否则 formatOnSave 直接跳过