25 个提升开发幸福感的 VSCode 扩展

发表于 4年以前  | 总阅读数:500 次

❝译原文:https://medium.com/better-programming/how-to-use-vscode-like-a-pro-e120c428f45f[1] 作者:Ann Adaya 译:图雀社区 ❞

拥有一个好的文本编辑器对你的开发效率、学习曲线和时间管理都很重要。


为什么是 VSCode?

VSCode 可能是目前排名第一的代码编辑器,我喜欢它。

我认为它如此受欢迎的原因很简单,因为 VSCode 提供了每个开发者想要的功能,包括他们甚至不知道自己需要的功能。这就是 VSCode 的秘密魅力——它总能让你大吃一惊。

我相信抓住一个人心的最好方法之一就是帮助他们在知道自己需要什么之前就意识到自己需要什么。实际上,这是市场营销中最强大的驱动力之一,而 VSCode 做得非常好。

大多数 VSCode 爱好者都是 JavaScript 开发人员ーー VSCode 是为现代技术而创建的。如今,流行的 JavaScript 框架非常适合 VSCode ーー它拥有你需要的所有东西。

在选择文本编辑器的时候,一定要选择最新最好的。技术正在迅速变化,你不想落后。想要成为一个伟大的开发人员,时间应该永远站在你这边。

我并不是说你应该从一种语言跳到另一种语言,或者从一个框架跳到另一个框架---- 这太疯狂了。你需要的是保持更新,保持敏锐,了解最新的信息,并将它们与你现在正在使用的信息进行比较,了解其中的差异,利弊,观察支持和社区的发展,因为稳定性也很重要。你会惊讶地发现你的生产力会如此之高!

VSCode 拥有一个庞大的开源社区。它的增长和潜力是无限的,在未来学习如何编码和编码本身将会更容易。


  1. 自动闭合 HTML 标签

拥有这种扩展是必须的。编写代码已经足够困难和疯狂,而不必仅仅因为缺少一个关闭标记 div / div 而花大量时间查找错误

你可以以后再谢我!

它所做的是自动添加刚才添加的开始标记的结束括号,然后将鼠标光标定位在标记之间。很酷,对吧?

自动闭合 HTML 标签插件地址[2]

  1. VSCode 集成终端

将命令 / 终端放在 VSCode 编辑器中不仅会使您的生活更加轻松,而且还会节省空间。感谢 VSCode,让你的终端派上用场。

Visual Studio 代码中的集成终端下载地址[3]


  1. 代码对着色器

对于大多数开发人员来说,处理括号是一种痛苦,尤其是在处理大型项目时。如果你有意大利面条式的代码,那就更糟糕了。相信我,Bracket Pair Colorizer 会减轻你所有的压力。

由于有大量嵌套的长代码,尤其是在使用 Javascript 时,几乎不可能确定哪些括号彼此匹配。使用对 Bracket Pair Colorizer 可以帮助您更容易地找到开始和结束。它们是彩色的这一事实使您的代码更具可读性。下载这个!

是的,不客气!

Bracket Pair Colorizer 插件地址[4]

4.ESLint/TSLint

这个扩展的主要功能是自动格式化代码,以便在整个团队中保持一致的格式。ESLint 也可以配置为自动格式化你的代码,每当你出现错误,它都会向你发出一连串的警告。

它有数百万的下载量是有原因的。

ESLint下载地址[5]

  1. 代码拼写检查器

如果你像我一样不是以英语为母语的人,英语不是你的第一语言,甚至可能不是你的第二语言,那么代码拼写检查器是非常有用的,保持你的代码免遭打字错误和错误。而且没有人是完美的,不管你的英语是否流利,拼写错误是不可避免的ーー你不想花时间去寻找它们,特别是如果你有意大利面条式的代码。

代码拼写检查器[6]

  1. 同步 VSCode 设置

如果您像我一样使用多台机器,您会发现这个扩展很有用。设置同步使您的所有计算机 / 笔记本电脑都能保持一样的 VSCode 设置。

如果你是一个同时在办公室和家庭电脑上工作的开发人员,那么你基本上将在不同的工作站上工作。手动更改设置是很费时间的,因为说实话,我们需要根据我们正在做的项目不时地更改设置,所以为了减轻编程的压力,我建议你使用这个扩展,这样你所做的所有更改都会自动同步到你所有的机器和工作站上。

