一个前端工程师的VSCode终极配置分享

一个好用的VSCode配置重在贴合开发节奏、减少重复操作、提升代码质量与协作效率，核心是精选插件（ESLint、Prettier、Volar/Vetur、Auto Import、Path Intellisense）与关键设置（保存即修复、Tab宽度为2、隐藏node_modules等），辅以别名配置和快捷操作习惯。

一个好用的 VSCode 配置，不在于插件堆得多，而在于贴合日常开发节奏、减少重复操作、让代码更干净、协作更顺畅。下面这些配置和习惯，是我作为前端工程师长期打磨出来的「最小可行高效组合」，不炫技，重实用。

核心插件：精挑细选，各司其职

以下插件覆盖了语法支持、格式化、提示增强、调试和协作等关键环节，装完重启一次即可生效：

• ESLint：实时校验 JS/TS 代码规范，配合项目中的 .eslintrc 配置自动修复（推荐开启 "eslint.validate": ["javascript", "typescript", "vue"]）
• Prettier：统一格式化风格，和 ESLint 协作时建议禁用 Prettier 的 auto-format on save，改用 ESLint 的 fix on save，避免冲突
• Volar（Vue 3）或 Vetur（Vue 2）：Vue 开发必备，提供语法高亮、组件跳转、props 提示等，Volar 还原生支持 `
• Auto Import：写到一半按 Ctrl+Space 就能自动补全并插入 import，省去手动找路径的步骤
• Path Intellisense：路径补全神器，敲 `@/` 或 `../` 后直接看到项目内真实路径，支持别名（需配 `jsconfig.json` 或 `tsconfig.json` 中的 `baseUrl` 和 `paths`）

关键设置：几行配置，体验大不同

在 settings.json 中加入这些高频项，比点菜单更快也更稳定：

• 保存即修复："editor.codeActionsOnSave": { "source.fixAll.eslint": true }
• 关闭烦人提示："editor.suggest.showWords": false（避免补全出现大量无关变量名）
• Tab 宽度统一为 2："editor.tabSize": 2，搭配 "editor.insertSpaces": true，前端主流选择
• 隐藏无用文件："files.exclude": { "**/node_modules": true, "**/.git": true, "**/dist": true }
• 快速打开同名样式文件：装插件 Open in Editor 或用快捷键 Ctrl+Shift+P → Open SCSS/LESS/CSS for current file（可自定义命令绑定）

推荐的 jsconfig.json / tsconfig.json 配置

别名支持不是玄学，是提升导入效率的基础。在项目根目录加一个 jsconfig.json（Vue/JS 项目）或 tsconfig.json（TS 项目），内容类似：

立即学习“前端免费学习笔记（深入）”；

Openflow

一键极速绘图，赋能行业工作流

88

查看详情

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

配完记得重启 VSCode，Path Intellisense 和跳转就都生效了。

小技巧：让日常操作再快 1 秒

这些不是配置，而是我每天都在用的手势级习惯：

• 快速复制当前文件绝对路径：右键文件页签 → Copy Path，粘贴出来就是工程内相对路径；按住 Alt 再点右键 → Copy Relative Path
• 多光标精准编辑：按住 Ctrl + 点击多个位置，或 Ctrl+D 逐个选中相同词，Ctrl+U 撤回上一次多选
• 快速切换 .vue 文件三块区域：在 `
• 临时禁用 ESLint：在某行末尾加 // eslint-disable-next-line，或在代码块上下加 // eslint-disable 和 // eslint-enable

基本上就这些。没有必须装的“神级插件”，也没有一劳永逸的万能配置。关键是根据你当前的框架、团队规范和手速习惯，做减法、调细节、常更新。VSCode 的强大，在于它愿意陪你一起进化。

以上就是一个前端工程师的VSCode终极配置分享的详细内容，更多请关注php中文网其它相关文章！