ESLint 检查代码问题并自动修复,Prettier 格式化代码保持统一,JavaScript 代码片段提升编写效率,Path Intellisense 补全文件路径,Auto Rename Tag 同步标签重命名,五者协同提升 JS 开发体验。

VSCode 上开发 JavaScript 项目,装对扩展能大幅提升编码效率和代码质量。下面这几个扩展几乎是每个 JS 开发者都会用到的。
ESLint
实时检查 JavaScript/TypeScript 代码中的问题,比如语法错误、潜在 bug、风格不一致等。配合项目中的 .eslintrc 配置文件,可以在保存时自动修复部分问题,保持团队代码风格统一。
- 支持 Vue、React 等框架的语法检查
- 可配置为保存时自动修复
- 与 Prettier 协同工作效果更佳
Prettier - Code Formatter
专注于代码格式化的工具,让 JavaScript、JSX、JSON 等代码保持美观一致的样式。不需要手动调整缩进或括号位置。
- 支持一键格式化整个文件
- 可设置为保存时自动格式化
- 避免团队中“空格 vs 制表符”这类无谓争论
JavaScript (ES6) code snippets
提供常用的 ES6+ 代码片段,比如 arrow functions、destructuring、classes 等,输入简短前缀就能快速生成代码。
立即学习“Java免费学习笔记(深入)”;
- 输入 'cl' 回车生成 console.log()
- 'imp' 快速导入模块
- 减少重复敲写样板代码的时间
Path Intellisense
自动补全文件路径,特别是在 import 语句中引用本地模块或图片资源时非常实用。
- 输入 './com' 自动提示 components/ 目录
- 支持图片、CSS、JSON 等文件类型
- 避免拼错路径导致运行时错误
Auto Rename Tag
修改 HTML 或 JSX 的开始标签时,结束标签会自动同步重命名,特别适合 React/Vue 开发。
- 改 为 ,闭合标签也跟着变
- 减少因标签不匹配导致的渲染问题
基本上就这些。这五个扩展覆盖了语法检查、格式化、自动补全、路径提示和标签同步,日常写 JS 完全够用。搭配好 settings.json 的保存自动格式化配置,开发体验会顺畅很多。










