前端开发者必须了解的VSCode插件知识-VSCode-PHP中文网

Prettier和ESLint不可替代：Prettier专注代码格式化（缩进、引号、换行），ESLint负责代码质量与逻辑规范（未使用变量、潜在错误等），二者职责分离，协同才能兼顾代码美观与健壮性。

前端开发者必须了解的vscode插件知识

为什么 Prettier 和 ESLint 不能只装一个

只装 Prettier，代码会整齐但可能有隐藏 bug；只装 ESLint，错误能被标出但格式依然混乱。两者职责不同：Prettier 管排版（比如缩进、括号换行），ESLint 管逻辑和规范（比如未使用变量、var 声明、console.log 残留）。不配对使用，团队协作时容易出现「格式没问题但代码跑不通」或「格式一团糟但 ESLint 不报错」的情况。

常见踩坑点：

eslint-config-prettier 必须装，否则 ESLint 和 Prettier 的规则会打架（比如一个要求分号，一个禁止）
editor.defaultFormatter 要设为 esbenp.prettier-vscode，否则保存时可能调用错格式化器
editor.formatOnSave 开启后，ESLint 的 --fix 不会自动触发，得额外配置 eslint.enable + eslint.run 为 onType 或配合 save 钩子

Vue 项目里 Volar 和 Vetur 别共存

Volar 是 Vue 3 官方推荐的类型支持插件，Vetur 主要适配 Vue 2。两者同时启用会导致模板语法提示错乱、ref 类型推导失败、甚至 Ctrl+Click 跳转失效。VSCode 默认不会禁用冲突插件，需要手动关掉其中一个。

判断当前项目该用哪个：

Vue 3 + <script setup></script> → 只开 Volar，关 Vetur
Vue 2 项目 → 关 Volar，开 Vetur
混合项目（如部分页面 Vue 2、部分 Vue 3）→ 不建议，优先升级统一版本；若必须共存，用 workspace 级设置按文件夹分别启用

验证方式：在 .vue 文件中输入 ref(，看是否有准确的 TS 类型提示和参数补全。

路径补全为什么 Path Intellisense 有时不生效

Path Intellisense 默认只对 import、require、src、href 等常见属性生效，遇到自定义字段（比如 data-src、v-bind:src、@click 中的路径）就无响应。它也不解析别名（@/components），除非你手动配置 path-intellisense.mappings。

前端设计优化skill

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

下载

实操建议：

在 settings.json 中加映射："path-intellisense.mappings": { "@": "${workspaceFolder}/src" }
若用 Vite，别名配置在 vite.config.ts 里，Path Intellisense 不会自动读取，必须同步写进插件配置
React 项目中 import 语句路径补全正常，但 JSX 里 require('./xxx.png') 不会触发，这是插件设计限制，不是 bug

Live Server 和 open in browser 的本质区别

open in browser 就是右键菜单里「Open in Default Browser」的快捷封装，每次改完代码都得手动刷新；Live Server 是起一个本地 HTTP 服务，监听文件变化并自动向浏览器推送更新（基于 WebSocket），还支持多端同步预览、自定义端口、HTTPS 代理等。

关键差异点：

Live Server 启动后地址是 http://localhost:5500/xxx.html，而 open in browser 打开的是 file:///xxx.html —— 后者无法加载 fetch、import() 等受限于 CORS 的 API
Live Server 默认根目录是当前打开的文件夹，不是文件所在目录；如果项目结构复杂（比如 src/index.html），需右键 src 文件夹再启动，否则路径会错
某些老旧插件（如旧版 Auto Close Tag）与 Live Server 的 DOM 注入机制存在兼容问题，表现为标签闭合延迟或失效，可临时禁用 Live Server 测试