前端开发必备插件包括REST Client（免切窗口发请求）、ESLint+Prettier（需配置eslint-config-prettier避免规则冲突）、Vue Helper（支持变量跳转但限标准API）、Live Server（热更新预览，仅适用于原生开发或原型验证）。
前端开发日常离不开的插件，不是“装了就好”，而是得知道哪些能真正在写代码、调接口、查 bug 时省下 3 分钟——这 3 分钟每天叠加起来，就是你比别人多出的半天开发时间。
REST Client：不用切窗口就能发请求
写完一个 fetch 或 axios 调用，还要开 Postman？没必要。直接在项目里建个 api.test.http 文件，写几行就能跑：
GET https://api.example.com/users HTTP/1.1 content-type: application/json
按 Ctrl+Alt+R（Windows）或 Cmd+Alt+R（Mac）就发出去，响应体自动格式化、可折叠、字段右键复制。别小看这个动作——它省掉的是切换应用、找收藏夹、填 URL、选 method 的整套流程。
- 环境变量要用
${{host}}，得先在.vscode/settings.json里配好，否则会报Variable 'host' not found - 中文参数或响应没问题，但 URL 中带空格必须手动编码，
REST Client不自动处理 - 多个请求用
###分隔，别漏写，否则后一个请求会被前一个的 header 带过去
ESLint + Prettier：规则冲突比代码 bug 更难 debug
装上 ESLint 和 Prettier 插件后，如果保存时代码乱跳、引号忽单忽双、分号忽有忽无，大概率是规则打架了。核心解法就一条：eslint-config-prettier 必须装，且要放在 extends 数组最后。
立即学习“前端免费学习笔记（深入）”；
比如你的 .eslintrc.js 是这样写就危险：
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
module.exports = {
extends: ['airbnb', 'prettier'],
rules: { /* ... */ }
}正确写法是：
module.exports = {
extends: ['airbnb', 'prettier'], // ← 这里没问题
plugins: ['prettier'],
rules: {
'prettier/prettier': 'error'
}
}-
prettier.semi设为false后，ESLint 的semi规则必须关掉，否则保存时反复修正 -
editor.formatOnSave开启后，只对当前语言生效；Vue 文件需额外配"html.format.enable": true - 团队协作时，
package.json里prettier和eslint版本必须锁死，不然 A 机器格式化完，B 机器一保存又改回来
Vue Helper：别再手动找 data 里定义的变量了
在 <template> 里点一下 {{ userInfo.name }}，光标悬停后出现下划线，点击直接跳到 data() 里对应的 userInfo 定义处——这就是 vue-helper 最实在的价值。
但它有个硬门槛：只认标准 Vue 2 Options API 或 Vue 3 Composition API 的 setup() 返回值。如果你用 ref 或 reactive 但没 return 出去，跳转就失效。
-
alt + x扩选功能对 JSX 支持弱，遇到{item.map(...)}块容易选不全 - 组件自动导入（
vue.components.autoimport）依赖components目录结构，如果组件不在src/components下，得手动配vue.autoImportComponentPaths - 和 Volar 插件共存时，建议禁用 Volar 的模板类型检查，否则两个插件对
props类型提示会互相覆盖
Live Server：热更新不是万能的，但能救你免于手动刷新
新建一个 index.html，点底部 Go Live，浏览器自动打开 http://127.0.0.1:5500 ——这是最顺滑的起步方式。但真正卡住人的，往往是路径和构建产物之间的错位。
- 它只服务当前工作区根目录，如果你在子目录里开 HTML，路径引用会错，比如
./js/app.js实际要从根目录找 - Webpack/Vite 项目里别用它跑打包后的
dist，静态资源路径会 404；它只适合纯 HTML/CSS/JS 原生开发或快速原型验证 - 端口被占时，
liveServer.settings.port设为0可自动分配，但 VSCode 重启后不一定记住上次分配的端口，得手动清缓存
插件本身很轻，但它的价值藏在“不需要思考”四个字里：你改一行 CSS，保存，眼睛都不用离开编辑器，预览就变了。这种确定性，比任何炫酷功能都更接近开发的本质。
