面向新手程序员的 Visual Studio Code 设置

VS Code 新手设置

图片：@clemhlrdt来自 Unsplash；设计：@john_nweke

众所周知，Visual Studio Code是当今开发领域首屈一指的代码编辑器。如今，使用 VS Code 的程序员比例惊人，并且对其赞不绝口——这当然是有原因的！它拥有超过 400 种设置，可以根据每个用户的需求进行调整，此外还有许多额外的功能。

然而，即使它有 400 个设置，也不意味着你需要全部更改。很多时候，我发现自己在代码编辑器上修改了几个设置却无所事事，陷入了困境。朋友们，这不值得。如果你正在学习西班牙语，最好花时间学习和练习口语，而不是制作一些写着“Hola！”的精美小卡片。

我列出了一些扩展程序，方便您立即设置和使用。如果我漏掉了某个，请告诉我！

这是我目前使用的颜色主题。颜色更漂亮、更丰富。注释显示为灰色，这样读者就能更专注于代码！

其他选项： Atom One Dark、Sublime Material、Visual Studio Dark

这会将侧面板上的文件图标更改为易于识别的图标 - 这样您就可以立即知道自己是在 HTML 文件、CSS 文件还是 JS 文件中。

没有什么比花了 5 个小时调试代码，却发现漏掉了一个括号更让人抓狂的了！括号对着色器 (Bracket Pair Colorizer) 可以帮助你直观地看到每个括号或花括号与其配对的连接方式。
提示：VS Code 还会自动帮你关闭括号和花括号。是不是很棒？

这允许您直接在 VS Code 中运行代码，省去了在 Google Chrome 控制台的多个标签页之间来回切换的麻烦。VSCode 现在就是您的终端了！您可以选择要运行的编程语言，也可以将默认语言设置为 JavaScript。

它们是两个不同的扩展，但可以很好地配合使用，让你找出代码中的问题。ESLint 会告诉你 JavaScript 代码中是否存在问题。JS Hint（顾名思义）会为你的 JavaScript 代码提供提示（同时也具备一些 ESLint 的功能）。非常棒。

这有助于使您的代码更具可读性，并在必要时添加制表符（或空格），以便您可以看到代码是如何嵌套的。

这使您可以使用Markdown 语法在 VS Code 中编写文章（如本文）并查看成品的样子。

别被它那长得离谱的名字迷惑了——这是一个超级实用的扩展，它能让你通过快捷方式将 Bootstrap 4 插入到你的项目中。如果你打算使用 Bootstrap 来制作你的想法的原型（你应该这么做），那么这个扩展能帮你在极短的时间内完成。

就是这样！如果您是编程新手或 VS Code 新手，这些就是您设置和运行所需的基础知识。无需花费 3 周时间调整您的代码编辑器；直接开始实际编写代码吧。您觉得怎么样？

我们在山顶见，
约翰。