20个超实用的VS Code扩展(2024年版)

Prettier

Prettier

Prettier 是支持 Python、Java、JavaScript 等多种语言的代码格式化工具。特别适合用来保持代码的一致和整洁。

Prettier 支持高度配置,可以按你喜欢的方式格式化代码。例如,添加或删除行末分号,将单引号转换为双引号等操作都可以通过设置实现。

在 VS Code 的设置页面中,还可以设置在保存时自动格式化代码,以及格式化代码的快捷键。

并且,Prettier 还可以与 ESLint 集成。

GitHub Copilot

Copilot

对于 Copilot 这个扩展,我相信大家都已经耳熟能详了。它是由 OpenAI 的 GPT-3 提供支持的 AI 编程助手,可以帮助你更快地编写代码。虽然它是 GitHub 官方出品,可以说是这一领域的王者,可它还远远谈不上完美,但它已经可以提供完整的函数,甚至能提出对整个文件的建议。

你不仅可以用它来提高写代码的效率,还可以用它生成示例数据、测试代码,甚至编写代码文档。

不过,要小心可千万别过度依赖它,还是要真正理解你正在编写的代码,掌握扎实的编程基本功。

与之类似的还有百度的 Comate 和阿里的通义灵码,当然,类似的 AI 编程助手还有很多,在此,呆鸟就不一一介绍了。

Comate
通义灵码

Live Server

Live Server

Live Server 是 Web 开发必备的扩展,尤其是在处理 HTML、CSS 和 JavaScript 时的必备神器。

Live Server 是一个本地的开发服务器,当代码发生变化时会自动刷新浏览器。你可以通过快捷键或右键单击 HTML 文件选择 "Open with Live Server",或单击 VS Code 窗口底部的 "Go Live" 按钮启动 Live Server。

Multiple cursor case preserve

Multiple cursor case preserve

这是一个很小众但非常实用的扩展。如果你经常要更改多个同样的文本,那你一定会喜欢这个扩展。

在 VS Code 中,使用快捷键 Ctrl+DCtrl+Shift+L 可以选择文件中所有相同的文本(注意,在选择时可以不区分大小写)。

在更改这些文本时,VS Code 不识别原有文本的大小写,只按照新输入的文本改写,但这个扩展可以让修改后的文本保留原有文本的大小写,非常实用。

Multiple cursor case preserve 示例

Git History

Git History

Git History 可以查看文件的历史记录,以及所有提交、提交者和每次提交的更改内容。这对团队项目来说非常有用,可以跟踪文件的变化。

GitLens

GitLens

GitLens 提供更加详细的文件历史记录,包括提交图表,代码的提交者及提交时间。它会直接在代码中添加文本,在团队项目开发中非常实用。

Code Runner

Code Runner

Code Runner 支持在终端窗口中运行 Python、Java、C、C++、Go、R 等多种语言的代码。它适合运行小段代码片段,无须设置整个项目。

Markdown Preview Enhanced

Markdown Preview Enhanced

如果你经常编写 Markdown 文件,那一定要试一下 Markdown Preview Enhanced 这个扩展。它提供实时预览,并提供了生成文档目录、PDF 导出、语法高亮和预览自定义等诸多功能。它现在是呆鸟用 VS Code 编写 Markdown 文档的首选扩展。

Console Ninja

Console Ninja

Console Ninja 可以直接在 VS Code 中显示 console log 的结果,在处理 JavaScript 和 React 的代码时,再也不用打开控制台啦。

image.png

Regex Snippets

Regex Snippets

Regex Snippets 这个扩展太可爱了,有了它,你再也不用去记那些如同天书的正则表达式了。

Regex Snippets 提供了常见邮箱验证、URL、密码、日期格式等 60 多种代码片段,足够你用了。

Regex Snippets 示例

Polacode

Polacode

Polacode 支持在 VS Code 中直接生成代码截图。

