适合代码新手的 VS Code 插件

我最近才开始学习编程（大概一两个月），从第一天起就一直使用 Visual Studio (VS) Code 作为我的主要代码编辑器。VS Code 目前兼容所有主流操作系统：Windows、Linux 和 macOS。如果您还不熟悉 VS Code，并想了解更多信息，请点击此处。

VS Code 以及我下面提到的插件都是我丈夫Foysal推荐给我的，他有 8 年的全栈开发经验。他也推荐了其他插件，但作为一个 codeNewBie，我暂时还不需要那些插件。下面的插件不仅让我作为 codeNewBie 的生活变得轻松很多，还让我能够更快地完成工作，减少挫败感，让我的编辑器感觉更像是一个我自己装饰的家。

为了安装插件，您可以单击侧面菜单上的扩展图标，然后输入插件名称。

插件 1 - 实时服务器

我发现这个插件在使用 HTML 和 CSS 时非常有用，尤其是在我尝试构建网页或注册表单时。它会为您运行一个 Web 服务器，并为您提供一个浏览器可访问的本地主机地址，并且每次您在代码编辑器上更新代码时都会自动刷新浏览器，这样您就无需手动点击刷新按钮了。

链接：实时服务器

插件 2 - 浏览器预览

当您不想在编辑器和 Chrome 或 Firefox 等浏览器之间来回切换来检查代码更改时，此插件尤其有用。安装插件后，它会在侧边菜单上创建自己的按钮，点击该按钮时，编辑器将拆分并在右侧打开一个浏览器。

另外，别忘了在浏览器上打开 html 文件，复制文件路径链接并粘贴到预览浏览器上。如果安装了实时服务器，请复制 localhost 链接并粘贴到浏览器上以获取实时更新。

如果您对本节内容感到困惑，请随时通过Twitter与我联系。我很乐意为您详细介绍。

链接：浏览器预览

插件 3 - Carbon-now-sh

由于我目前正在 Twitter 上努力完成 #100DaysOfCode 挑战，我经常会分享我的代码截图以及日常进度更新，直到我发现了这个插件。这个插件可以让你创建漂亮的代码图片，并直接分享到 Twitter。使用方法如下：

• 安装插件
• 选择您想要分享的代码行
• 按 [option + cmd + a] 将带您进入浏览器，您可以在其中随意编辑代码。

如果您像我一样很难记住快捷方式，请执行以下操作：

• 按 [cmd + shift + p] 打开 VS 代码终端
• 输入碳，然后单击突出显示的碳选择，它将带我进入浏览器。

链接：Carbon-now-sh

插件 4 - 代码拼写检查器

此插件会将代码中可能导致错误的任何错误（例如拼写错误）用下划线标出。您无需仔细检查代码并亲自找出错误原因，只需快速浏览代码，查看是否有任何代码被红色下划线标出，然后再查找代码无法正常运行的其他原因即可。

链接：代码拼写检查器

插件 5 - 彩虹括号

我发现这个插件在使用 JavaScript 时特别有用。主要是因为 JavaScript 代码经常需要用到括号。这个插件可以让你更好地直观地看到括号，并且如果代码块开头的括号缺失或被意外移除，它还会高亮显示代码块结尾的括号（参考：第二张图片）。

链接：彩虹括号

插件 6 - 主题

如果你像我一样，花了一整天的时间摆弄插件，安装和卸载各种类型的主题等等，以使代码看起来更加丰富多彩和美观😛（我知道我知道我疯了！）那么这里有一些我建议的 VS 代码主题：

1. Horizo​​n - 这是我目前最喜欢的一个。

1. 德古拉
2. 香鱼
3. 诺克提斯
4. 材料主题

插件 7 - 图标

目前我默认使用 Material Icon Theme。我觉得这些图标更具表现力，对比度更高，更醒目，并且能赋予你的每个文件意义。我在这里提供了 Material Icon Theme 的链接，但你也可以探索其他主题。

链接：Material Icon主题