前端开发中提升效率的VSCode插件方案-VSCode-PHP中文网

live server保存后不自动刷新需确认三点：右下角显示并点击“go live”启用监听；修改文件必须位于服务根路径下的.html/.css/.js中；检查设置中liveserver.settings.donotverifyfolder是否误设为true导致路径校验失效。

前端开发中提升效率的vscode插件方案

Live Server 保存后不自动刷新怎么办

默认安装后只启动服务，不开启热重载——这是新手最常卡住的点。关键不是插件没装对，而是没触发「监听模式」。

确认以下三点：

右下角状态栏必须显示 Go Live（不是灰色），点击它才能真正启用监听
修改的是被服务托管的文件：必须在当前工作区根目录或子目录下的 .html、.css、.js 文件，不在该结构里的编辑不会触发刷新
检查设置里是否误关了自动刷新：liveServer.settings.donotVerifyFolder 设为 true 时会跳过路径校验，但若项目结构异常（比如多层嵌套入口），反而导致监听失效

临时验证方法：改完一个 .css 文件后，手动在浏览器地址栏按回车——如果样式生效，说明服务正常，问题出在监听路径；如果没反应，先检查文件是否在 Go Live 启动的根路径下。

Prettier 和 ESLint 冲突导致保存后代码乱掉

两者都格式化代码，但规则打架：ESLint 想加分号，Prettier 坚决不要，结果来回拉扯，光标乱跳、缩进错位。

核心解法是让 ESLint 「让位」给 Prettier：

安装 eslint-config-prettier，并在 .eslintrc.js 的 extends 数组末尾加上 'prettier'
VS Code 设置中关闭 ESLint 的自动修复：eslint.autoFixOnSave 设为 false，只留 editor.formatOnSave 交给 Prettier
项目根目录加 .prettierignore，把 node_modules、dist、build 这类生成目录排除，避免 Prettier 错误扫描

特别注意：如果用了 eslint-plugin-vue 或 eslint-plugin-react，也要对应加 eslint-config-prettier/vue 或 eslint-config-prettier/react，否则组件相关规则仍可能冲突。

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

路径别名（如 @/components）Ctrl+点击无法跳转

写了 import Button from '@/components/Button.vue'，但 Ctrl+点击 @/components/Button.vue 没反应——这不是插件问题，是 VS Code 不知道 @ 指向哪。

必须双管齐下：

在项目根目录配 jsconfig.json（JS 项目）或 tsconfig.json（TS 项目），写明 "baseUrl": "src" 和 "paths": { "@/*": ["*"] }
装插件 Path Intellisense，它读取上述配置并激活跳转；但注意它不处理 Vue 单文件组件内的 <script setup></script> 中的 defineProps 类型引用，那得靠 Volar 插件
重启 VS Code，或者用命令面板执行 Developer: Reload Window，否则配置不生效

常见陷阱：Webpack/Vite 配置了别名，但 jsconfig.json 没同步更新，VS Code 就永远找不到路径。别名必须在构建工具和编辑器配置里保持一致。

Vue/React 组件内模板语法高亮或属性补全失效

写 v-model 或 onChange 时没有提示，<template></template> 区域颜色灰白——大概率是语言服务没接管文件类型。

分场景处理：

Vue 项目：卸载旧版 Vetur，装官方 Volar（注意选「Volar」而非「Volar Legacy」），并在设置里关掉 vetur.validation.template
React + TSX：确保 typescript.tsdk 指向项目本地 node_modules/typescript/lib，而不是 VS Code 自带的旧版本 TS，否则 JSX 类型推导会断
通用检查：右下角语言模式必须是 Vue 或 JavaScript React，不是 Plain Text 或 HTML；点一下右下角文字可手动切换