前端开发常用 VSCode 扩展（2024）

VSCode 因为超强的插件生态，才变得如此强大。作为前端，推荐一些日常使用较为高频的插件。

错误检查

• ESLint：JS 语法检查
• Stylelint：CSS 样式检查
• Code Spell Checker：代码拼写错误检查

编码辅助

语法提示

• JavaScript (ES6) code snippets
• Path Intellisense：文件路径自动提示

HTML 快速编辑

• Auto Close Tag：自动添加结束标签
• Auto Rename Tag：重命名成对标签

代码格式化

• Prettier - Code Formatter：代码格式化

动态 HTTP 服务

• Live Server：本地开启 http 服务用于展示 HTML 文件等

注释

• koroFileHeader：用于生成文件头部注释和函数注释的插件

react 专属

• ES7 React/Redux/GraphQL/React Native snippets
• Simple React Snippets

Vue 专属

• Vue - Offical：Vue 3 专用，注意：和 Vetur 不能混用
• Vetur： Vue 2 专用
• Vue VSCode Snippets
• Vue 3 Snippets

这种插件不用装太多，有一两个趁手的就好

uni-app 专属

• uni-create-view：在 VSCode 右键点击文件夹可以快速创建页面与组件，创建页面时将自动添加 pages.json 中，脱离 HBuilderX 不是梦
• uni-helper：uni-app 代码提示
• uniapp小程序扩展：：提供创建页面和组件功能，鼠标悬停到组件上的 API 提示功能

AI 编码

• CodeGeeX
• Tabnine

外观美化

• indent-rainbow：彩虹色显示缩进
• Bracket Pair Colorization Toggler：每对括号标上鲜明且不同的颜色，方便识别

其他

• Auto Import：自动查找分析依赖并引入
• GitLens：显示代码是谁改的
• Import Cost：显示 import 的第三方包有多大
• TODO Highlight：高亮代码中的 TODO、FIXME 等
• Turbo Console log：快速高效的 console.log