主题类
Dracula Official
德古拉的官方主题,最经典的主题之一,也是我的最爱。
下载地址:marketplace.visualstudio.com/items?itemN…
Material Theme
Material Theme 提供了 Material 风格的主题,让代码看上去更酷。
下载地址:marketplace.visualstudio.com/items?itemN…
One Dark Pro
如果你是 Atom 的用户,或者是喜欢 Atom 主题的开发者,可以尝试这个主题插件。
下载地址:marketplace.visualstudio.com/items?itemN…
vscode-icons
我们在浏览文件夹时,如果在文件前面有一个图标,那么会非常方便的区分它们。
VSCode Icons 这个插件就是来做这件事儿的!
VSCode 默认的目录结构长这样:
使用 VSCode Icons 后图标变成这样了:
下载地址:marketplace.visualstudio.com/items?itemN…
file-icons
另一款 icons 主题插件。
下载地址:marketplace.visualstudio.com/items?itemN…
Material Icon Theme
几乎是最全的图标主题插件。
支持这么多种文件:
支持这么多种文件夹:
下载地址:marketplace.visualstudio.com/items?itemN…
工具类
todo-tree
todo tree 可以通过 TODO 和 FIXME 注释来管理项目。
我们可以快速查看被打了注释的文件。
下载地址:marketplace.visualstudio.com/items?itemN…
vscode-peacock
当我们同时运行多个 VSCode 窗口时,我们可以给每个窗口设置不同的颜色,以此来区分不同的项目。
它默认支持的颜色有 Angular 红、微软蓝、JS 黄、mandalorian 蓝、Node 绿、React 蓝等等。
下载地址:marketplace.visualstudio.com/items?itemN…
Quokka.js
当我们想快速验证某段 JS 或者 TS 代码时,可以使用这个插件。
它提供了一个 playground,可以更好的验证代码的逻辑。
下载链接:marketplace.visualstudio.com/items?itemN…
rest-client
测试 API 的方式有很多,比如重量级的 PostMan,轻量级的 curl。但是它们在 VSCode 中使用起来都不是那么方便。
REST Client 就是一个很好的插件,可以帮我们在 VSCode 中轻松测试 API。
下载地址:marketplace.visualstudio.com/items?itemN…
EditorConfig for VS Code
当我们的项目使用多个编辑器工具开发时,想要统一代码风格,就需要配置不同工具的配置文件。
这个工具可以让我们只需要编写一个.editorconfig 就可以在所有编辑器中通用这些规则。
下载地址:marketplace.visualstudio.com/items?itemN…
Git Lens
虽然 VSCode 有内置的 Git 功能,但是还不够强大。
Git Lens 增加了 Git 的功能,我们可以在每一行代码中查看提交信息,它还可以比较不同的 commit 差异,以及一些其他有用的 Git 功能。
下载地址:marketplace.visualstudio.com/items?itemN…
Open in GitHub
可以快速在 Github 中打开项目、文件、Action、PR 等。
下载地址:marketplace.visualstudio.com/items?itemN…
open in browser
支持快速在浏览器中打开 HTML 文件。
在 HTML 文件中右键,菜单中会有两个选项,或者使用对应的快捷键。
下载地址:marketplace.visualstudio.com/items?itemN…
Live Server
当我们修改 html 的内容,想让浏览器和代码保持一致时,需要这个插件。
它会在本地启动一个服务器,监听文件的改动,并刷新浏览器。
在 HTML 文件中右键,菜单中会有两个选项,或者使用对应的快捷键。
下载地址:marketplace.visualstudio.com/items?itemN…
Live Preview
它可以在 VSCode 中实时预览 HTML。
但是它不支持 React、Angular 这类框架开发的应用。
marketplace.visualstudio.com/items?itemN…
Project Manager
当我们有多个项目时,可以通过这个插件管理项目,快速切换项目、标签等功能。
下载地址:marketplace.visualstudio.com/items?itemN…
Live Share
你想要将自己的代码分享给别人进行实时地协作编辑和调试?这个插件可以将任何编程语言开发的项目或者任何类型的项目与其他人共享。对方可以直接在你的环境下编写代码,不需要额外安装任何环境或者 SDK。
甚至可以直接在 Web 中协作编辑!
下载地址:marketplace.visualstudio.com/items?itemN…
Markdown PDF
虽然名字叫做 markdown PDF,但是其实可以将 markdown 导出为各种格式的文件。
支持这么多种导出格式。
下载地址:marketplace.visualstudio.com/items?itemN…
Markdown Preview Github Styling
以 Github 的样式来预览 Markdown 文件。
下载地址:marketplace.visualstudio.com/items?itemN…
总结
介绍了那么多,快去打造最快速、最稳定、最适合你的 IDE 吧!
如果这篇文章对你有所帮助,欢迎点赞。
如果你有更多实用的,有价值的 VSCode 插件,也欢迎在评论区留言。