50+VSCode插件,帮你打造地表最强IDE!(二)

简介: 50+VSCode插件,帮你打造地表最强IDE!

主题类

Dracula Official


德古拉的官方主题,最经典的主题之一,也是我的最爱。

image.png

下载地址:marketplace.visualstudio.com/items?itemN…


Material Theme


Material Theme 提供了 Material 风格的主题,让代码看上去更酷。

image.png

下载地址:marketplace.visualstudio.com/items?itemN…


One Dark Pro


如果你是 Atom 的用户,或者是喜欢 Atom 主题的开发者,可以尝试这个主题插件。

image.png

下载地址:marketplace.visualstudio.com/items?itemN…


vscode-icons


我们在浏览文件夹时,如果在文件前面有一个图标,那么会非常方便的区分它们。

VSCode Icons 这个插件就是来做这件事儿的!

VSCode 默认的目录结构长这样:

image.png

使用 VSCode Icons 后图标变成这样了:

image.png

下载地址:marketplace.visualstudio.com/items?itemN…


file-icons


另一款 icons 主题插件。

image.png

下载地址:marketplace.visualstudio.com/items?itemN…


Material Icon Theme


几乎是最全的图标主题插件。

支持这么多种文件:

image.png

支持这么多种文件夹:

image.png

下载地址:marketplace.visualstudio.com/items?itemN…


工具类

todo-tree


todo tree 可以通过 TODO 和 FIXME 注释来管理项目。

我们可以快速查看被打了注释的文件。

image.png

下载地址:marketplace.visualstudio.com/items?itemN…


vscode-peacock


当我们同时运行多个 VSCode 窗口时,我们可以给每个窗口设置不同的颜色,以此来区分不同的项目。

它默认支持的颜色有 Angular 红、微软蓝、JS 黄、mandalorian 蓝、Node 绿、React 蓝等等。

image.png

image.png

下载地址:marketplace.visualstudio.com/items?itemN…


Quokka.js


当我们想快速验证某段 JS 或者 TS 代码时,可以使用这个插件。

它提供了一个 playground,可以更好的验证代码的逻辑。

image.png

下载链接:marketplace.visualstudio.com/items?itemN…


rest-client


测试 API 的方式有很多,比如重量级的 PostMan,轻量级的 curl。但是它们在 VSCode 中使用起来都不是那么方便。

REST Client 就是一个很好的插件,可以帮我们在 VSCode 中轻松测试 API。

image.png

下载地址:marketplace.visualstudio.com/items?itemN…


EditorConfig for VS Code


当我们的项目使用多个编辑器工具开发时,想要统一代码风格,就需要配置不同工具的配置文件。

这个工具可以让我们只需要编写一个.editorconfig 就可以在所有编辑器中通用这些规则。

下载地址:marketplace.visualstudio.com/items?itemN…


Git Lens


虽然 VSCode 有内置的 Git 功能,但是还不够强大。

Git Lens 增加了 Git 的功能,我们可以在每一行代码中查看提交信息,它还可以比较不同的 commit 差异,以及一些其他有用的 Git 功能。

image.png

下载地址:marketplace.visualstudio.com/items?itemN…


Open in GitHub


可以快速在 Github 中打开项目、文件、Action、PR 等。

image.png

下载地址:marketplace.visualstudio.com/items?itemN…


open in browser


支持快速在浏览器中打开 HTML 文件。

在 HTML 文件中右键,菜单中会有两个选项,或者使用对应的快捷键。

image.png

下载地址:marketplace.visualstudio.com/items?itemN…


Live Server


当我们修改 html 的内容,想让浏览器和代码保持一致时,需要这个插件。

它会在本地启动一个服务器,监听文件的改动,并刷新浏览器。

在 HTML 文件中右键,菜单中会有两个选项,或者使用对应的快捷键。

image.png

下载地址:marketplace.visualstudio.com/items?itemN…


Live Preview


它可以在 VSCode 中实时预览 HTML。

但是它不支持 React、Angular 这类框架开发的应用。

image.png

marketplace.visualstudio.com/items?itemN…


Project Manager


当我们有多个项目时,可以通过这个插件管理项目,快速切换项目、标签等功能。

image.png

下载地址:marketplace.visualstudio.com/items?itemN…


Live Share


你想要将自己的代码分享给别人进行实时地协作编辑和调试?这个插件可以将任何编程语言开发的项目或者任何类型的项目与其他人共享。对方可以直接在你的环境下编写代码,不需要额外安装任何环境或者 SDK。

