前言

作为前端开发者，VSCode 插件 + 自定义配置 直接决定开发效率。很多人只会写代码，不会优化编辑器，代码格式混乱、缩进错乱、无语法校验、开发卡顿、重复工作量大。

本文整理前端刚需必装插件，覆盖 Vue3 / React / 原生 JS / 样式 / 格式化 / 美化 / 效率工具，附带完整 settings.json 配置文件，直接复制开箱即用，团队统一编码规范，告别手动格式化。

---

一、前端核心刚需插件（必装）

1. ESLint

作用：JS/TS 语法校验、代码规范检测、错误标红、强制编码风格解决：语法不规范、变量未定义、冗余代码、潜在 BUG

2. Prettier - Code formatter

作用：一键代码格式化，统一缩进、引号、分号、换行前端通用格式化神器，搭配 ESLint 完美闭环

3. Volar

作用：Vue3 专属增强语法高亮、代码提示、组件跳转、props 校验、模板格式化✅ Vue3 开发必装，替代旧版 Vetur

4. TypeScript React code snippets

作用：React/TS 代码片段、快速生成模板函数组件、hooks、路由、状态一键生成

5. HTML CSS Support

作用：HTML/CSS 智能提示、类名补全、路径联想

6. Auto Rename Tag

作用：自动同步修改首尾标签改前面标签，后面自动同步修改，节省大量时间

7. Path Intellisense

作用：文件路径自动补全，引入组件、图片、资源不迷路

8. Iconify IntelliSense

作用：主流图标库实时提示、预览、补全，适配 Element Plus、Ant Design

9. JSON to TS

作用：JSON 一键转 TS 类型、接口，后端返回数据快速生成类型

10. Error Lens

作用：错误、警告直接行内显示，不用悬浮查看，排错更快

---

二、颜值 & 效率辅助插件（推荐安装）

• One Dark Pro：热门主题，护眼高颜值
• Material Icon Theme：文件图标美化，区分 vue/js/css/json
• Code Runner：右键运行单文件代码，测试 JS/TS/JSON 快速运行
• Bracket Pair Color DLW：彩色括号嵌套分层，多层代码不看花眼
• Search Node Modules：快速查找 node_modules 内部文件
• Todo Tree：项目 todo、待办、FIXME 高亮集中展示

---

三、完整通用配置 settings.json（直接复制）

按下 Ctrl + Shift + P → 输入 首选项: 打开设置(JSON)全部粘贴覆盖，自动格式化、自动保存、规范统一

json

{
  // 编辑器基础
  "editor.fontSize": 15,
  "editor.lineHeight": 1.6,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.cursorBlinking": "smooth",
  "editor.formatOnSave": true,
  "editor.formatOnType": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  // 格式化优先级
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // ESLint 配置
  "eslint.enable": true,
  "eslint.run": "onType",
  "eslint.workingDirectories": [{ "mode": "auto" }],

  // Prettier 全局规则
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "prettier.trailingComma": "none",
  "prettier.printWidth": 100,
  "prettier.arrowParens": "avoid",

  // 关闭自带校验，避免冲突
  "javascript.validate.enable": false,
  "typescript.validate.enable": false,

  // 文件关联
  "files.associations": {
    "*.vue": "vue"
  },

  // 隐藏无关文件
  "files.exclude": {
    "**/node_modules": true,
    "**/.git": true,
    "**/dist": true
  },

  // 终端配置
  "terminal.integrated.fontSize": 14,
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "One Dark Pro"
}

---

四、Vue3 专属额外配置（搭配 Volar）

在项目根目录新建 .vscode/settings.json，项目独立配置：

json

{
  "vue.server.hybridMode": true,
  "vue.format.script.initialIndent": false,
  "vue.complete.casing.props": "kebab"
}

---

五、常用快捷键（前端高频）

plaintext

Ctrl + S        保存自动格式化
Ctrl + D        选中下一个相同内容
Alt + ↑/↓       代码上下移动
Ctrl + Alt + ↓  多光标编辑
Ctrl + Shift + L 批量选中相同内容
Ctrl + B        侧边栏显隐

---

六、常见问题解决

1. 保存不自动格式化检查：formatOnSave 开启 + 对应文件格式化器选中 Prettier

2. ESLint 和 Prettier 冲突爆红安装依赖统一规则：

bash

运行

npm install eslint-config-prettier eslint-plugin-prettier -D

1. Vue 代码无提示卸载 Vetur，只保留 Volar，重启 VSCode

---

文末总结

1. 必装核心：ESLint + Prettier + Volar + Auto Rename Tag + Path Intellisense
2. 一键复制 settings.json，全员统一代码风格
3. 自动保存 + 自动修复，减少低级错误、提升联调效率
4. 这套配置适配：原生开发、Vue2/Vue3、React、TS 所有前端项目

全套插件 + 配置直接上手，告别杂乱代码，开发效率翻倍！