【配置】VS Code常用插件整理-2024版
1272 字
6 分钟
【配置】VS Code常用插件整理-2024版
Visual Studio Code 是个牛逼的编辑器，启动非常快，我已经抛弃 WebStorm Sublime 了。 支持各种语言，相比其他 IDE，轻量级完全可配置还集成 Git 感觉非常的适合前端开发。 所以我仔细研究了一下文档未来可能会作为主力工具使用。
虽然习惯了 N 久的快捷键，没法，习惯什么的是吧，习惯下就好了所以 官方快捷键大全 ，看看这个就好，好在现在快捷键熟悉得差不多了，不会比 sublime 慢多少
家里电脑之前杂七杂八东西装太多 = = 太卡，遂重装了系统，各种环境重新搭一遍。顺便更新这篇吧
基础功能扩展
- One monokai 因为我喜欢，我放在第一了
- vscode-icons
- output colorizer 让 log 文件变得五颜六色
- Color Highlight，识别代码中的颜色，包括各种颜色格式；
- Color Manager 调色盘
- Bracket Pair Colorizer，识别代码中的各种括号，并且标记上不同的颜色，方便你扫视到匹配的括号，在括号使用非常多的情况下能环节眼部压力，编辑器快捷键固然好用，但是在临近嵌套多的情况下却有些力不从心；
- Project Manager，项目管理，让我们方便的在命令面板中切换项目文件夹，当然，你也可以直接打开包含多个项目的父级文件夹，但这样可能会让 VSCode 变慢；
代码检查 / 格式化
- Prettier 代码格式化，这两个选一个就好
- Better Comments 为注释增加几种风格的标注
- Better Align md 和 js 里的变量、注释更好的对齐
- Conventional Commits 把 Conventional 拿到 vscode 了，对个人来说这样提交更快
- editorconfig for vscode 支持 .editorconfig
- ESlint 代码检查工具不解释了
- ESLint Chinese Rules 同上
- html snippets
- javascript code snippets / Super Console 我换成这个了
代码片段
- Auto Close Tag，适用于 JSX、Vue、HTML，在打开标签并且键入
</的时候，能自动补全要闭合的标签； - Auto Rename Tag，适用于 JSX、Vue、HTML，在修改标签名时，能在你修改开始（结束）标签的时候修改对应的结束（开始）标签，帮你减少 50% 的击键；
- auto-header 快速为文件加注释头
- Path Intellisense，文件路径补全，在你用任何方式引入文件系统中的路径时提供智能提示和自动完成；
- NPM Intellisense，NPM 依赖补全，在你引入任何 node_modules 里面的依赖包时提供智能提示和自动完成；
- IntelliSense for CSS class names，CSS 类名补全，会自动扫描整个项目里面的 CSS 类名并在你输入类名时做智能提示；
- Auto Comment Blocks 效率注释
编码效率
- Auto Import 查找帮快速 import
- HTML-Essentials Web 开发插件包
- embrace 快速的在选中代码两边添加各种引号、括号，不用来回移动光标
- Bracket Pair Colorizer 更方便看括号，作用域等
- Code Spell Checker 检查英语拼写是否合法. 选装… 一堆报错
- Code Runner 名副其实的代码运行插件，支持数十种语言，在不离开代码编辑器的前提下通过命令面板可直接执行代码，并查看输出
- path autocomplete 路径补全
- 别名路径跳转 就是搜索中文名
- Tailwind CSS IntelliSense 如果用 tailwind 肯定要装
项目管理、功能增强
- Code Runner 直接跑 js 代码，node.js
- CodeSnap 复制代码生成图片
- file peek 可以看到对应文件的代码片段
- Svg Preview svg 预览
- Settings Sync 基于 Gist 实现 VSCode 用户配置、快捷键配置、已安装插件列表等的备份和恢复功能，配置过程有详细精确的操作步骤文档。生成的备份 Gist 默认是私密的，如果你想设置为共享的，也可以一键切换。
- Git Lens 把 VSCode 结合 Git 的使用体验优化到了极致，能让我们在不离开编辑器，不执行任何命令的情况下知晓光标所在位置代码的修改时间、作者信息等。
- Code Outline 能在单独窗口中列出当源代码中的各种符号，比如变量名、类名、方法名等，并支持快速跳转，有点类似于 Vim 里面的 ctags，翻看老代码、开源项目代码时非常有用。
- Project Management 可简单切换多个项目
辅助工具
- A-super-translate 英语小白必备
- any-rule 很多常用正则
- Codelf 变量起名神器
- can i use 浏览器兼容性检查
- Debugger for Chrome 允许像 chrome 一样在 vs code 里调试
- partial diff 同名，可以查看文件间的差异
- todo highlight 待做项高亮，且可查看统计
- Version lens 查看 package 依赖，且帮更新，需要自行 npm install
- VSCode Map Preview 地图坐标信息格式文件，就可就行预览
- vscode-fileheader 自行生成 file header
- Super Console 一个前端使用的日志打印工具
Vue
- Vue VS Code Extension Pack 一个扩展包，包括 10 个插件
- Vite 不解释，配套 Vue3
- Vitest Vite 的单元测试扩展
React
- ES7+React 开发必备
支持与分享
如果这篇文章对你有帮助，欢迎分享给更多人或赞助支持！
【配置】VS Code常用插件整理-2024版
https://blog.fridolph.top/posts/2024-01-13__vscode-ext/ 相关文章 智能推荐
1
「部署认知」一、前端转全栈必会的 Docker + CI/CD 20% 核心
工程化 2026-04-17
2
「部署复盘」二、my-resume 上线实录：从踩坑到方法论
工程化 2026-04-14
3
【自学AI】02 AI Agent Skills 深度解析（下）：前端开发实战指南
工程化 2026-01-30
4
【自学AI】01 AI Agent Skills 深度解析（上）：从概念到架构
工程化 2026-01-28
5
十条经过实战检验的 TypeScript Monorepo 最佳实践
工程化 2026-01-19
随机文章 随机推荐