记录——前端开发IDEA需要的插件

目录

• • • [一、通用类（VS Code 主流）](#一、通用类（VS Code 主流）)
    • [二、HTML / CSS 类插件](#二、HTML / CSS 类插件)
    • [三、JavaScript / TypeScript 类插件](#三、JavaScript / TypeScript 类插件)
    • [四、Vue 专属插件](#四、Vue 专属插件)
    • [五、React 专属插件](#五、React 专属插件)
    • [六、小程序 / UniApp 插件](#六、小程序 / UniApp 插件)
    • [七、Git / 开发效率类](#七、Git / 开发效率类)
    • [八、格式化 & 规范增强](#八、格式化 & 规范增强)

该图为我装了的，常用的

下面列出一些解释

一、通用类（VS Code 主流）

1. Chinese (Simplified) Language Pack：VS Code简体中文汉化包

2. Code Runner：一键运行JS、HTML、TS、Vue等多种代码

3. Settings Sync：同步插件、配置、快捷键，换电脑一键还原

4. Material Icon Theme ：文件图标美化，区分各类文件类型
   

5. One Dark Pro：热门暗黑主题，护眼且代码高亮清晰

二、HTML / CSS 类插件

1. HTML CSS Support：HTML标签、CSS类名/ID智能补全、跳转
2. Auto Rename Tag ：修改开始标签自动同步闭合标签，好用
3. Live Server：本地实时服务器，保存代码浏览器自动刷新
4. CSS Peek ：悬浮HTML类名预览CSS样式，支持跳转编辑，好用
5. Prettier ：代码格式化，统一多类型代码风格，保存自动格式化，好用
6. Tailwind CSS IntelliSense：Tailwind智能提示、补全、悬浮预览
7. PostCSS Language Support：识别PostCSS语法，避免嵌套/变量报错

三、JavaScript / TypeScript 类插件

1. ESLint ：代码语法检查、规范校验，支持自动修复，好用
2. JavaScript and TypeScript Nightly：增强TS/JS语法解析、类型检测
3. TypeScript React code snippets：TSX代码片段，快速生成组件模板
4. Import Cost ：显示引入第三方包体积，优化打包依赖，好用
   

四、Vue 专属插件

1. Vetur ：Vue2必备，.vue文件语法高亮、提示、格式化，好用
2. Vue Language Features (Volar)：Vue3官方推荐，替代Vetur，支持TS和Composition API
3. Vue VSCode Snippets：快速生成Vue组件、页面、路由等代码片段
4. Auto Close Tag：自动闭合Vue/HTML标签

五、React 专属插件

1. ES7+ React/Redux/React-Native snippets：ES7+React代码片段，一键生成组件、Hooks
2. React Extension Pack：React全家桶插件合集，含语法、格式化、提示全套能力

六、小程序 / UniApp 插件

1. uni-app 小程序代码助手：UniApp标签、属性、API智能提示、高亮
2. Miniprogram：微信小程序wxml/wxss语法支持、格式化、标签补全

七、Git / 开发效率类

1. GitLens --- Git supercharged ：查看代码提交记录、作者、时间，追溯变更，好用
   

2. Git History ：可视化查看Git提交历史、分支对比、文件差异，好用
   

3. Path Intellisense：文件路径智能补全，支持别名路径

4. Alias Resolver：识别webpack/vite路径别名（@/），支持跳转

5. Bracket Pair Color DLW：括号、引号彩色配对，快速定位代码块

八、格式化 & 规范增强

1. EditorConfig for VS Code：统一团队编码格式，跨编辑器一致
2. Stylelint：CSS/SCSS/Less代码规范检查、格式化