虽然需要将代码复制粘贴到 Polacode 的窗口中,但用它截取的代码图片非常漂亮,还可以适用各种代码主题,非常适合在公众号文章或博客中分享代码。(虽然我们还有各种公号排版工具,但这也是一种途径嘛)

Polacode 示例

Code Spell Checker

Code Spell Checker

如果你也像呆鸟一样,母语不是英语,或者你虽然是英语母语国家的人,但拼写不好,那么 Code Spell Checker 可是能帮你好大的忙,尤其是在输入变量名的时候。

它能够高亮代码中的拼写错误,并且支持自定义词典,可以忽略某些你认为是对的单词,还可以选择不同的词典。此外,它还可以针对工作区和用户分别定义词典。

总之,有了它,你就不用再担心写错单词,贻笑大方了。

Code Spell Checker 示例

Document This

Document This

Document This 会为 JavaScript 或 TypeScript 函数生成 JSDoc 注释。你要做的只是调用一下快捷键,或在函数上方键入 /** 就可以自动生成注释,真是懒人神器。这样,你就可以保持良好的代码注释习惯,还能学习怎样编写优秀的 JSDoc 注释。

ChatGPT

ChatGPT

话说刚开始看到这个扩展声称的免这免那的广告,呆鸟是不信的,天上的馅饼就这么砸我脑袋上了?但本着有枣没枣打三杆子的准则,呆鸟还是亲自为大家测试了一下,还真能用!

ChatGPT 这个扩展可以让你直接在 VS Code 中向 GPT 提问、生成代码、解释代码、翻译英文等等。如果再结合前面提到的 Copilot,可以大大提高你编写代码的效率和质量。

貌似终于可以不用加班了(嗨嗨,梦该醒了啊)。

ChatGPT 功能示例

Peacock

Peacock

如果你同时开发多个项目,例如前后端分离的全栈项目,那就需要同时打开多个 VS Code 窗口。窗口多了,分不清楚这些多胞胎,怎么办,头疼也没用。

这个时候,你就可以用 Peacock 为不同的项目更改窗口的主题颜色,还是蛮实用的。

看这五颜六色的,还真像只孔雀。

Peacock 示例

Postman

Postman

Postman 推出了 VS Code 扩展,不论你使用 Java(SpringBoot)、 Python(Django、FastAPI),还是 Node.js(express)开发 API,你都可以直接在 VS Code 中测试 API 了。注意,使用它需要你注册一个免费的 Postman 账户。

REST Client

REST Client

REST Client 是 Postman 的替代品,它通过创建 HTTP 文件来编写和运行请求,并在输出窗口中查看响应。用它来测试 API 也是个不错的选择。

此外,还有一个轻量级的 Thunder Client,也颇受大家的喜爱。

Thunder Client

Bookmarks

Bookmarks

Bookmarks 可以用来管理大型项目的文件,你可以在文件中设置书签并在书签之间跳转。还可以通过命令面板查看所有书签,或者使用侧边栏的图标查看自己定义的书签。

Codiumate

Codiumate

Codiumate 可以用来测试代码,它还提供了代码解释、代码摘要、示例用法、代码分析等功能。

你需要先注册一个免费账户才能使用 Codiumate。呆鸟建议你尝试一下,它可是一个能确保你的代码顺利运行的强大工具。

codium ai 官网

Quokka

Quokka

如果你只使用 Python,或根本不需要编写 JavaScript 代码,那你可以忽略这个扩展了,因为 Quokka 是用来直接在 VS Code 中代码编辑区显示 JavaScript 和 TypeScript 代码运行结果的扩展,不支持 Python 和其他语言。但如果你编写 JS 和 TS 代码,那你一定要安装一下 Quokka,即便是免费版的功能也很香哦。

Quokka 示例

对呆鸟的文章感兴趣的同学,可以关注《Python学研大本营》,里面有更多好文等你哦。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,651评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,468评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,931评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,218评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,234评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,198评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,084评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,926评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,341评论 1 311
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,563评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,731评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,430评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,036评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,676评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,829评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,743评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,629评论 2 354

推荐阅读更多精彩内容