如何使用Visual Studio Code

Visual Studio Code是朋友们的VSCode,它是一种功能非常强大的编辑器,正在迅速普及。找出原因及其对开发人员的主要功能

介绍

从一开始,编辑就是一头奇怪的野兽。有些人竭力捍卫他们的编辑选择。在Unix世界中,您拥有那些Emacsvi“战争”,我有点想像为什么花费大量时间讨论一个人与另一个人的优势。

在过去的几年中,我使用了大量的编辑器和IDE。我可以记得TextMate,TextWrangler,Espresso,BBEdit,XCode,Coda,括号,Sublime Text,Atom,vim,PHPStorm。 IDE和编辑器之间的差异主要在于功能集和复杂性。

与IDE相比,我在很大程度上更喜欢编辑器,因为它速度更快,而且方式更少。

在过去的12个月中,我一直在使用VS Code(Microsoft的开源编辑器),并且它很快成为我最喜欢的编辑器。

我应该切换到VS Code吗?又为什么呢?

如果您正在寻找是否使用的建议,请说是的,您应该从现在使用的任何其他编辑器切换到它。

该编辑器以Microsoft数十年的编辑经验为基础。

编辑器的代码完全是开源的,使用它不需要付费。

它用电子作为其基础,这使其可以跨平台并在Mac,Windows和Linux上运行。它是使用Node.js构建的,您可以使用JavaScript对其进行扩展(这对我们所有JavaScript开发人员来说都是一个胜利)。

它是快速地,轻松成为继Sublime Text之后我使用过的最快的编辑器。

它赢得了社区的热情:成千上万的扩展名,一些官员和一些由社区制作的,获奖调查

Microsoft每月发布一个更新。频繁的更新促进了创新,并且Microsoft在倾听用户的意见,同时保持平台尽可能稳定(我应该说,几乎每天都在使用VS Code的一年内,我从未遇到过问题)。

入门

Internet上的Visual Studio Code主页是https://code.visualstudio.com/

转到该站点以下载编辑器的最新稳定版本。

VS Code site

安装过程取决于平台,因此您应该习惯该平台。

首次启动编辑器时,您将看到欢迎屏幕:

Welcome screen for VS Code

左侧有一个带有5个图标的工具栏。这样可以访问:

  • 文件浏览器
  • 搜索
  • 源代码控制
  • 调试器
  • 扩展名

探险者

让我们从资源管理器(双关语)开始探索。

VS Code Explorer

按侧栏中的“打开文件夹”按钮,或Open folder...欢迎页面中的链接。两者都将触发文件选择器视图。

选择一个包含源代码甚至是文本文件的文件夹,然后将其打开。

VS Code将在您的视图中显示该文件夹的内容:

Opened folder

右侧的空白视图显示了一些命令以执行一些快速操作,以及它们的键盘快捷键。

如果您选择左侧的文件,则该文件将在主面板上打开:

Files list

并且,如果您开始对其进行编辑,则会注意到在选项卡中以及边栏中的文件名旁边会出现一个点:

Editing file

紧迫CMD+P将为您显示一个快速的文件选择器,可以轻松地在大型项目中移动文件:

Quick file picker

您可以使用快捷方式隐藏托管文件的侧边栏CMD+B

注意:我使用的是Mac键盘快捷键。在大多数情况下,在Windows和Linux上,您只需将CMT更改为CTRL即可,但并非总是如此。打印你的键盘快捷键参考

工具栏中的第二个图标是“搜索”。单击它会显示搜索界面:

Search

您可以单击图标以使搜索区分大小写,以匹配整个单词(而不是子字符串),并对搜索字符串使用正则表达式。

要执行搜索,请按enter

单击左侧的▷符号可启用搜索和替换工具。

单击三个点将显示一个面板,该面板可让您仅包含某些特定类型的文件,而排除其他文件:

Search and replace

源代码控制

通过单击工具栏中的第三个图标,可以启用“源代码管理”选项卡。

Source control

VS Code开箱即用,具有Git支持。在这种情况下,我们打开的文件夹没有初始化源代码控制。

单击顶部带有Git徽标的第一个图标,可以初始化Git存储库:

Git repo is initialized

U每个文件旁边的文件表示该文件自上次提交以来已进行了更新(因为我们从来没有做过一次提交,因此所有文件均已更新)。

通过编写短信并按来创建第一个提交Cmd-Enter,或单击顶部的✔︎图标。

First commit

我通常将其设置为在提交更改时自动暂存更改。

单击时的3点图标提供了许多与Git交互的选项:

Git options

调试器

工具栏中的第四个图标将打开JavaScript调试器。这值得单独发表一篇文章。同时退房官方文档

扩展名

第五个图标将我们引向扩展程序。

Extensions

扩展是VS Code的杀手级功能。

