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



相关文章
|
1月前
|
IDE 开发工具 Python
lingma IDE无法使用很多微软官方插件,代码无法点击跳转
当前环境存在以下问题:1. 无法使用微软官方插件 IntelliCode,影响代码智能补全与开发效率;2. 代码中变量点击后无法跳转定义位置(如图所示,Python导入模块无法跳转),此为重大缺陷,请尽快修复,以提升开发体验。这些问题导致的功能缺失,使当前环境与理想开发需求存在一定差距。
|
8月前
|
自然语言处理 API C++
阿里通义推出SmartVscode插件,自然语言控制VS Code,轻松开发应用,核心技术开源!
SmartVscode插件深度解析:自然语言控制VS Code的革命性工具及其开源框架App-Controller
1225 1
阿里通义推出SmartVscode插件,自然语言控制VS Code,轻松开发应用,核心技术开源!
|
5月前
|
机器学习/深度学习 人工智能 自然语言处理
|
3月前
|
JavaScript 前端开发 程序员
甚至用不了五分钟就能学会vscode插件开发
本文介绍了VSCode插件的开发流程,从创建项目到最终发布。首先通过安装`yo`和`generator-code`脚手架工具初始化项目,选择JavaScript语言配置基础信息。接着,在`extension.js`中实现业务逻辑,例如将中文“变量”替换为“var”。通过F5进入调试模式验证功能。完成后使用`vsce`工具进行打包,解决可能遇到的版本不兼容或README文档问题。最后生成`.vsix`文件,可通过VSCode的“从VSIX安装”加载插件,实现开发闭环。进一步可将插件发布至官方市场供更多开发者使用。
|
5月前
|
人工智能 自然语言处理 前端开发
通义灵码插件在VSCode中的运用
借助通义灵码插件在VSCode构建新闻网,实现效率与智能的融合。VSCode作为前端开发的“瑞士军刀”,提供实时预览、智能辅助和高效管理功能;通义灵码插件通过自然语言交互生成代码,简化复杂任务并优化代码质量。两者结合形成从设计到部署的高效闭环,大幅减少基础编码时间,降低开发门槛,助力开发者聚焦业务逻辑与创新。
|
5月前
|
人工智能 小程序 程序员
【视频测评 DEMO 参考】VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
434 8
|
5月前
|
人工智能 JavaScript 前端开发
字节最新AI 版IDE:用Trae开发网站打包信息追踪插件,国产版Cursor表现如何?
本文介绍了如何使用字节最新推出的AI编程工具Trae,通过零代码方式快速开发一款名为`dist-info`的前端插件。该插件能够将Git信息或自定义内容注入HTML文件中,兼容Webpack和Vite项目。开发者只需在浏览器控制台输入`info`,即可轻松查看代码的相关信息。文章详细描述了插件的背景、开发流程、核心代码实现以及优化建议,并展示了如何借助Trae高效完成项目搭建和代码编写。
549 0
字节最新AI 版IDE:用Trae开发网站打包信息追踪插件,国产版Cursor表现如何?
|
7月前
|
IDE iOS开发 Python
小白如何开始使用通义灵码(含安装IDE、安装灵码插件)
PyCharm 和 IntelliJ IDEA 下载安装及通义灵码插件下载安装说明
6981 8
|
8月前
|
开发工具 C++ git
利用VS Code提升开发效率的五大插件推荐
本文推荐了五款能显著提升开发效率的VS Code插件:ESLint用于代码质量和风格检查;Prettier自动格式化代码;GitLens增强Git功能;Live Server提供前端实时预览;Docker支持容器管理。
|
网络协议 IDE 网络安全
GoLand远程开发IDE:使用SSH远程连接服务器进行云端编程
GoLand远程开发IDE:使用SSH远程连接服务器进行云端编程
1428 0

热门文章

最新文章