同步设置下载地址[7]

  1. Prettier

在前面,我列出了 ESLint,它可以帮助您自动格式化一致的代码,并显示一些警告和错误。

作为一个 React / Native 开发人员,保持我的代码干净和适当对齐是必须的ーー这是不可协商的。为了更好地阅读代码,将其适当缩进和分隔是一个优先考虑的问题,尤其是在处理长时间编写的代码时ーー样式、函数和处理程序的分隔非常关键,不仅对你而言如此,对你的同事而言也是如此。

这是超级容易设置,当你保存时,它会自动格式化代码。

prettier / prettier-vscode下载地址[8]

  1. Material Icon Theme

这个扩展为你的文件列表提供了漂亮可爱的图标。如果这个文件是一个 JavaScript,那么它将在文件名旁边包含一个 JavaScript 图标。如果你更多的是一个看重审美的开发者,那么这个扩展就是为你准备的。它被成千上万的用户广泛使用。

Material Icon Theme 下载地址[9]

  1. Path Intellisense

这个扩展是我生活中不可或缺的。相信我,这会节省你很多时间。我很健忘,作为一个拥有大量组件、扩展、包(特别是 React 格式)的前端开发人员,我需要一些东西来帮助我处理文件路径。处理大型项目是疯狂的,Path Intellisense 是你最好的朋友。当您尝试并在引用中键入路径时,Intellisense 将自动为您填写或显示建议。

Path Intellisense还可以帮助自动完成所有的隐藏文件。

Path Intellisense下载地址[10]

  1. 浏览器预览

这个扩展对于前端开发人员来说是必须的。下载这个浏览器预览插件,这样你就可以在你的 VSCode 中完成所有的工作,而不是打开另一个窗口让你的 Chrome 浏览器看到你在代码中所做的改变。这会显示你的代码的浏览器预览,所以不必再切换到你的浏览器去查看哪怕是很小的变化。它帮助你节省时间和空间。

浏览器预览下载地址[11]

  1. Chrome 调试器

这是我最喜欢和最常用的 VSCode 扩展。作为一个前端 web 和移动开发者,Debugger for Chrome 帮助了我很多。特别是对于 JavaScript 开发人员来说,这样可以节省大量的时间来做一些小的改变。它对调试非常有帮助ーー它可以帮助你很快地解决和捕捉错误。

从发现错误所在的行和函数开始,直到看到其数据处理,该控制台都很强大。

Chrome 的调试器[12]

  1. Javascript (ES6)代码片段

如果你是一个 JavaScript 开发者,这将是你最好的朋友。不管你使用什么样的 JavaScript 框架,这个扩展都会对你有所帮助。如果你一遍又一遍地输入同样的通用代码,我会说这不是很有效率。

这个方便的代码片段是一个轻量级的库扩展,它可以绑定任何标准的 JavaScript 调用,因此只需键入快捷代码,就可以看到自动打印到编辑器的整个通用代码。这个扩展不仅支持 Javascript ES6,还支持Typescript、 Reactjs、 Vue 和 HTML。

Javascript (ES6)代码片段下载地址[13]


  1. Live Server

在使用 Live Server 时,这个 VSCode 扩展将帮助您打开当前项目的活动 Web 服务器。通常,当使用像 Webpack 这样的构建器时,它通常会完成这项工作,但是这个扩展已经证明自己更加有用。您只需右键单击并运行打开与活动服务器,它会做其它的。

Live Server下载地址[14]


  1. Quokka

对于 JavaScript 开发者来说,Quokka 被称为现代的暂存器。它的构建是为了帮助每个开发人员进行代码检查。这是一个完美的解决方案。

与其他 VSCode 扩展相比,它非常轻量级、高效和强大。它将提高你的工作流程,它是实时的,并将立即给你反馈。

它所做的是为每个结果使用固定的颜色类型,这样开发人员就可以轻松地理解流的执行。

Quokka.js下载地址[15]


  1. Live Share

Live 共享是 VSCode 文本编辑器中最高级的特性之一。与团队成员一起工作非常完美。其功能之一是允许每个开发人员实时地与其他开发人员共享代码片段。

