Visual Studio Code是开发人员社区中使用最广泛的代码编辑器之一。 VS Code受欢迎的原因之一是它有大量的扩展,从而加快了开发过程。
在本指南中,我们将探讨2021年每个Web开发人员应该知道的10个VS Code扩展。这些工具旨在改善开发人员的体验,并通过各种方式简化您的工作。
我们将介绍以下VS Code扩展:
- Auto Rename Tag
- Bracket Pair Colorizer
- Snippets
- Better Comments
- Markdown All in One
- Icons
- Prettier
- Import Cost
- Profile Switcher
- GitLens
1、Auto Rename Tag
Auto Rename Tag(自动重命名标签)是针对Web开发人员的超级有用的VS Code扩展。 顾名思义,Auto Rename Tag会在第一个标签更新时重命名配对的第二个标签,反之亦然:
你会发现这个扩展不仅对HTML有帮助,而且也可以在 JSX 中使用。
在上面的例子中,标签中只有文本,但在实际的应用程序中,可能有嵌套的标签和元素,这使得手动更新变得困难和乏味。
2、Bracket Pair Colorizer
Bracket Pair Colorizer这个扩展将相应的方括号与相同的颜色匹配。在一个文件中有嵌套的组件、函数、对象等,可能会因为使用多个括号、方括号等而引起混淆。
例如,考虑以下代码片段:
乍一看,很难区分代码中的不同代码块,但是Bracket Pair Colorizer扩展程序为相应的括号和括号着色,以便于导航和访问。
3、Snippets
Snippets是节省时间和提高生产率的最佳方法。 这不是单个扩展,而是具有针对不同编程语言的各种摘要的扩展的集合。
以下是一些流行的代码Snippets扩展:
- Angular Snippets (version 11)
- Python
- JavaScript (ES6) code snippets
- HTML Snippets
- ES7 React/Redux/GraphQL/React-Native snippets
- Vue 3 Snippets
例如,每次创建新组件时,在React中重复功能组件的语法可能很繁琐。 使用ES7 React/Redux/GraphQL/React-Native snippets扩展,您可以使用快捷键rfc来表示功能组件,然后按Enter键。
4、Better Comments
Better Comments旨在帮助您在代码中编写更人性化的注释。
清晰易懂的注释不仅有益于遍历您代码的人,而且也对您有益。 一段时间后,开发人员在访问自己的代码时会迷路,这很普遍。 进行描述性评论可以为您和您的团队节省大量时间。
使用“Better Comments VS Code”扩展,您可以将注释分类为警报,查询,待办事项,高亮显示等。
您可以在双斜杠(//)后使用以下任一字符:
*
用于高亮显示的文本!
错误和警告?
查询及问题//
删除线TODO
待办事项
5、Markdown All in One
Markdown All in One这个扩展可满足您所有Markdown需求,例如自动预览,快捷方式,自动完成等。
自2004年发布以来,Markdown已成为最受欢迎和首选的标记语言之一。 由于Markdown的轻量级简单性和跨平台使用,全球的技术作家广泛使用Markdown来撰写文章,博客,文档等。 它的流行引起了Markdown的其他变体,例如GitHub Flavored Markdown,MDX等。
例如,要在Markdown中加粗一些文本,可以选择该文本,然后使用快捷键Ctrl + B来提高工作效率。
6、Icons
具有描述性的图标(Icons)可以帮助您区分文件和文件夹。 Icons还使开发更有趣。
您可以选择许多图标扩展名。 流行的图标集包括:
7、Prettier
Prettier是一个代码格式化程序。 GitHub上的星标超过38.8k,是目前最受欢迎的代码格式化程序之一。 在代码中采用一致的格式和样式可以节省大量时间,尤其是在与其他开发人员合作时。
看看以下代码块:
您可能会注意到此代码的一些格式问题,包括:
- 单引号和双引号的混合
- 不规则使用分号(;)
- 第6行的console语句缩进不正确
这是Prettier格式化和修复以上代码的方式:
当您使用本地解析的Prettier版本时,此扩展程序支持Prettier插件。
您可以进一步配置此扩展程序以适合您的格式需求,甚至可以通过自动保存触发它。
8、Import Cost
Import Cost这个扩展可以显示代码中导入包的估计大小。 在进行项目时,重要的是不要通过导入大型程序包来损害用户体验。 避免这种情况的一种方法是跟踪代码中其他依赖项的大小。
导入太大时,“Import Cost”会以红色显示尺寸来警告您。 您可以配置应将大小视为小,中或大。
9、Profile Switcher
Profile Switcher使您可以在VS Code中使用各种配置和设置在多个配置文件之间进行切换和设置。
此扩展名对内容创建者(例如技术博客)特别有用。您无需每次都显示VS Code屏幕时更改设置/配置,而是可以设置配置文件所需的设置。
以下是在两个配置文件之间进行切换的方法:Default 和 Content Creation。
10、GitLens
GitLens是Visual Studio Code的开源扩展,由Eric Amodio创建,开发和维护。 它结合了Git和VS Code的功能。
GitLens插件可以直接在光标处显示代码编写人以及时间;方便共同开发时候git做版本控制时候的相关代码管理。GitLens 可以增强 VSCode 内置 Git 的功能。例如 commits 搜索,历史记录和显示的代码作者身份具体功能可以查看Feature list
结论
在本指南中,我们回顾了10个VS Code扩展,它们可以帮助您成为一个更好的程序员,并提高您的生产效率。