它们可以提供那么多的价值,您肯定会最终使用大量的它们。

我安装了许多扩展程序。

要记住的一件事是,您安装的每个扩展都会(或多或少)影响编辑器的性能。

您可以禁用安装的扩展,并仅在需要时启用。

您还可以禁用特定工作区的扩展名(我们将在以后讨论工作区)。例如,您不想在Go项目中启用JavaScript扩展。

有推荐的扩展列表,其中包括所有最受欢迎的工具。

Recommended extensions

由于我为博客编辑了许多markdown文件,因此VS Code建议我markdownlint扩展名,它提供Markdown文件的整理和语法检查。

作为示例,让我们安装它。

首先,我检查视图的数量。是120万,太多了!好评(4。55)。单击扩展名,将在右侧打开详细信息。

Extension details

按下绿色的“安装”按钮将启动安装过程,这很简单。它为您完成了所有工作,您只需要单击“重新加载”按钮将其激活,这实际上会重新启动编辑器窗口。

完毕!让我们通过创建带有错误(例如缺失)的markdown文件进行测试alt图片上的属性。它成功地告诉我们:

markdownlint extension

在下面,我介绍一些您不想错过的流行扩展,以及我最常使用的扩展。

终点站

VS Code具有集成的终端。

您可以从菜单中激活它View ➤ Integrated Terminal,或使用CMD+\`,它将使用您的默认外壳程序打开。

The terminal

这非常方便,因为在现代Web开发中,您几乎总是有一些npm或者yarn进程在后台运行。

您可以创建多个终端标签,并在另一个标签旁边显示它们,也可以将它们堆叠在右侧而不是在窗口底部:

Multiple terminals

命令面板

命令面板是一个非常强大的工具。您可以通过单击启用它View ➤ Command Palette,或使用CMD+SHIFT+P

模态窗口将显示在顶部,为您提供各种选项,具体取决于您安装的插件以及上次使用的命令。

我执行的常见操作是:

  • 扩展:安装扩展
  • 首选项:颜色主题更改颜色主题(有时我从黑夜改变为白天)
  • 格式化文件,它会自动格式化代码
  • 运行代码,由Code Runner提供,并执行JavaScript突出显示的行

您可以通过开始键入来激活其中任何一个,然后自动完成功能会向您显示您想要的一个。

记住当您键入CMD+P之前看到文件列表?这是命令面板特定功能的快捷方式。还有其他:

  • Ctrl-Shift-Tab显示活动文件
  • Ctrl-G打开命令选项板,让您输入要转到的行号
  • CMD+SHIFT+O显示在当前文件中找到的符号列表

什么符号取决于文件类型。在JavaScript中,这些可能是类或函数。在Markdown中,章节标题。

主题

您可以通过以下方式切换使用的颜色主题:CMD-k+CMD-t,或通过调用首选项:颜色主题命令。

这将向您显示已安装的主题列表:

Themes

您可以单击一个,或使用键盘移动,而VS Code将为您显示预览。单击输入以应用主题:

Light Theme

主题只是扩展。您可以转到扩展程序管理器来安装新主题。

可能最好的发现方法是使用市场网站

我最喜欢的主题是阿玉,在白天,晚上,早晨/晚上和下午的任何时间都提供了很棒的风格。

客制化

主题只是您可以进行的一种自定义。

分配给文件的侧边栏图标也是良好的用户体验的重要组成部分。

您可以通过以下方法更改它们Preferences ➤ File Icon Theme。 Ayu带有自己的图标主题,与主题颜色完全匹配:

Ayu Light

到目前为止,我们进行的所有这些自定义(主题和图标主题)均保存到用户首选项中。

Preferences ➤ Settings(也可以通过CMD-,) 去看他们:

Settings

该视图在左侧显示默认设置(供参考),在右侧显示被覆盖的设置。您可以在以下位置看到主题名称和我们设置的图标主题workbench.colorThemeworkbench.iconTheme

我放大使用CMD-+,并且此设置也已保存到window.zoomLevel,因此下次VS Code启动时,它会记住我的缩放选择。

您可以决定在以下位置全局应用某些设置:用户设置,或相对于工作空间工作区设置

大多数情况下,这些设置是通过扩展名或VS Code本身自动添加的,但是在某些情况下,您可以在此位置直接对其进行编辑。

不错的配置选项

VS Code有很多选择。一切都是高度可配置的,有时很难一一理解。

您可以使用命令面板打开配置JSON文件,然后选择Open Settings (JSON)

我在代码中设置的一些不错的配置选项:

选项 描述
"editor.minimap.enabled": false 删除小地图,该小地图显示在编辑器的右侧
"explorer.confirmDelete": false 当我想删除文件时,不再要求我确认(我有源代码控制!)
"explorer.confirmDragAndDrop": false 禁用拖放确认
"editor.formatOnSave": true 保存时自动格式化代码
"editor.formatOnPaste": true 当我将代码粘贴到代码中时会自动设置代码格式
"javascript.format.enable": true 启用JavaScript代码格式
"files.trimTrailingWhitespace": true 修剪文件中的空格
"editor.multiCursorModifier": "alt" 单击Alt键并用鼠标单击时,我可以选择多行
"editor.detectIndentation": true 适应文件缩进,在编辑其他人的代码时很有用
"editor.quickSuggestionsDelay": 0 立即显示代码建议,而不是几秒钟后显示

最好的编码字体

我喜欢费拉密码。它是免费的,并且具有一些非常不错的编程连字,可以转换常见的结构,例如!===>更好的符号:

Fira code

通过安装字体并将其添加到您的配置中来启用它:

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true`