这是完美的,有助于团队协作变得更有效率和生产力。Live Share 允许即时分享当前的项目,即使是在调试的时候ーー这是多么酷啊!

协作者不需要安装任何软件仓库、 sdk 或者任何东西来连接其他开发人员的当前代码。团队中的每个人都可以通过协作会议远程探索和修复问题。

Live Share下载地址[16]


  1. Github Extension

如果你的团队正在使用 Github,或者你正在使用 Github 作为你的项目存储库,或者你想使用其他开发者的源代码存储库,那么这个扩展就是为你准备的。

顺便说一下,Github 现在由微软拥有并管理,为那些不知道的人服务,所以 Github 和 VSCode 现在是微软产品的一部分。

通过使用 Github Extension,您现在可以轻松地连接其他开发人员的存储库、您喜欢的开发人员的存储库,甚至您自己的存储库。如果你经常使用 Github 的话,你可以很容易的做到这一点。

Github扩展下载地址[17]

  1. GitLens

Gitlens 是另一个伟大的扩展。它增加了当前的 VSCode Git 功能,能够从以前的提交和更改中并行执行代码比较,还有其他很酷的功能。

GitLens — Git supercharged下载地址[18]

  1. NPM

每个现代开发人员都已经知道 NPM 是什么以及为什么它很重要。Node Package Manager 是一个扩展,可以帮助您管理 Package.json 文件。如果有依赖项需要但尚未安装,它会给出警告,还有 NPM 包的版本控制。

我一直致力于解决的大多数错误和错误都来自于使用 NPM 包、函数和特性,由于它与其他包不兼容,这些都无法正常工作。

这个 VSCode 扩展是必须的:

n[19]pm 下载地址[20]

  1. Beautify

Beautify是另一个很好的代码格式化扩展,几乎和我前面提到的 Prettier 一样。它现在已经有了将近1200万的下载量,所以这里没有什么可以说服你为什么这个扩展如此有用。

它对用 Javascript、 JSON、 Sass、 CSS 和 HTML 编写的代码进行格式化。

Beautify下载地址[21]


  1. Live Sass Compiler

如果您喜欢 Sass 的样式,或者只是因为它是项目应用程序需求的一部分而使用 Sass,那么这个 VSCode 扩展就是为您准备的!

它将你的 sass / scss 文件实时编译成 CSS 文件,并自动为你提供应用程序的实时预览或浏览器中的编译样式。

Live Sass Compiler下载地址[22]


  1. Emmet

自从我开始使用 VSCode 以来,我一直在使用 Emmet。它可以帮助每个开发人员提高编写代码的速度。使用这个扩展,很快你就不能想象没有它的代码了。

真实故事:

Mithril Emmet的下载地址[23]

这里有一个额外的好处: Emmet 文档 Cheatsheet:

Cheat Sheet[24]

  1. VSCode Icons

这是为我们的前端开发者准备的。这和我之前提到的material icons类似,只是设计不同。作为一个前端开发者,我们喜欢看到的东西是正确的吗?所以这个图标可以帮助你看到你所拥有的文件类型,以及它们是否是 HTML,CSS,Javascript 等等。

vscode-icons下载地址[25]


  1. Color Picker

颜色选择器扩展可以帮助您轻松地在 CSS 文件中选择颜色。它将立即反映或应用于您当前正在处理的属性。如果你喜欢使用 RGBA 颜色,它也是可用的。

Color Picker 下载地址[26]


  1. ES7,React,Redux & GraphQL Snippets

这是为那些正在使用诸如 React 这样的 JavaScript 框架的高级开发人员准备的,同时还有其他与其产品和复杂应用程序兼容的技术。

一遍又一遍地输入标准代码是低效的。有了这个代码片段的帮助,你可以通过输入快捷代码轻松创建基于类的组件、函数组件、导入、生命周期方法等等,这是我使用 Reactjs 和 React Native 以来最常用的扩展之一。

ES7 react / redux / graphql / React-Native snippets[27]

  1. REST Client

另一个高级工具 Rest Client 扩展可以帮助您使用其他第三方工具和 API。如果您需要能够轻松地发出 HTTP 请求,那么它非常有用。

