VSCode插件打造前端高效工作流实战-VSCode-PHP中文网

live server 页面不刷新因文件未被识别为有效入口，需保存为英文路径.html文件、禁用冲突插件；prettier引号问题须配置"prettier.singlequote": true；vue变量重命名应使用f2而非auto rename tag；路径别名需jsconfig.json配置baseurl和paths。

vscode插件打造前端高效工作流实战

Live Server 启动后页面不刷新，`Go Live` 按钮变灰怎么办

根本原因通常是文件未被正确识别为可服务的入口，或监听机制被干扰。Live Server 默认只对 .html 文件生效，且要求文件保存在项目根目录或子目录中（不能是未保存的临时文件）。

检查当前打开的是否为已保存的 .html 文件——未保存的 untitled-1 无法启动服务
确认路径不含中文、空格或特殊符号（如 我的项目/首页.html 会失败，改用 my-project/index.html）
关闭其他可能冲突的插件，比如旧版 Open in Browser 或自定义服务器脚本（如 http-server 命令行进程）
右键菜单里选 Open with Live Server 比点击状态栏按钮更可靠；若仍无效，尝试在资源管理器中右键该文件再操作

`prettier` 格式化后 JS 引号变成双引号，但团队约定用单引号

这是默认行为，prettier 不读取 ESLint 规则，必须显式配置。仅靠 "editor.formatOnSave": true 不足以覆盖风格偏好。

面向设计的AXUI前端框架表单

面向设计的AXUI前端框架表单是一款包含表格、列表、弹窗等的AXUI前端框架表单下载。

下载

在工作区或用户设置中添加："prettier.singleQuote": true
同时建议禁用分号："prettier.semi": false，避免和团队规范冲突
如果项目已有 .prettierrc，优先以该文件为准；VS Code 设置会 fallback 到它，而不是覆盖它
注意：若同时启用了 ESLint 的 quotes 规则，需用 eslint-config-prettier 关闭格式类规则，否则保存时可能反复来回修改

Vue 文件里 `ref` 变量改名，`Auto Rename Tag` 不同步更新模板中的绑定

该插件默认只处理 HTML/XML 标签和属性，对 Vue 的响应式语法（如 {{ count }}、v-model="count"）无感知。它不解析 JavaScript 表达式上下文。

确认插件设置中 "auto-rename-tag.activationOnLanguage" 包含 "vue" —— 这仅影响标签重命名，不影响表达式
真正能跨区域重命名的是 VS Code 原生的 editor.action.rename（F2），它支持 SFC 中的 script/template 双向联动
若 F2 也不生效，检查是否安装了 Volar（Vue 官方推荐）而非旧版 Vetur；Volar 才提供完整的类型感知重命名
别依赖 Auto Rename Tag 处理逻辑变量，它只管“写在标签上的东西”，不管“写在花括号里的东西”

路径补全总提示 `./src/components/Button.vue`，但项目用的是 `@/components/Button.vue`

这是 Path Intellisense 默认不识别别名映射导致的。它只扫描物理路径，不知道 @ 指向哪里。

必须在项目根目录配置 jsconfig.json 或 tsconfig.json，声明 "baseUrl" 和 "paths"
示例配置：{"compilerOptions": {"baseUrl": ".", "paths": {"@/*": ["src/*"]}}}
配置后重启 VS Code（不是 Reload Window），否则插件无法加载新路径映射
部分版本的 Path Intellisense 需手动启用别名支持：在插件设置里勾选 "path-intellisense.mappings" 并填入 {"@": "src"}