编程新手？让我们设置 VSCode

这是我的CSSBootcamp.com课程的预览。

我们还将介绍 Snippets、Emmet 和 Shortcuts 的常规设置。

常规设置

现在市面上有很多专业的代码编辑器可供选择。在我从事开发工作的时间里，似乎每隔 3-6 年就会出现一个新的“最佳代码编辑器”，甚至比之前的所有编辑器都要好。如果你一开始用的是某个编辑器，后来又换了个更新更好的，也不要感到惊讶。

如今，VSCode 是最流行的编辑器。我并不会因为某个东西流行就去使用它，但 VSCode 的流行恰恰是因为它非常优秀。

如果你愿意，可以使用 Sublime Text 或 Atom，它们在 VSCode 之前非常流行。有些人可能之前有编程经验，并且已经有自己喜欢的代码编辑器了。这完全没问题，但由于我使用的是 VSCode，而且它目前在市场上占有一席之地，所以我在这些课程中提供的所有设置和编辑器建议都将针对 VSCode。

下载 VSCode

如果您使用的是 Linux 或 Windows，则可能需要检查系统设置以查看哪个下载选项最适合您。

安装完成后，您将看到一个“入门”屏幕。除非您愿意，否则您实际上不需要阅读整个介绍。请注意，他们将“入门”内容放在一个标签页中。您可以关闭该标签页来退出。

设置完成后，您就可以像专业人士一样开始使用它了。下一步是学习如何自定义设置以及如何使用所有酷炫的键盘快捷键：

代码片段、Emmet 和快捷方式

代码片段是一种让你编写一小段代码，然后按下 Tab 键即可触发更大段代码的方式。其核心理念是让你能够更快地编写一些重复的代码，从而减少输入的繁琐步骤。Emmet 是一个内置于 VSCode 的大型代码片段库。如果你正在使用其他代码编辑器，则可能需要单独安装 Emmet。

代码片段固然很棒，但有时你只需要熟练掌握电脑上各种快捷键即可。快捷键通常有两种类型：

• 基于操作系统
• 基于应用程序

在上面的视频中，我们向您展示了一些我们认为您应该学习的常见操作系统快捷键。我们还展示了一些基于 VSCode（基于应用程序）的快捷键。以下是 VSCode 快捷键的官方“速查表”。不要试图全部学习，太多了。但如果您一次只专注于学习几个，就能带来很大的进步。

苹果

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf

视窗

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

Linux

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf

VSCode 设置

以下是我们在上面的视频中向您展示的设置。

{
  "explorer.confirmDelete": false,
  "editor.tabSize": 2,
  // Use "Subtle Match Brackets" instead of the boxy
  // ones built-in
  "editor.matchBrackets": "none",
  "editor.renderIndentGuides": false,
  "editor.renderLineHighlight": "gutter",
  "editor.minimap.enabled": false,
  "editor.formatOnPaste": true,
  "workbench.startupEditor": "newUntitledFile",
  "workbench.colorTheme": "One Monokai",
  "workbench.iconTheme": null,
  "files.restoreUndoStack": false,
  // This prevents the "quick suggestions" menu from
  // popping up all the time which is something I don't
  // like to see, but that menu also makes Emmet behave
  // oddly. 
  "editor.quickSuggestions": {
    "other": false,
    "comments": false,
    "strings": false
  },
  // With turning off quickSuggestions, now we need to 
  // tell Emmet how we want to start our snippet triggers
  "emmet.triggerExpansionOnTab": true,
}

值得注意的是，从技术上讲，JSON 文件中不允许使用注释，但对于 VSCode 及其设置，它们允许您这样做而不会出现错误，所以我这样做了😎

扩展

我们为使用“Subtle Match Brackets”设置安装的扩展是https://marketplace.visualstudio.com/items?itemName=rafamel.subtle-brackets

这是我的CSSBootcamp.com课程的预览。