👊🏼 🍖 📴 Visual Studio代码代码编辑器。为初学者设置和安装插件的最详细指南 🤠 ⚜️ 🛄

免费，强大，非常受欢迎，带有大量附加组件，我能说什么，Facebook自己选择了它作为主要编辑器！

今天，我们将专注于Visual Studio Code代码编辑器或VS Code。我们将安装，配置它，并使用将大大简化我们工作的插件。

如果Sublime Text 3代码编辑器更有趣，请访问https://habr.com/en/post/458206/。

内容：

删除

如果您已经使用VS Code，但决定从头开始，那么我将展示如何完全删除该程序，包括所有设置和插件。除了需要从Windows控制面板中删除程序的事实之外，您还需要转到磁盘C>用户>您的用户名并在此删除.vscode文件夹。

必须在路径栏中添加AppData，然后转到漫游文件夹，在这里您需要删除代码文件夹。

安装

好的，现在我们可以安装程序了。转到code.visualstudio.com网站的“下载”部分。有适用于Mac，Linux的版本。我对Windows感兴趣。单击并下载到您的PC。顺便说一下，该程序的网站非常有用，所以我建议您研究一下。

该程序已下载，运行安装程序并按照说明进行操作：接受，添加所有选中标记，然后等待直到该程序安装在我们的PC上。

在弱小的机器上运行

安装该程序后，我们可以启动它。但是它不会在每台计算机上启动。事实是该程序占用大量资源。因此，在性能较弱的计算机上，您可以得到以下结果：而不是程序界面，而是黑屏，并且处理器出汗100％。但是有一种解决方法-您需要打开程序快捷方式的上下文菜单，并在文件路径中添加以下标志：-- disable-gpu

太好了，现在程序甚至可以在计算器上启动。

语言设定

该程序已启动，我们可以开始熟悉它。为了更容易结识，我将安装俄语。为此，请单击扩展图标，在搜索字段中，我开始写俄语，直到看到用于Visual Studio Code的俄语语言包。

我单击安装按钮。接下来，程序将要求您重新启动，执行此操作。太好了，现在将更加清晰。但是，如果您说英语，则无需切换到俄语。

欢迎屏幕

我现在将隐藏侧面板，我们将不止一次返回它。
我们首先看到的是欢迎屏幕。这里有一个项目，我们可以用它从已安装的编辑器（例如Vim，Sublime，Atom等）中导入所有设置和键。

这将大大加快并促进从一个编辑器到另一个编辑器的过渡。但是今天，我们将从头开始做所有事情。此外，还有其他有用的链接-有关界面的常规信息，以及非常方便的形式的键盘快捷键列表等等。

我建议您研究此屏幕，并且在每次启动程序时都不再需要它时，您需要取消选中此复选框。以后，您总是可以从“帮助”>“问候”菜单中调用它。

开箱即用的界面

懒得读书？这是视频版本。

已经进行了所有准备工作，现在我们可以熟悉程序界面，同时查看VS Code可以立即使用的功能。

我们将调用“常规接口信息”窗口，并查看程序的主要元素。

在上方，我们看到了菜单。接下来是我们始终可以调用的任何命令的执行接口。编辑器的一般区域。左操作栏。下面是状态栏，我们将从它开始。提示告诉我们，有一个错误和警告视图。您可以呼叫内置终端。

让我们更详细地考虑。

状态栏

问题

在左侧，图标旁边的数字将显示代码执行期间出现的错误和警告的数量。

要打开面板，您需要单击这些图标或按住Ctrl + Shift + M，在这里我们将看到错误消息的文本。

在面板中，您可以过滤这些消息，将其最小化，将整个面板扩展到全屏或关闭它。

调试控制台

除了此面板中用于输出问题的选项卡之外，我们还有一个调试控制台，我们将返回到该控制台。

结论

编辑器所有程序和系统的工作输出日志。在这里，您还可以过滤，清除日志，阻止消息滚动，展开面板或关闭日志。

终奌站