工作空间

可以在工作区设置中覆盖所有用户设置。他们优先。例如,当您使用的棉绒规则不同于您使用的所有其他项目的项目时,它们非常有用,并且您不想仅为此编辑自己喜欢的设置。

您可以通过以下方式从现有项目创建工作区:File ➤ Save Workspace as...菜单。

当前打开的文件夹将被启用为工作区主文件夹。

下次打开VS代码或切换项目时,无需打开文件夹,而是打开工作区,这将自动打开包含代码的文件夹,并且它将记住您为该工作区设置的所有设置。

除了具有工作空间级别的设置之外,您还可以禁用特定工作空间的扩展。

您可以只使用文件夹,直到有特定的原因想要使用工作空间为止。

一个很好的理由是能够具有多个单独的根文件夹。您可以使用File ➤ Add Folder to Workspace添加新的根文件夹,该根文件夹可以位于文件系统中的任何位置,但将与您拥有的其他现有文件夹一起显示。

编辑中

智能感知

当您使用一种支持的语言(JavaScript,JSON,HTML,CSS,Less,Sass,C#和打字稿)VS Code具有IntelliSense,该技术可在您键入功能和参数时提示它们自动完成。

代码格式化

两个方便的命令(Format DocumentFormat Selection)可在“命令”面板上使用,以自动设置代码格式。默认情况下,VS Code支持自动格式化HTML,JavaScript,TypeScript和JSON。

错误和警告

打开文件时,您会在右侧看到带有一些颜色的条形图。这些颜色表明您的代码中存在一些问题。例如,这是我现在看到的内容:

Warnings

这些都是警告或错误。您可以尝试在代码中找到它们,在其中看到带红色下划线的部分,或者也可以按CMD-Shift-M(或选择View ➤ Problems

View problems

键盘快捷键

到目前为止,我向您展示了许多键盘快捷键。

记住它们变得越来越复杂,但是它们是一个很好的生产力辅助工具。我建议打印官方快捷方式备忘单,苹果电脑的Linux视窗

按键图

如果您习惯于使用其他编辑器的键盘快捷键,则可能是因为您长时间使用一个编辑器,因此可以使用键盘映射。

VS Code团队为开箱即用的最受欢迎的编辑器提供了键盘映射:vim,Sublime Text,Atom,IntelliJ,Eclipse等。它们可作为插件使用。通过打开Preferences ➤ Keymaps Extensions菜单。

代码段

片段非常酷。

对于您可能要使用的每种语言,都有一些扩展提供了现成的代码片段供您使用。

对于JavaScript / React,一种流行的方法是VS Code ES7 React / Redux / React-Native / JS片段

你只要输入rfe,按TAB键,它就会出现在您的编辑器中:

import React from 'react'

const $1 = props => { return <div>$0</div> }

export default $1

这些快捷方式很多,它们可以节省大量时间。不仅来自键入,而且还来自查找正确的语法。

您还可以定义自己的摘录。点击Preferences ➤ User Snippets并按照说明创建您自己的代码段文件。

扩展展示

VS Code CLI命令

打开命令面板,然后搜索install 'code' command in PATH命令。

按Enter键,然后按code命令将在您的命令行中全局可用。

这对于启动编辑器并使用当前文件夹的内容打开新窗口非常有用,code .

code -n将创建一个新窗口。

并非总是有用的一件事是,VS Code可以快速显示两个文件之间的差异,code --diff file1.js file2.js

解决高使用率CPU问题

我遇到一个高CPU使用率和风扇旋转的问题,该项目下有很多文件node_modules。我添加了此配置,一切看起来又正常了:

  "files.exclude": {
    "/.git": true,
    "/.DS_Store": true,
    "/node_modules": true,
    "/node_modules/": true
  },
  "search.exclude": {
    "/node_modules": true
  },
  "files.watcherExclude": {
    "/node_modules/": true
  },

更多devtools教程: