常用的vscode插件

VSCode 高频实用插件合集（含Vue3/TS/Electron/Node）

本文整理了开发中必备的VSCode插件，涵盖代码格式化、语法校验、版本控制、前端框架、跨端/后端开发等场景，并补充Vue3、TypeScript、Electron、Node.js专属插件，针对性提升不同开发场景的效率。

一、基础开发增强插件

1. Beautify

• 核心功能：一键格式化JavaScript、JSON、CSS、Sass、HTML代码，统一代码风格，支持自定义格式化规则，解决代码排版混乱问题。

2. ESLint

• 核心功能：校验JavaScript/TypeScript代码的语法错误、编码规范问题（如未定义变量、不符合团队规范的写法）；
• 注意：需本地/全局安装ESLint依赖（本地：npm install eslint，全局：npm install -g eslint），插件会自动识别项目中的.eslintrc配置。

3. GitLens — Git supercharged

• 核心功能：增强VSCode原生Git能力，支持一键查看代码提交作者（Git Blame）、行级修改日志，无缝导航/对比Git仓库版本，是Git版本管理的必备工具。

二、前端语法/工具类插件

1. HTML Snippets

• 核心功能：增强HTML5语法支持，包含完整标签提示、语法高亮、代码片段快速生成，部分支持标签废弃状态提示、标签快速信息预览。

2. JavaScript (ES6) code snippets

• 核心功能：提供ES6+语法的JavaScript/TypeScript代码片段（如箭头函数、解构赋值、Promise等），大幅减少重复代码编写。

3. REST Client

• 核心功能：无需Postman等外部工具，直接在VSCode中编写、发送HTTP/HTTPS请求，实时查看响应结果，支持请求头、参数、Cookie等配置。

三、前端框架专属插件

Vue 2 系列

1. Vetur

• 核心功能：Vue2开发标配，支持.vue文件语法高亮、代码补全、格式化、语法校验，适配Vue2的Options API。

2. Vue 2 Snippets

• 核心功能：基于Vue2最新API提供代码片段（如组件、指令、生命周期钩子等），快速生成Vue2代码结构。

Vue 3 系列（推荐）

1. Volar

• 核心功能：Vue3 + TypeScript开发的官方推荐插件，替代Vetur，支持.vue文件的TS类型校验、智能补全，完美适配Composition API/Setup语法糖。

2. Vue 3 Snippets

• 核心功能：针对Vue3新特性（如Teleport、Suspense、Composition API）提供专属代码片段，提升Vue3开发效率。

四、TypeScript 专属插件

1. TypeScript Hero

• 核心功能：增强TS开发体验，支持自动导入模块、代码重构、TS配置文件快速编辑，优化类型提示，解决TS导入繁琐的问题。

2. TypeScript Importer

• 核心功能：智能识别未导入的TS类型/模块，一键自动导入，支持别名配置，减少手动编写import语句的工作量。

五、Electron 专属插件

1. Electron

• 核心功能：Electron跨端开发增强，提供Electron API语法提示、代码片段、调试配置模板，支持快速启动/调试Electron应用。

2. Electron Debug

• 核心功能：简化Electron调试流程，内置主进程/渲染进程断点调试配置，快速定位跨端开发中的问题。

六、Node.js 专属插件

1. Node.js Modules Intellisense

• 核心功能：增强Node.js模块导入提示，支持npm/yarn第三方包、内置模块（fs/path等）的代码补全，适配require/import语法。

2. NPM Intellisense

• 核心功能：在require/import语句中自动补全npm包名称和路径，识别package.json依赖，避免手动输入包名出错。

3. Node Debug

• 核心功能：Node.js应用调试工具，支持断点调试、变量监控、调用栈查看，适配CommonJS/ESModule，是Node.js后端开发必备。

总结

1. 基础开发优先安装Beautify（格式化）、ESLint（校验）、GitLens（Git增强），覆盖通用开发需求；
2. Vue2选Vetur+Vue 2 Snippets，Vue3必选Volar+Vue 3 Snippets，适配不同版本生态；
3. TypeScript开发推荐TypeScript Hero+TypeScript Importer，Electron/Node.js可通过专属插件简化调试、补全流程。