这个扩展允许您轻松地在代码编辑器中直接调用和 API 端点。这样可以节省时间ーー 你可以使用这个选项,而不必在浏览器或 Postman 那里来回地切换请求。

Rest Client下载地址[28]

感谢大家的阅读!

 相关推荐

刘强东夫妇:“移民美国”传言被驳斥

京东创始人刘强东和其妻子章泽天最近成为了互联网舆论关注的焦点。有关他们“移民美国”和在美国购买豪宅的传言在互联网上广泛传播。然而,京东官方通过微博发言人发布的消息澄清了这些传言,称这些言论纯属虚假信息和蓄意捏造。

发布于:1年以前  |  808次阅读  |  详细内容 »

博主曝三大运营商,将集体采购百万台华为Mate60系列

日前,据博主“@超能数码君老周”爆料,国内三大运营商中国移动、中国电信和中国联通预计将集体采购百万台规模的华为Mate60系列手机。

发布于:1年以前  |  770次阅读  |  详细内容 »

ASML CEO警告:出口管制不是可行做法,不要“逼迫中国大陆创新”

据报道,荷兰半导体设备公司ASML正看到美国对华遏制政策的负面影响。阿斯麦(ASML)CEO彼得·温宁克在一档电视节目中分享了他对中国大陆问题以及该公司面临的出口管制和保护主义的看法。彼得曾在多个场合表达了他对出口管制以及中荷经济关系的担忧。

发布于:1年以前  |  756次阅读  |  详细内容 »

抖音中长视频App青桃更名抖音精选,字节再发力对抗B站

今年早些时候,抖音悄然上线了一款名为“青桃”的 App,Slogan 为“看见你的热爱”,根据应用介绍可知,“青桃”是一个属于年轻人的兴趣知识视频平台,由抖音官方出品的中长视频关联版本,整体风格有些类似B站。

发布于:1年以前  |  648次阅读  |  详细内容 »

威马CDO:中国每百户家庭仅17户有车

日前,威马汽车首席数据官梅松林转发了一份“世界各国地区拥车率排行榜”,同时,他发文表示:中国汽车普及率低于非洲国家尼日利亚,每百户家庭仅17户有车。意大利世界排名第一,每十户中九户有车。

发布于:1年以前  |  589次阅读  |  详细内容 »

研究发现维生素 C 等抗氧化剂会刺激癌症生长和转移

近日,一项新的研究发现,维生素 C 和 E 等抗氧化剂会激活一种机制,刺激癌症肿瘤中新血管的生长,帮助它们生长和扩散。

发布于:1年以前  |  449次阅读  |  详细内容 »

苹果据称正引入3D打印技术,用以生产智能手表的钢质底盘

据媒体援引消息人士报道,苹果公司正在测试使用3D打印技术来生产其智能手表的钢质底盘。消息传出后,3D系统一度大涨超10%,不过截至周三收盘,该股涨幅回落至2%以内。

发布于:1年以前  |  446次阅读  |  详细内容 »

千万级抖音网红秀才账号被封禁

9月2日,坐拥千万粉丝的网红主播“秀才”账号被封禁,在社交媒体平台上引发热议。平台相关负责人表示,“秀才”账号违反平台相关规定,已封禁。据知情人士透露,秀才近期被举报存在违法行为,这可能是他被封禁的部分原因。据悉,“秀才”年龄39岁,是安徽省亳州市蒙城县人,抖音网红,粉丝数量超1200万。他曾被称为“中老年...

发布于:1年以前  |  445次阅读  |  详细内容 »

亚马逊股东起诉公司和贝索斯,称其在购买卫星发射服务时忽视了 SpaceX

9月3日消息,亚马逊的一些股东,包括持有该公司股票的一家养老基金,日前对亚马逊、其创始人贝索斯和其董事会提起诉讼,指控他们在为 Project Kuiper 卫星星座项目购买发射服务时“违反了信义义务”。

发布于:1年以前  |  444次阅读  |  详细内容 »

苹果上线AppsbyApple网站,以推广自家应用程序

