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 插件,也欢迎在评论区留言。



相关文章
|
IDE 开发工具 Python
lingma IDE无法使用很多微软官方插件,代码无法点击跳转
当前环境存在以下问题:1. 无法使用微软官方插件 IntelliCode,影响代码智能补全与开发效率;2. 代码中变量点击后无法跳转定义位置(如图所示,Python导入模块无法跳转),此为重大缺陷,请尽快修复,以提升开发体验。这些问题导致的功能缺失,使当前环境与理想开发需求存在一定差距。
1104 2
|
人工智能 JavaScript 前端开发
字节最新AI 版IDE:用Trae开发网站打包信息追踪插件,国产版Cursor表现如何?
本文介绍了如何使用字节最新推出的AI编程工具Trae,通过零代码方式快速开发一款名为`dist-info`的前端插件。该插件能够将Git信息或自定义内容注入HTML文件中,兼容Webpack和Vite项目。开发者只需在浏览器控制台输入`info`,即可轻松查看代码的相关信息。文章详细描述了插件的背景、开发流程、核心代码实现以及优化建议,并展示了如何借助Trae高效完成项目搭建和代码编写。
3526 0
字节最新AI 版IDE:用Trae开发网站打包信息追踪插件,国产版Cursor表现如何?
|
IDE iOS开发 Python
小白如何开始使用通义灵码(含安装IDE、安装灵码插件)
PyCharm 和 IntelliJ IDEA 下载安装及通义灵码插件下载安装说明
16006 10
|
IDE 网络安全 开发工具
IDE之vscode:连接远程服务器代码(亲测OK),与pycharm链接服务器做对比(亲自使用过了),打开文件夹后切换文件夹。
本文介绍了如何使用VS Code通过Remote-SSH插件连接远程服务器进行代码开发,并与PyCharm进行了对比。作者认为VS Code在连接和配置多个服务器时更为简单,推荐使用VS Code。文章详细说明了VS Code的安装、远程插件安装、SSH配置文件编写、服务器连接以及如何在连接后切换文件夹。此外,还提供了使用密钥进行免密登录的方法和解决权限问题的步骤。
12274 0
IDE之vscode:连接远程服务器代码(亲测OK),与pycharm链接服务器做对比(亲自使用过了),打开文件夹后切换文件夹。
|
IDE API 开发工具
通过IDE插件体验阿里云OpenAPI的高效集成, 精品礼品等你来拿!
轻量级的开放API工具——Alibaba Cloud Developer Toolkit及Alibaba Cloud API Toolkit。这些插件支持快速查阅阿里云产品的开放API,提供API调试与SDK示例生成等功能,帮助开发者轻松集成阿里云服务。您可通过JetBrains Marketplace或VS Code Marketplace搜索安装,完成身份验证后即刻体验。欢迎分享您的使用反馈,有机会获得精美礼品!
|
人工智能 IDE API
灵动指尖 :阿里云智能编码插件 更好的为IDE内置社区服务
灵动指尖 :阿里云智能编码插件 更好的为IDE内置社区服务
2762 0
|
IDE 前端开发 搜索推荐
5款超好用的在线IDE,媲美vscode,可以直接编写前端构建化项目,而无需在本地下载依赖包,非常适合学习、demo、原型开发
5款超好用的在线IDE,媲美vscode,可以直接编写前端构建化项目,而无需在本地下载依赖包,非常适合学习、demo、原型开发
7664 0
|
前端开发
VSCode中自带插件Emmet的用法
Emmet 是一个强大的工具,集成在 Visual Studio Code (VSCode) 中,可以大大提高编写 HTML 和 CSS 的效率。以下是如何使用 Emmet 插件的一些基本方法
371 4
|
传感器 前端开发 JavaScript
前端开发者必备的VS Code插件推荐
前端开发者必备的VS Code插件推荐
|
Web App开发 XML 传感器
VSCode 开发Vue必备插件
VSCode 开发Vue必备插件
1338 0

热门文章

最新文章