关键在于建立稳定可复现的开发习惯:统一工作区配置、代码规范前置、高效调试、环境隔离;通过.vscode/settings.json和extensions.json固化团队共识,按框架精选插件,调试配置复用脚手架约定,TS项目启用composite提升性能。

用 VS Code 开发 React、Vue 或 Angular 项目,关键不是装一堆插件,而是建立稳定、可复现、团队友好的开发习惯。核心是:配置统一、代码规范前置、调试高效、环境隔离。
统一工作区配置,避免“在我机器上能跑”
把编辑器行为固化到项目里,而不是依赖个人设置。在项目根目录建 .vscode/settings.json,写入团队共识的配置:
-
禁用全局格式化,启用项目级 Prettier + ESLint:设
"editor.formatOnSave": true,同时配"editor.defaultFormatter": "esbenp.prettier-vscode"和"eslint.validate": ["javascript", "typescript", "vue", "react-jsx"] -
关闭不必要的自动修复:避免保存时意外改代码逻辑,用
"eslint.codeAction.showDocumentationCodeActions": false控制粒度 -
为不同框架设 language-specific 规则:比如 Vue 项目中给
"vue"语言单独开"editor.suggest.insertMode": "replace",避免模板补全错乱
按框架选对插件,不堆砌
插件求精不求多,以下为各框架真正提效的核心组合:
- React:ESLint(+ eslint-plugin-react)、Prettier、Import Sorter(自动整理 import)、Error Lens(行内报错高亮)
-
Vue:Volar(取代已废弃的 Vetur)、TypeScript Vue Plugin(支持
类型推导)、Vue Language Features(语法高亮与跳转) -
Angular:Angular Language Service(官方,支持模板绑定、指令补全、AOT 错误预检)、TypeScript Hero(快速导入/重命名)、Prettier for Angular(适配
.html模板缩进)
所有插件都应通过 .vscode/extensions.json 声明,新成员打开项目后一键推荐安装。
立即学习“前端免费学习笔记(深入)”;
TeemIp是一个免费、开源、基于WEB的IP地址管理(IPAM)工具,提供全面的IP管理功能。它允许您管理IPv4、IPv6和DNS空间:跟踪用户请求,发现和分配IP,管理您的IP计划、子网空间、区域和DNS记录,符合最佳的DDI实践。同时,TeemIp的配置管理数据库(CMDB)允许您管理您的IT库存并将您的配置项(CIs)与它们使用的IP关联起来。项目源代码位于https://github.com/TeemIP
调试配置一次到位,少折腾 launch.json
别手动反复改 .vscode/launch.json。根据脚手架生成方式直接复用:
- Create React App:用
npm start启动后,在调试面板选 “Chrome” → “Launch Chrome against localhost”,自动附着到http://localhost:3000 - Vite(Vue/React/Angular):启动命令为
npm run dev,对应调试配置设"url": "http://localhost:5173"(端口以终端输出为准),启用"webRoot": "${workspaceFolder}" - Angular CLI:直接选 “Angular App (Chrome)” 预设,它会自动读取
angular.json中的端口和源码路径
关键点:始终勾选 "skipFiles": [",避免调试时跳进 node 模块。
利用 TS + 项目引用,提升大型项目响应速度
当组件/模块变多,VS Code 的 TypeScript 服务容易卡顿。解决办法不是升级硬件,而是结构优化:
- 拆分
tsconfig.json:根目录放基础配置,每个子包(如packages/ui、packages/api)有自己的tsconfig.json,并设"composite": true - 在根
tsconfig.json中用"references"显式声明依赖关系,让 TS Server 只增量编译变更部分 - VS Code 会自动识别这种结构,打开大单体项目时内存占用下降 30%~50%,保存响应明显变快
基本上就这些。不复杂但容易忽略——配置沉入项目、插件精准匹配、调试靠约定而非手动、TS 结构为性能让路。坚持下来,一个人开发像团队协作,换电脑或拉新人,三分钟就能进入状态。