据消息,为推广自家应用,苹果现推出了一个名为“Apps by Apple”的网站,展示了苹果为旗下产品(如 iPhone、iPad、Apple Watch、Mac 和 Apple TV)开发的各种应用程序。

发布于:1年以前  |  442次阅读  |  详细内容 »

特斯拉美国降价引发投资者不满:“这是短期麻醉剂”

特斯拉本周在美国大幅下调Model S和X售价,引发了该公司一些最坚定支持者的不满。知名特斯拉多头、未来基金(Future Fund)管理合伙人加里·布莱克发帖称,降价是一种“短期麻醉剂”,会让潜在客户等待进一步降价。

发布于:1年以前  |  441次阅读  |  详细内容 »

光刻机巨头阿斯麦:拿到许可,继续对华出口

据外媒9月2日报道,荷兰半导体设备制造商阿斯麦称,尽管荷兰政府颁布的半导体设备出口管制新规9月正式生效,但该公司已获得在2023年底以前向中国运送受限制芯片制造机器的许可。

发布于:1年以前  |  437次阅读  |  详细内容 »

马斯克与库克首次隔空合作:为苹果提供卫星服务

近日,根据美国证券交易委员会的文件显示,苹果卫星服务提供商 Globalstar 近期向马斯克旗下的 SpaceX 支付 6400 万美元(约 4.65 亿元人民币)。用于在 2023-2025 年期间,发射卫星,进一步扩展苹果 iPhone 系列的 SOS 卫星服务。

发布于:1年以前  |  430次阅读  |  详细内容 »

𝕏(推特)调整隐私政策,可拿用户发布的信息训练 AI 模型

据报道,马斯克旗下社交平台𝕏(推特)日前调整了隐私政策,允许 𝕏 使用用户发布的信息来训练其人工智能(AI)模型。新的隐私政策将于 9 月 29 日生效。新政策规定,𝕏可能会使用所收集到的平台信息和公开可用的信息,来帮助训练 𝕏 的机器学习或人工智能模型。

发布于:1年以前  |  428次阅读  |  详细内容 »

荣耀CEO谈华为手机回归:替老同事们高兴,对行业也是好事

9月2日,荣耀CEO赵明在采访中谈及华为手机回归时表示,替老同事们高兴,觉得手机行业,由于华为的回归,让竞争充满了更多的可能性和更多的魅力,对行业来说也是件好事。

发布于:1年以前  |  423次阅读  |  详细内容 »

AI操控无人机能力超越人类冠军

《自然》30日发表的一篇论文报道了一个名为Swift的人工智能(AI)系统,该系统驾驶无人机的能力可在真实世界中一对一冠军赛里战胜人类对手。

发布于:1年以前  |  423次阅读  |  详细内容 »

AI生成的蘑菇科普书存在可致命错误

近日,非营利组织纽约真菌学会(NYMS)发出警告,表示亚马逊为代表的电商平台上,充斥着各种AI生成的蘑菇觅食科普书籍,其中存在诸多错误。

发布于:1年以前  |  420次阅读  |  详细内容 »

社交媒体平台𝕏计划收集用户生物识别数据与工作教育经历

社交媒体平台𝕏(原推特)新隐私政策提到:“在您同意的情况下,我们可能出于安全、安保和身份识别目的收集和使用您的生物识别信息。”

发布于:1年以前  |  411次阅读  |  详细内容 »

国产扫地机器人热销欧洲,国产割草机器人抢占欧洲草坪

2023年德国柏林消费电子展上,各大企业都带来了最新的理念和产品,而高端化、本土化的中国产品正在不断吸引欧洲等国际市场的目光。

发布于:1年以前  |  406次阅读  |  详细内容 »

罗永浩吐槽iPhone15和14不会有区别,除了序列号变了

罗永浩日前在直播中吐槽苹果即将推出的 iPhone 新品,具体内容为:“以我对我‘子公司’的了解,我认为 iPhone 15 跟 iPhone 14 不会有什么区别的,除了序(列)号变了,这个‘不要脸’的东西,这个‘臭厨子’。

发布于:1年以前  |  398次阅读  |  详细内容 »
 相关文章
Android插件化方案 5年以前  |  237231次阅读
vscode超好用的代码书签插件Bookmarks 2年以前  |  8065次阅读
 目录