这篇文章中，我想介绍一下自己日常使用中最喜欢的Visual Studio Code扩展。大多数时候，我用VS Code编写的是JavaScript应用程序（标准JavaScript、React、Angular、NodeJS……各式各样）。

Bracket Pair Colorizer 2

这个扩展很不错，可以帮助我搞清楚JavaScript中复杂的嵌套promise。顾名思义，它可以让方括号对变色，帮我弄清楚是否在某个地方搞糊涂了（例如缺少方括号）。它默认匹配()、[]和{}等普通括号，但如果需要你也可以定义自定义括号。

它还有其他许多很酷的功能，例如定义颜色或为活动括号显示装订线之类。值得尝试一波。

链接：https://github.com/CoenraadS/Bracket-Pair-Colorizer-2

Marketplace：https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

NPM Intellisense

如动图所示，它能自动完成以NPM包为目标的require import语句。这可以提供很多帮助，尤其是当你的项目变得很大，并且在package.json中包含很多依赖项时。我不想再错过这个插件了，强烈推荐！

链接：https://github.com/ChristianKohler/NpmIntellisense

Marketplace：https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

Path Intellisense

这是NPM Intellisense的姐妹插件。它会执行相同的自动补全，不过针对的是你的文件系统。这俩插件的维护者是同一人，我也不想再错过这个好东西！

链接：https://github.com/ChristianKohler/PathIntellisense

Marketplace：https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

Quokka.js

如果你只是想尝试一些东西，不想费劲先设置项目，那么这款工具就是一个很好的辅助。通过实时检查输出，它会立即将输出显示在JavaScript/TypeScript代码旁边，如动图所示。这是一个很好的扩展，特别适合调试目的。

链接：https://quokkajs.com/

Marketplace：https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

Docker

由于我经常使用NodeJS，因此习惯了完全使用Docker设置开发环境。在找到这个扩展之前，我只会用CLI。

这个扩展是处理多个Docker映像和容器的必备，因为你可以用它快速浏览正在运行哪些容器、构建哪些映像以及创建哪些网络。

如果你每天都在使用Docker，那么我强烈推荐这个扩展。

链接：https://github.com/microsoft/vscode-docker

Marketplace：https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker

Live Server

我仍在不时使用静态网站和标准JavaScript，而且这样做的时候我不想安装诸如webpack-dev-server之类的东西。这个扩展为本地开发服务器提供了热重载功能，从而能帮助我解决这个问题，也就是说它会在保存对文件所做的任何更改后立即刷新页面。它在状态栏中有一个漂亮的“Go Live”按钮，你只需单击一下即可启动服务器。如果你还没用上的话，一定要看看这个扩展。

链接：https://github.com/ritwickdey/vscode-live-server

Marketplace：https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Auto Close Tag和Auto Rename Tag

它们是VS Code的两个小插件，可通过自动重命名和关闭标签来帮助你维护HTML文件。这也适用于React自己的JSX语法。如果你想节省一些时间，请尝试一下。

Auto Close Tag：https://github.com/formulahendry/vscode-auto-close-tag/https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

Markdown Preview Enhanced

我用Markdown做很多事情。例如，在hashnode.com或dev.to上写文章，为我的私人项目写文档，或者在markdown中写笔记来理顺自己的想法。大多数时候，我都是用VS Code来写的，在找到Markdown Preview Enhanced插件之前，我一直缺乏好用的Markdown预览工具。它不仅为你提供预览，而且还有同步滚动、PDF导出和PlantUML的功能。我非常喜欢这个工具，所以向经常用Markdown的人们高度推荐。

链接：https://github.com/shd101wyy/vscode-markdown-preview-enhanced

Marketplace：https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced

小结

以上就是我每天最常用的VS Code扩展。我希望你发现了一些对你的工作流程有用的新东西，你有什么好用的扩展也可以在评论里推荐。

原文链接：

https://dev.to/klamserdev/vs-code-extensions-i-use-daily-568i

延伸阅读：

VS Code会“一统江湖”吗？-InfoQ

关注我并转发此篇文章，私信我“领取资料”，即可免费获得InfoQ价值4999元迷你书，点击文末「了解更多」，即可移步InfoQ官网，获取最新资讯～

