前端开发者必备的VSCode插件使用心得-VSCode-PHP中文网

前端开发必备插件包括rest client（免切窗口发请求）、eslint+prettier（需配置eslint-config-prettier避免规则冲突）、vue helper（支持变量跳转但限标准api）、live server（热更新预览，仅适用于原生开发或原型验证）。

前端开发者必备的vscode插件使用心得

前端开发日常离不开的插件，不是“装了就好”，而是得知道哪些能真正在写代码、调接口、查 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 是这样写就危险：

前端设计优化skill

前端设计与 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></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 类型提示会互相覆盖