该面板中的最后一个选项卡是集成终端。您可以通过按住Ctrl +`来调用它。

在“控制面板”中，您还可以添加终端，将窗口拆分为几个部分，删除终端窗口，在终端窗口之间切换，还可以选择默认外壳。

例如，我安装了GitBash。选择它，添加一个新的终端窗口，该界面将为我打开。传统上，您可以在此处将面板扩展到全屏并关闭它。

通知事项

在状态栏的右侧，我们看到通知，但现在不存在。也可以发送带有有关程序反馈的推文。

同样，许多其他项目也会出现在状态栏中。

上下文菜单

我们还可以调用上下文菜单，并从该行中删除不使用的内容。例如，评论推文可以腾出空间。

同样，在同一上下文菜单中，我们可以完全隐藏此行。

动作栏

默认情况下，具有6个元素的操作面板位于编辑器的左侧：

资源管理器，它是一个内置的文件管理器；
搜索;
版本控制管理系统；
启动和调试应用程序；
各种插件的安装程序是我们的编辑器；
在底部有一个齿轮，单击它会看到一个主程序设置菜单。

导体

让我们从资源管理器开始，可以通过单击图标或按住Ctrl + Shift + E来打开它。

将鼠标悬停在图标上时，编辑器会通过键盘快捷方式提示我们，这非常方便。

在这里，我们看到3个主要标签：

打开编辑器-这将是打开以供编辑的文件的列表。
选项卡与文件夹，项目。现在我们没有打开的文件夹。
结构-现在这里什么也没有，我们将在稍后返回。

欢迎窗口我们已经关闭。当所有窗口都关闭时，编辑器将显示一个存根，其中显示主要操作的键盘快捷键：

让我们在编辑器中向我们的未来项目添加一个空文件夹。为此，请单击“打开文件夹”或将其拖到该字段中。

现在，我们有一个空的hello_vscode文件夹，以及一些控件：

创建文件；
创建一个文件夹；
更新所有文件和文件夹；
折叠资源管理器中的所有内容。

让我们创建项目所需的一些文件。单击创建文件，编写例如Index.html。接下来，我们可以创建一个css文件夹并在其中创建一个style.css文件。使用此内置文件管理器非常方便。

您也可以使用快捷菜单创建文件和文件夹。除此之外，还有一些有趣的功能，例如，在Windows资源管理器中显示文件夹。

现在，我们可以转到Index.html并在其中编写一些有趣的内容，例如“ Hello VC Code”。

语法高亮

只想说几句有关语法突出显示的内容-这是编辑器识别代码并为其单独的元素着色的能力。当我们打开文件并开始使用它时，除其他新元素外，状态栏底部还出现一个html元素。这意味着编辑器已识别该语言并相应地突出显示了该语言。单击此元素，我们将看到各种语言的重要摘要。

此列表可能不会绝对包含所有内容。例如，如果我们正在使用.kit文件。让我们创建index.kit并在其中复制代码。我们将看到没有突出显示，而不是html元素，我们看到的是纯文本。在这种情况下该怎么办？我们需要单击纯文本，在这里我们有一个选择-除了自动检测，我们还可以尝试寻找用于突出显示.kit文件的语法的附加组件。

如果这不起作用，那么我们可以配置映射。单击此处，然后选择.kit文件的映射语言。就我而言，它是html。

现在，程序会将所有.kit文件识别为html文件，并相应地突出显示。让我们回到真正的html文件。我们将在此处保存所有已编辑的内容。通过在浏览器中打开该文件可以看到工作的结果。在“结构”选项卡中，我们将看到文档的树状结构已经出现

，资源管理器的另一个有用功能是它的“上下文菜单”，我们可以在其中显示或隐藏任何选项卡。例如，我将删除结构并删除打开的编辑器。

结果，我将只有一个项目文件夹。

搜索

搜索（Ctrl + Shift + F）-您需要的东西。我们在HTML文件中写了hello一词。搜索立即发现它，突出显示在哪个文件中。您可以立即将其替换为其他单词。

单击此处图标将被替换的字词，对于我们来说这很方便。

版本控制管理系统

打开您可以点击图标，或者按住选项卡中按Ctrl +移位+的摹。对于已经熟悉版本控制系统（例如Git）的用户，他将欣赏此功能。稍后，我将展示如何将本地项目与GitHub上的存储库链接。

应用调试

操作栏中的下一项是“调试应用程序”。该工具可以独立使用，也可以借助第三方插件来分析特定程序代码的执行情况。

例如，我们有某种JavaScript代码，为了开始调试，我们可以单击此处的按钮或按F5。

调试结果将显示在底部面板中，您也可以设置所谓的代码断点并在它们之间移动，这非常方便。

扩展名

在这里，我们为编辑器提供了一整套扩展和插件。我们已经使用此选项卡来安装语言包。我们单击图标或按住Ctrl + Shift + X组合键，我们将看到扩展名和三个附加标签的搜索字段：

已启用-显示所有已安装的扩展名；
推荐的
已安装但已禁用的扩展。

在带有已安装扩展的选项卡中，我们可以快速访问它们，我们可以查看，阅读一些信息，热键，查找有关此扩展的所有详细信息。另外，可以通过单击“删除”按钮将其删除。我们将返回扩展并安装最好的和最有用的扩展。

设定值

在操作面板中，我们还有一个元素-齿轮-主设置菜单。在这里，我们可以通过单击此处或Ctrl + Shift + P来调用命令面板。将打开一个块，我们可以在其中找到并执行任何编辑器命令或已安装的插件。

更多键盘快捷键。在这里，我们可以自定义我们的键盘快捷键以使用命令或更改为现有的快捷键。我们将回到他们身上。定制代码段，即所谓的代码段，是小的缩写，会导致我们需要的代码段。今天，我们将学习如何配置它们。在这里，您可以自定义程序的颜色主题，文件图标等等。

完成操作栏后，值得注意的是，您可以使用Ctrl + B快速调用上一个打开的选项卡。此外，隐藏上下文菜单，可以隐藏不必要的项目。例如，我将隐藏“开始”和“调试”。在同一上下文菜单中，您可以隐藏整个操作栏。

编辑区

懒得读书？这是视频版本。

我们看到带有打开文件的标签。它们可以拖动，关闭。如果未保存文件，则十字处将在此处显示一个大的粗体点。顶部旁边是拆分窗口图标。有一个打开的活动文件，单击图标，该文件将在侧面复制。

还有一个用于管理所有文件的菜单。

在下面，我们看到导航栏-面包屑，在这里我们可以方便地导航文档的结构以及其他文件之间的结构。

代码的一般区域-我们看到打开文件本身的代码，并且在右侧是一个微型地图，使您可以方便地浏览一个长文件。左侧的代码区域中有一个很小的空间，用于设置调试代码的断点，还有行号。

接下来，我们看到箭头，当您将鼠标悬停时，它们会出现，借助它们的帮助，您可以折叠整个代码块。在此编辑器中，此功能可用于内存。我可以关闭文件，甚至关闭整个程序，并且当我再次打开它时，以前最小化的块将保持最小化。

我们在这里可以配置什么？

正如我已经显示的那样，编辑器窗口可以分为几个部分，这在处理不同文件时很方便。为了查看不同的选项，您需要转到“ 视图”>“编辑器布局”。这里有很多选项，例如两行，我们可以在此处移动文件并像这样工作。还有一个2x2网格选项。也就是说，您可以同时处理4个文件。

您还可以通过简单地拖放文件来快速排列文件的所需位置。我立即为自己确定了正确的布局。还可以自定义整个编辑器区域的外观。打开菜单>查看>外观。

下面可以调整整个程序的规模。不要与字体大小混淆。使用键盘快捷键很方便。例如，要增加元素，请按Ctrl +，减少-Ctrl-，重置-Ctrl + 0。

您可以从左向右移动操作栏，然后它将在另一侧。您可以指定状态栏面板的位置。通过单击，我们将看到面板不再像以前一样从下方打开，而是从侧面打开。也就是说，几乎可以配置所有内容。

同样，在此块中，您可以隐藏或显示不同的元素。我之前说过，我们可以隐藏整个通知行，完全隐藏操作栏。在此块中，我们可以将所有这些返回到该位置。

屏幕模式

按F11时，在顶部有一个全屏模式。顶部菜单，用于管理程序窗口的按钮将被隐藏。

布局的中心对齐。代码区域居中，可以调整宽度。这是为了更好地专注于代码。

有一个很棒的Zen模式。它隐藏了所有元素，甚至是文件选项卡，我们只关注一个文件，一个代码。我们解决了一项需要最大程度集中精力的艰巨任务。

要退出它，请按Escape。

文字换行

此外，在“视图”菜单中，我们可以启用或禁用文本换行，您可以通过按住Alt + Z来实现。这是什么意思？例如，我们有一个很长的文本，它不适合代码区域，并且出现水平滚动。如果这不方便，则可以按Alt + Z；我们的所有文本都将自动换行以适合代码区域。

可以隐藏或显示小地图，控件，即面包屑。如果似乎没有必要。在这里，您可以显示不可打印的空格和可打印的字符，并绘制可以从文本源复制的控制字符。

配色方案

我们可以通过转到Office，指向“颜色”主题来选择已安装的主题之一。我们会看到列表，并使用键盘上的箭头可以在主题之间移动，从而为自己选择合适的主题。有暗色和浅色选项。

如果这些主题都不适合，我们可以设置自己的主题。为此，我返回“扩展”选项卡，在搜索字段中输入主题的名称-SpaceOceanKit。我发现，单击安装。接下来，我可以选择要选择的主题，然后选择它。

现在，我有了整个编辑器，包括代码，看起来会有所不同。我设置了主题，您可以安装其他任何主题。

颜色的组合对于长期使用该代码非常重要，这会影响您的眼睛的感知，疲劳和健康。因此，请仔细为自己选择一个主题，不要忘记休息一下。

图示

我们还可以在资源管理器中更改文件图标的外观。为此，请转到管理>文件图标主题，在这里我们可以完全关闭图标或从列表中选择。

还安装其他图标包。例如，Matherial图标主题。

参量

此外，您可以在“程序设置”中调整使用代码以及整个编辑器的舒适度。为此，请转到管理>选项或按住Ctrl +，

可以为全局和特定项目配置参数。这里有很多设置。我们将经历主要的过程。

自动保存

第一个有用的选项是文件自动保存。对于初学者来说，这是一个非常不错的选择。初学者经常向我提出以下问题：“为什么我的工作对我不起作用？” 我看了，文件没有保存在那里。

为防止这种情况发生，您可以在此处将值更改为以下三个值之一：

afterDelay-文件将在一段时间后保存，可以在下面立即进行配置。如果在编辑文件时选择此选项，则将立即保存该文件，甚至不会出现粗体点。
onfocusChange-当我们移动到另一个文件时，文件将被保存
onWindowChange-当我们切换到一个完全不同的程序时，该文件将自动保存。

为自己选择一个方便的选项，然后继续。

代码显示

以下选项将帮助您配置舒适的代码显示。这是字体大小和字体系列。在这里，您可以选择适合您的值。

制表时我会调整压痕的大小。默认情况下，它是4。对于我来说，该字段对于一个Tab而言太宽了，因此我将其更改为3，因此对我来说似乎更紧凑。您指出适合您的价值。

在一个文件中，为我显示空格，当按下Tab键时显示点，在另一个文件中-一个Tab图标。 Insert Spaces参数负责此选项。默认情况下，设置一个复选标记，即显示空格。我希望显示我的标签，所以我将取消选中标记。

为了转换带有空格的现有文件，您可以转到状态栏，按4个空格，然后选择选项“将缩进转换为选项卡步骤”。这样我们就可以转换已经打开的文件。

“检测缩进”选项回答了如何确定新打开文件的字符插入。我将取消选中标记，因为我希望配置的设置适用于所有文件。

隐藏工具提示

先前，我展示了当您将鼠标悬停在代码中的某个元素上时，会弹出工具提示，这通常很烦人。要删除提示，有一个Hover Enabled参数。可以取消选中标记，提示消失。

但是，与此同时，可能有用的功能也会消失。
例如，在样式表中，我们使用蓝色。立即突出显示。如果启用了“悬停”功能，那么当您将鼠标悬停在一种颜色上时，就会发生以下情况：

我们可以将其设置为半透明，设置rgba值，甚至将颜色更改为另一种颜色。如果清除“启用悬停”复选框，则此功能也会消失。

“颜色装饰器”参数负责输出，如果不需要，则可以取消选中标记，并且不会出现颜色方块。

鼠标滚轮缩放-通过选中此框，我们可以通过按住Ctrl并转动鼠标滚轮来更改编辑器中的字体大小。

关闭活动组控制在关闭组中的最后一个选项卡时是否将其关闭。编辑器可以分为几部分。默认情况下，在最后一个选项卡中关闭时，整个选项卡将关闭。有时这很不方便，因此我删除了此复选标记。现在，当关闭最后一个选项卡时，该组仍将保留在我的身边。

格式化

下一组设置负责格式化，该设置已内置在VC代码编辑器中。什么是格式？例如，我们编写了一个结构，其中有另一个结构，但是由于某种原因，选项卡已移出。当您按住Shift + Alt + F时，所有内容将按其顺序排列。

返回我们的设置。在这里我们可以打三个勾号：

粘贴时格式化-粘贴代码时，格式化会自动完成。
保存时格式化-保存文件时将进行格式化。
按类型格式化-格式化将是自动的，也就是说，我们将进行打印并且所有内容都将立即格式化。

我设置一个选中标记-保存时格式化。
现在，当标签停止时，我不注意了，在保存文件时，所有内容都将保留在原位置。

您可以通过了解程序网站上的文档，对特定语言的格式进行更好的调整。您还可以为特定语言以及许多其他语言安装其他扩展。

我展示了我自己使用的那部分设置。您可以自己熟悉其余设置。为了方便起见，此处的设置分为几类。对于已经安装的扩展程序或我们仅安装的扩展程序，还有一类设置。

要快速访问我们已配置的所有内容，请按住Ctrl + Shift + P并在搜索栏中输入设置，直到看到设置（JSON）。单击后，设置将显示在我们的前面，您可以立即对其进行更改。

在同一文件中，我们将配置新扩展名。

使用程序时的舒适性非常重要，因为这会直接影响性能。我们要做的下一件事是安装许多插件，这将在很大程度上帮助我们。

外挂程式

懒得读书？这是视频版本。

Emmet

-该插件已经内置于VS Code编辑器中。确实，今天很难想象没有Emmet的生活。超级加快打字速度。例如，多亏他，我才这么快就创建了HTML文件的初始代码，方法是只写一个感叹号并按Tab。

这是另一个例子。为此，我们需要使用块类创建一个div，我编写.block并按 Tab。做完了！

或更复杂的例子-我们需要创建包含10个元素的项目符号列表。写ul> li * 10制表符。做完了！

样式文件也是如此。例如，对于body标签，我想将字体大小设置为20像素。为此，我写fz20就足够了。通过按Tab，我得到一个现成的参数。

您可以在此插件的网站上了解有关Emmet功能的更多信息。

片段

但是，创建自己的代码段快捷方式来快速调用其他代码甚至更酷。
转到管理>自定义代码段。有一个选择：

创建特定语言的代码段；
为所有语言创建片段，但为特定项目创建片段；
为所有语言和所有项目创建全局代码段。

让我们创建全局代码，在这里您需要输入代码片段列表的名称。

我键入my，单击，然后打开my.code-snippets文件。有任何评论的信息，以及一个示例。我不会评论他。这是JavaScript的代码段。

. scope — . , . — , , . body . console.log description, .

: , . , css .

— “ ”, . , mm. body «margin: 0px, 0px, 0px 0px;», mm . Ctrl+S .

style.css mm Tab. , , .

, . js, log Tab.

, , $1 $2. $1. Tab, $2. .

, , , .

. Ctrl+Shift+X .

Live Sass Compiler

, SASS/SCSS. Install. , , , . , .

Watch Sass. .

scss , . style.scss.
:
```
body{
	font-size: 20 px;
	div{
		font-size: 10 px;
	}
}		
```
, Watch Sass scss\sass . style.css style.css.map.

. , , , scss, css.

. Shift+Ctrl+P, Settings (JSON). , .
```
"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.formats": [
	{
		"format": "expanded",
		"autoprefix": "last 5 versions",
		"extensionName": ".css",
		"savePath": "css"
	}
],
```
-, -. . «format» — , scss — , , ..

— css . . — css. css, .

, . , - - , css , style.css. , .

, style.scss. , scss - . , — import «header.scss»

, . …

? header.scss header.css. , style.css, header, , . header, . , header.scss, , .

, . , , header.css, . :)

Live Server

Live Css Compiler Live Server — , . Live Css Compiler, Live Server .

, , Live Css Compiler. Go Live. , , index.html Go Live .

html , “Hello”, , GoLive .

, . . link, link.css, . , .

, , , . , .

SCSS IntelliSense

SaSS. SCSS IntelliSense, scss, .

SCSS Formatter

. sss . .

Auto Complete Tag

Auto Rename Tag Auto Close Tab. , VS Code , Auto Close Tab — html, . Auto Rename Tag — , . , span , .

Bracket Pair Colorizer

, — , , . . , , . , , , .

Indent Rainbow

, , , , SaSS pug, .

Better Comments

. , , .. , , - , .

- —! — , ToDO — , —? — .

, , .

, .
Color, - .

BEM Helper

BEM. bem, , . , , - css scss bem- html .

. Alt+B+E, , , .

?

.
. , > BEM Helper.

, Insert Element. , , .

, . , , - .

eCSStractor

, html css\scss\sass. , . > , eCSStractor, . eCSStractor Run (With BEM Nesting).

, , Ctrl+Alt+1, Enter, .

: html , , Ctrl+Alt+1, , .

. , .

, , BEM? Ctrl+Alt+2 .

, , . , — BEM BEM.

CSS Navigation

, . -, .
, red. html, . r , .

. , F12 . , , .

, , - , . F12 , , , html-.

Alt + F12

Image Preview

. , . html-, , , . , , , .

Debugger for Chrome

, - . F5 Chrome, , .

Vscode Google Translate Google Translate

. , translate text.

, , , Shift+Alt+T.
html , hello, Shift+Alt+T . , .

, > , , , , .

, (Preffered). , Shift+Alt+T . .

Project Manager

, , .. . Project Manager.

, , . . , , Project Manager .

Settings Sync

, , Windows, Settings Sync.

, GitHub .
, GitHub, , .

, , . , .

, . Shift+Alt+U.

. , , , , .

.

, Settings Sync. , GitHub. .

. , , — Shift+Alt+D.

, , - . , , , . , — . , , , .

. , .

( ) :
Auto Complete Tag (Auto Close Tag, Auto Rename Tag), Bracket Pair Colorizer, indent-rainbow, Better Comments, Guides, BEM Helper, CSS Navigation, eCSStractor for VSCode, Image preview, Live Sass Compiler, Live Server, Project Manager, SCSS BEM Support, SCSS Formatter, SCSS IntelliSense, Vscode Google Translate, SVG, SVG Font Previewer, jQuery Code Snippets, JavaScript Snippet Pack, jsflowchart, no jQuery Snippets, ESLint, Code Runner, Multiple clipboards for VSCode, WordPress Snippets, Live Pug Compiler, pug, Avocode, Google Fonts, GitLens — Git supercharged,
Settings Sync

GITHub

? .

! Git.

, +, , .

. +, .

, , -, Enter. GitHub. , , . :

git remote add origin https://github.com/FreelancerLifeStyle/hello_vscode.git git push -u origin master

, . , . , , , . , Enter.

, . Git. - , 1, 1 , , . > .

GitHub, , GitHub.

GitLens, .

, , — , — .

, , — , !

VS Code " "