甚至可以直接在 Web 中协作编辑!

image.png

下载地址:marketplace.visualstudio.com/items?itemN…


Markdown PDF


虽然名字叫做 markdown PDF,但是其实可以将 markdown 导出为各种格式的文件。

支持这么多种导出格式。

image.png

下载地址:marketplace.visualstudio.com/items?itemN…


Markdown Preview Github Styling


以 Github 的样式来预览 Markdown 文件。

image.png

下载地址:marketplace.visualstudio.com/items?itemN…


总结


介绍了那么多,快去打造最快速、最稳定、最适合你的 IDE 吧!

如果这篇文章对你有所帮助,欢迎点赞。

如果你有更多实用的,有价值的 VSCode 插件,也欢迎在评论区留言。



相关文章
|
2月前
|
自然语言处理 API C++
阿里通义推出SmartVscode插件,自然语言控制VS Code,轻松开发应用,核心技术开源!
SmartVscode插件深度解析:自然语言控制VS Code的革命性工具及其开源框架App-Controller
|
1月前
|
IDE iOS开发 Python
小白如何开始使用通义灵码(含安装IDE、安装灵码插件)
PyCharm 和 IntelliJ IDEA 下载安装及通义灵码插件下载安装说明
1441 1
|
2月前
|
开发工具 C++ git
利用VS Code提升开发效率的五大插件推荐
本文推荐了五款能显著提升开发效率的VS Code插件:ESLint用于代码质量和风格检查;Prettier自动格式化代码;GitLens增强Git功能;Live Server提供前端实时预览;Docker支持容器管理。
|
3月前
|
自然语言处理 JavaScript 开发者
通义灵码插件:VSCode 的智能编程助手
通义灵码插件:VSCode 的智能编程助手
1286 3
|
3月前
|
前端开发 JavaScript 编译器
2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
【10月更文挑战第11天】2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
991 0
2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
|
3月前
|
IDE 网络安全 开发工具
IDE之vscode:连接远程服务器代码(亲测OK),与pycharm链接服务器做对比(亲自使用过了),打开文件夹后切换文件夹。
本文介绍了如何使用VS Code通过Remote-SSH插件连接远程服务器进行代码开发,并与PyCharm进行了对比。作者认为VS Code在连接和配置多个服务器时更为简单,推荐使用VS Code。文章详细说明了VS Code的安装、远程插件安装、SSH配置文件编写、服务器连接以及如何在连接后切换文件夹。此外,还提供了使用密钥进行免密登录的方法和解决权限问题的步骤。
1637 0
IDE之vscode:连接远程服务器代码(亲测OK),与pycharm链接服务器做对比(亲自使用过了),打开文件夹后切换文件夹。
|
5月前
|
前端开发 Go
vscode10大常用插件
本文介绍了前端开发中常用的工具及VSCode必备插件。推荐使用VSCode作为入门工具,并介绍了WebStorm和HBuilder等其他选项。VSCode插件包括:Open-In-Browser、live-server、Beautify、Code Runner、Image Preview、Path Intellisense、Turbo Console Log、css-auto-prefix、Bracket Pair Colorizer 和 Auto Rename Tag,这些插件能够显著提升开发效率和代码质量。此外,还提供了录制Gif图的工具GifCam。
186 5
|
4月前
|
人工智能 C++ 开发者
verilog vscode 与AI 插件
【9月更文挑战第11天】在Verilog开发中,使用Visual Studio Code(VS Code)结合AI插件能显著提升效率。VS Code提供强大的编辑功能,如语法高亮、自动补全和代码格式化;便捷的调试功能,支持多种调试器;以及丰富的插件生态。AI插件则可自动生成代码、优化现有代码、检测并修复错误,还能自动生成文档。常用插件包括Verilog AI Assistant和Verilog Language Server,可根据需求选择合适的工具组合,提高开发效率和代码质量。
301 2
|
5月前
|
前端开发 IDE 开发工具
OpenSumi问题之OpenSumi 对于 VS Code 插件生态要如何支持
OpenSumi问题之OpenSumi 对于 VS Code 插件生态要如何支持
143 6
|
5月前
|
JSON 前端开发 JavaScript
这 2 个插件,让你的 vscode更牛逼
这 2 个插件,让你的 vscode更牛逼