Visual Studio Code （也称为VS Code和VSCode）是一种经济高效但功能强大的跨平台代码编辑器，被设计为桌面应用程序。 根据该材料的作者（我们今天将要翻译的翻译），VS Code支持许多开发工具，例如
TypeScript和Chrome
调试器 。 这以及已经写入了大量开源扩展的事实，使得VS Code成为许多人非常欢迎和喜爱的编辑器。
如果您想向您的JavaScript编程人员库中添加一些新内容，该材料的作者希望您能在这里找到对您有用的东西。 此处回顾的27种工具并非全部仅用于JS开发。 但是，所有使用JavaScript的人都可以成功地应用它们。
1.项目摘要
我一直以来最喜欢的
Project Snippets扩展基于VS Code中内置的
User Snippets工具。
如果您不熟悉此标准VS Code功能，则知道它允许用户以所谓的代码片段的形式设计自己的代码片段。 这样做是为了在他们的项目中重用它们。 重用是什么意思？
考虑一个例子。 假设您发现您经常必须编写相同的样板代码。 例如-这：
import { useReducer } from 'react' const initialState = {
可以以代码段的形式发布类似的代码。 结果，您无需输入所有这些信息（或从某个地方复制），而只需输入所谓的前缀，此后，与该前缀相对应的代码将出现在编辑器中。
如果在VS Code中转到“
File > Preferences > User Snippets ，则可以选择“
New Global Snippets File来创建一个新的全局
New Global Snippets File 。
例如，为了为使用TypeScript的
React项目创建一个新的片段文件，您可以选择
New Global Snippets File并将文件名设置为
typescriptreact.json 。 新创建的
.json文件将在编辑器中打开，可以在其中描述代码段。
根据上面的代码片段创建一个代码段。 为此，必须将
typescriptreact.json文件转换为以下内容：
{ "const initialState = {}; const reducer = (state, action)": { "prefix": "rsr", "body": [ "const initialState = {", " //$1", "}", "", "const reducer = (state, action) => {", " switch (action.type) {", " default:", " return state", " }", "}" ] } }
现在，该文件已对代码段进行了描述，您可以创建一个扩展名为
.tsx的新TypeScript文件，并在其中输入
rsr前缀。 这将导致弹出窗口，并带有代码段的描述。 按下
Tab完成将代码段插入文件的过程。 它将由以下代码表示：
const initialState = {
使用全局代码段的一些不便之处在于，这些代码段可用于您开发的所有项目（但是，在某些情况下，对于通用代码段，相反，这很方便）。 但是某些项目可以通过特殊方式进行配置。 结果，如果在所有项目中都不需要在这些项目中使用什么，那么全局代码段文件可能不是处理可重用代码片段问题的最佳解决方案。
假设项目使用特殊的文件夹结构。 为了简化该项目的工作，可以在
typescriptreact.json文件中准备类似于以下代码的内容：
{ "import Link from components/common/Link": { "prefix": "gcl", "body": "import Link from 'components/common/Link'" }, "border test": { "prefix": "b1", "body": "border: '1px solid red'," }, "border test2": { "prefix": "b2", "body": "border: '1px solid green'," }, "border test3": { "prefix": "b3", "body": "border: '1px solid magenta'," } }
注意第一个片段。 它可能非常适合具有特定文件夹和文件结构的项目。 但是，如果我们正在处理另一个项目，该项目中的
Link组件位于类似于
components/Link的路径上，该怎么办？
现在看看其他片段。 他们使用单引号。 它们的使用导致出现
border: '1px solid red'之类的结构
border: '1px solid red'代码中为
border: '1px solid red' 。
这样的构造可以在JavaScript中完美使用。 但是，如果我们使用
样式化组件库作为样式化项目的工具，该怎么办？ 在这种情况下，这种语法不适合我们。 确实，样式化组件使用常规的CSS构造！
实际上，
Project Snippets扩展名是我们的帮助。
通过此扩展，您可以创建在项目或工作空间级别运行的代码片段。 这样的代码段不会与为其他项目创建的代码段冲突，也不会干扰与它们的工作。 非常方便。
2.更好的评论
如果您想在代码中编写注释，那么您可能会遇到这样的事实，即有时很难找到很久以前编写的注释。 这样做的原因可能是代码可能会增长一点。
使用“
更好的评论”扩展，可以突出显示不同颜色的评论。
使用更好的评论扩展现在，除其他外，如果您正在团队中进行代码工作，则更容易吸引其他开发人员注意以
!开头的重要注释
! 还是
? 。
3.支架对着色器
当我第一次看到带有
Bracket Pair Colorizer扩展程序结果的屏幕截图时，
对我来说很明显，该扩展程序只需要出现在我的工具箱中即可。
编程是我的热情，而突出显示括号肯定可以帮助我更充分地享受这项活动。
使用支架对着色器扩展4.物质主题
由“
材质主题”扩展引入的“
材质”主题是一种宏伟的现象，现已可供VS Code的爱好者使用。 它的使用使您可以将代码转换为以下形式。
使用Material主题编写代码这必须是现有的最佳主题之一。
5. @ typescript-eslint /解析器
如果您使用TypeScript编写，则可能应该考虑将TSLint配置切换为typescript-eslint。
根据某些报道 ，事实是，一段时间后，Palantir的TSLint支持将停止。 在那里将使用typescript-eslint代替TSLint。
项目正在逐渐切换到使用@ typescript-eslint / parser软件包和相关软件包。 这样做是为了为TS开发生态系统中的未来变化做准备。 如果您喜欢
Prettier ，则可以使用大多数ESLint规则使用此工具。
6. Stylelint
Stylelint是我的项目中经常使用的工具。 之所以如此，有几个原因：
- 它有助于避免错误。
- 编写CSS时会促进样式约定。
- 与Prettier搭配使用效果很好。
- 它支持CSS / SCSS / Sass / Less。
- 它支持开发人员社区创建的插件。
7. Markdownlint + docsify
我不知道其他开发人员在集思广益会议期间如何做笔记，但是我喜欢以
Markdown格式做笔记。 这是一种简单方便的格式。 有许多工具可以帮助您编写Markdown文本。 在这些工具中，可以注意到
markdownlint 。
这是VS Code扩展名，它是一个linter，有助于验证
.md文件中的样式。 它还支持使用Prettier进行文本格式设置。
另外，我通常在所有项目中使用
docsify 。 该工具支持Markdown格式和其他有用的功能。
8. TODO要点
我习惯于直接在代码中编写有关项目中需要完成的操作的注释。 结果，我对诸如
TODO Highlight的扩展感兴趣。 此扩展程序可帮助您处理TODO笔记。
9.进口费用
导入成本扩展名属于工具的类别，在初次使用它们时可以感受到它们的用处。 但是，使用类似工具一段时间后，可能会发现不再需要它。 事实是，随着时间的流逝，开发人员已经确切知道哪些信息可以提供这种工具。 但是，我仍然建议您暂时使用此扩展程序。 很可能它将使您受益。
10.高亮显示匹配标签
有时，搜索某个标签的结尾部分可能会变成一项艰巨的任务。 在这种情况下，
突出显示匹配标签扩展名可能很有用。
使用突出显示匹配标签扩展名11. vscode-spotify
有时我对在使用VS Code工作的过程中不得不不断切换到音乐播放器以切换音轨，然后再次回到自己的业务这一事实感到无聊。
vscode-spotify扩展允许您直接从VS Code控制Spotify播放器，可以帮助我解决此问题。
由于有了这个扩展，您可以在编辑器的状态栏中看到有关正在播放的歌曲的信息。 您可以使用热键切换录制；还可以使用按钮从VS Code中控制Spotify。
12. GraphQL for VSCode
GraphQL技术越来越受欢迎，其应用示例可以在JavaScript开发的几乎所有角落看到。 因此，许多人最有可能
发现GraphQL for VSCode扩展很有用。
该扩展支持GraphQL语法高亮，显示，代码完成。
我经常使用Gatsby，因此我每天都必须阅读GraphQL代码。 用于VSCode的GraphQL扩展帮助了我。
13.缩进彩虹
Indent-Rainbow扩展类似于上述的Highlighting Matching Tag扩展。 如果有时您不容易理解缩进，则此扩展程序将通过提高代码的可读性来帮助您解决问题。 这是其用法的一个例子。
使用缩进彩虹扩展14.颜色突出显示
有人问我“
Color Highlight”是这些扩展之一：“您在哪里找到的？”。 此扩展名有助于使用颜色。 如下图所示。
使用颜色突出显示扩展名15.拾色器
拾色器是VS Code的扩展，它为用户提供图形界面，以帮助您选择CSS中使用的颜色。
16. REST客户端
当我有机会第一次尝试使用
REST Client扩展时，对我而言，它似乎并不是特别有用。 它无法与
Postman之类的东西进行比较。
但是逐渐证明，这种扩展对我的工作产生了巨大的积极影响。 特别是当我需要测试某些API时。
使用它时，例如创建一个新文件就足够了，其中只有一行：
https:
为了在此地址执行HTTP GET请求，只需选择它，转到命令栏（
CTRL + SHIFT + P ），然后选择
Rest Client: Send Request命令。 之后，将打开一个新选项卡，很快就会出现有关请求和响应的信息。 这非常有帮助。
使用REST客户端扩展该扩展名还允许您配置POST请求的参数或数据。 仅需几行代码即可完成此操作：
POST https:
这样的构造将导致带有参数
{ "email": "someemail@gmail.com", "password": 1 }的POST请求。
实际上，这只是对这种扩展的可能性的极为简洁的描述。
17.设置同步
我真的不喜欢在建立新工作场所时列出我使用的扩展程序，然后将其保存在
Evernote之类的文件中 ，然后手动将其全部还原。
我可以使用“
设置同步”扩展程序来自动执行此过程。
要使用它，您只需要拥有一个
gist / GitHub帐户。 如果需要保存设置（包括键盘绑定，代码片段和扩展名以及更多内容），只需使用
SHIFT + ALT + U组合键即可。 这会将所有这些设置加载到要点帐户中。 但是，它们仅对帐户持有人可用。 为了下载设置，例如，当切换到新计算机时，只需安装此扩展名，输入要点帐户信息，然后使用
SHIFT + ALT + D组合键即可。
18.渡渡鸟树
Todo Tree扩展可帮助您在项目代码中找到TODO注释。 它以屏幕左侧显示的树的格式准备这些注释。
使用Todo树扩展19.切换引号
切换引号是一个有趣的扩展，它允许您更改代码中使用的引号的外观。 事实证明，这很有用，例如，在需要将常规引号更改为反引号（backticks）的情况下。 插值字符串时可能需要这样做，当使用常规单引号的Prettier样式的字符串时，此功能尤其有用。
使用切换引号扩展20.更好地对齐
Better Align扩展使您无需先突出显示代码即可对齐代码。
为了使用此扩展名，您需要将光标置于要对齐的代码中，打开命令栏（使用
CTRL + SHIFT + P或分配给您执行此任务的键盘快捷键），然后调用
Align命令。
21.自动关闭标签
自从我开始在VS Code工作的那一天起，“
自动关闭标签”扩展程序一直在帮助我。 它允许您输入
<div> ，然后输入
/图标，然后自动关闭标签。
这个简单方便的功能不在VS Code的标准功能中，因此我发现此扩展非常有用。
22.排序行
我不喜欢其元素不是按字母顺序排列的数组。
Sort Lines扩展名可以帮助我快速处理此问题。 如果您还不喜欢这样的数组，那么它可能会派上用场。
23. VSCode Google翻译
也许我是唯一发现
VSCode Google Translate扩展有用的人。 但这对我有帮助，因为我必须参与那些说不同语言的人与我一起工作的项目。 对于那些不愿折叠VS Code的人来说，此扩展名很有用。
24.更漂亮
Prettier是VS Code的扩展，可以自动格式化以JavaScript，TypeScript和其他语言编写的代码。
25.材质图标主题
我比其他人更喜欢
Material Icon Theme包中的
图标 。 使用它们更容易区分文件类型。 对于在VS Code中使用深色主题的情况尤其如此。
26. HTML中的IntelliSense CSS类名称
HTML中CSS类名的扩展名
IntelliSense使您可以为VS Code配备
在类 HTML属性中自动完成
CSS类名的功能 。 他的工作基于您工作空间中的类定义。
27.路径智能
Path Intellisense扩展名有助于自动完成文件名的输入。
总结
我们希望在您刚刚阅读的VS Code扩展中，有一些对您有用的东西。
亲爱的读者们！ 您将在本文讨论的基础上添加哪些VS Code扩展？