isual Studio Code是一款轻量级但功能强大的源代码编辑器，它可以在你的桌面上运行，适用于Windows、macOS和Linux。它内置了对JavaScript、TypeScript和Node.js的支持，并为其他语言(如C++、C#、Java、Python、PHP、Go)和运行时(如.NET和Unity)提供了丰富的扩展生态系统。本文以在Visual Studio Code中安装与配置C#为例进行语言配置讲解。

下载并安装Visual Studio Code

• 登录Visual Studio Code官网，点击"Download Visual Studio Code"下拉列表，选择适合自己电脑系统的版本进行下载。

• 双击已下载的安装文件"VSCodeUserSetup-{version}.exe",根据安装向导提示进行安装，在此期间可以自行设置安装路径，且确保“添加到PATH(重启后生效)”处于勾选状态。

下载并安装.NET.Core.SDK

• 进入https://dotnet.microsoft.com/download，点击"Download .NET Core SDK",下载安装文件。

• 运行.NET Core SDK安装文件，点击“安装”按钮即可进行安装，安装完成后关闭窗口。

• 打开“命令提示符”窗口，输入命令"dotnet"，按Enter键执行命令，若出现如下图所示关于怎样使用dotnet的信息，则说明.NET Core SDK安装成功。

从 Visual Studio Code 市场安装 C#扩展

打开已安装的Visual Studio Code程序，点击左侧”Extensions“图标，在搜索框输入"C#"，选择合适的C#扩展，点击其右侧的"Install"按钮进行安装。（注意：安装完成后如果在右下角提示"The .NET Core SDK cannot be located. .NET Core debugging will not be enabled. Make sure the .NET Core SDK is installed and is on the path."，则有可能是因为你在安装.NET Core SDK时Visual Studio Code处于打开状态，此时的解决办法是关闭Visual Studio Code后再重新启动）

通过Visual Studio Code开始使用.NET Core

.NET Core 提供了快速运行的模块化平台，用于创建在 Windows、Linux 和 macOS 上运行的应用程序。 带 C# 扩展的 Visual Studio Code 提供功能强大的编辑体验，完全支持 C# IntelliSense（智能代码填充）和调试。让我们从 .NET Core 上的一个简单“Hello World”程序入手：

1.打开项目

• 打开 Visual Studio Code。
• 依次单击左侧菜单上的“资源管理器”图标和 “打开文件夹” 。
• 从主菜单中选择“文件” > “打开文件夹”，打开要在其中放置 C# 项目的文件夹，然后单击“选择文件夹”
• 在我们的示例中，为项目创建名为“HELLOWORLD”的文件夹 。

2.初始化 C# 项目：

• 通过从主菜单中选择“视图” > “集成终端” ，从 Visual Studio Code 中打开集成终端。
• 在终端窗口中，键入“dotnet new console”。
• 此命令在已编写“Hello World”简单程序的文件夹中创建“Program.cs”文件，以及名为“HelloWorld.csproj”的 C# 项目文件 。

3.运行"Hello World"程序

• 键入 dotnet run，命令执行完成后则会输出"Hello World",并在项目文件下生成bin和obj文件。

4.调试

• 单击打开 Program.cs。 在 Visual Studio Code 中首次打开 C# 文件时，会在编辑器中加载 OmniSharp。

• Visual Studio Code 会提示添加缺少的资产，以生成和调试应用。 选择 “是” 。

• 若要打开调试视图，请单击左侧菜单上的“调试”图标。找到窗格最上面的绿色箭头。 请确保已选择旁边下拉列表中的“.NET Core Launch (控制台)” 。

• 单击第 9 行旁边的编辑器边距 （编辑器中行号左侧的空间）或者将文本光标移动到编辑器中的第 9 行并按 F9，为项目添加断点。

• 请按 F5 或选择绿色箭头启动调试。 在到达你在上一步中设置的断点时，调试器会停止执行程序。（调试时，可以在左上角的窗格中查看局部变量，也可以使用调试控制台进行查看）。选择最上面的蓝色箭头以继续调试，或选择最上面的红色方块以停止调试。

"css.remoteStyleSheets": [
 "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
]

::placeholder {
 color: gray;
}

::-webkit-input-placeholder {
 color: gray;
}
:-ms-input-placeholder {
 color: gray;
}
::-ms-input-placeholder {
 color: gray;
}
::placeholder {
 color: gray;
}