VSCode前端开发环境搭建必备插件推荐-VSCode-PHP中文网

live server比open in browser更适合日常开发，因其启动真实http服务解决跨域、模块加载及路径解析问题，支持保存即刷新和热重载；而后者仅打开file://协议文件，无法运行现代前端项目。

vscode前端开发环境搭建必备插件推荐

Live Server 为什么比 Open in Browser 更适合日常开发

Live Server 是前端本地预览的首选，不是因为它功能多，而是它解决了保存即刷新这个核心痛点。Open in Browser 只是打开文件，不启动服务，遇到 fetch 请求跨域、import 模块加载失败、相对路径解析错误等问题时直接报错，根本跑不起来。

必须用 HTTP 协议才能正确加载资源（比如 ./assets/logo.png 或 import '@/utils'），Live Server 启动的是真实本地服务器，不是 file:// 协议
默认端口 5500 冲突时，可在设置里改 "liveServer.settings.port": 3000，设为 0 表示随机端口
热重载依赖浏览器 WebSocket 连接，如果页面卡住没更新，先检查控制台是否有 WebSocket connection failed
不支持 HTTPS，开发环境够用；生产环境部署必须换真实 Web 服务器

ESLint + Prettier 怎么配才不打架

这两个插件单独用都挺好，但一起装后常出现格式化完又被 ESLint 标红、保存反复修改的问题——本质是规则冲突，不是插件不好。

前端设计优化skill

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

下载

禁用 Prettier 的自动格式化：在设置中关掉 "prettier.enable": false，只让它作为 ESLint 的格式化引擎
ESLint 配置里加 "extends": ["eslint:recommended", "plugin:prettier/recommended"]，确保 Prettier 规则被纳入校验流
VSCode 设置中指定格式化工具："editor.defaultFormatter": "dbaeumer.vscode-eslint"，避免右键菜单里点“Format Document”调用错工具
项目根目录必须有 .eslintrc.cjs 或 .eslintrc.js，否则 ESLint 插件不生效，只显示“no config found”警告

Vue 开发别同时装 Vetur 和 Volar

这是 Vue 2 和 Vue 3 的兼容性雷区。Vetur 对 <script setup></script> 支持差，Volar 在 Vue 2 项目里会报一堆类型错误，两者共存会导致语法高亮错乱、跳转失效、甚至编辑器卡顿。

Vue 2 项目：只装 vetur，卸载 volar，并在设置里确认 "vetur.validation.template": true
Vue 3（尤其带 TypeScript）：只装 volar，卸载 vetur，启用 "volar.takeOverMode": true 让它接管所有 .vue 文件
如果项目是混合栈（部分 Vue 2 + 部分 Vue 3），建议按子包拆分，各自用对应插件，不要强行统一
重启 VSCode 后，打开一个 .vue 文件，看右下角状态栏是否显示 “Volar” 或 “Vetur”，这是最直接的判断依据

路径别名跳转失效时该查什么

写 import { api } from '@/api' 却 Ctrl+点击进不去，不是插件没装，而是配置链断了。

确认已安装 @lihuiwang.vue-alias-skip 或 path-alias 类插件，但更关键的是项目级配置
检查 tsconfig.json 或 jsconfig.json 中是否有 "compilerOptions.baseUrl" 和 "compilerOptions.paths"，例如："@/*": ["src/*"]
VSCode 设置里搜 typescript.preferences.importModuleSpecifier，设为 relative 或 non-relative 要和项目实际路径策略一致
如果用了 Webpack/Vite 别名，但没同步到 TS 配置，跳转一定失败——TS 语言服务不读构建配置，只认 tsconfig