Visual Studio代码介绍
这一章讲了什么?
- 安装和开始使用Visual Studio代码
- 理解组成Visual Studio代码的跨平台组件
开始
任何开发人员使用的编辑器的选择都是非常私人的。选择一个而不是其他的原因取决于一组通常与他们每天执行的任务相关的属性。开发人员寻找功能、键击快捷键、代码片段、颜色,以及更多让他们保持高效的东西。
让开发者放弃他们的选择并不容易。编辑器中的任何更改都会立即导致生产力的损失。毕竟,熟悉所提供的特性并使它们成为编码“流程”的自然组成部分需要时间。因此,开发人员需要一个特殊的“更好”级别来切换编辑器。
因此,Visual Studio Code的成功充分说明了它的特性和功能。虽然它正式发布才三年(2016年4月才公开预览),但就受欢迎程度而言,它已经迅速成为顶级编辑器之一,与Sublime Text、Atom和UltraEdit争夺榜首。
但这对读者来说并不重要。你更关心的是Visual Studio Code能做些什么来帮助你提高效率。作为一名开发人员,常常是一些小事情产生了最大的不同——知道如何用一个键盘和弦添加代码,能够在您的服务器上进行客户端和服务器调试<代码class="prism-code language-none rounded-md p-1 break-words" style="color:#bfc7d5;background-color:#292d3e">node . js对项目或语言敏感的代码完成。任何一个,所有的,或者都不重要,但本书的目标是帮助你找到5到10个对你重要的特性,让你对使用Visual Studio Code感到兴奋。
安装Visual Studio代码
Visual Studio Code是一个跨平台的编辑器。在这种情况下,跨平台意味着一个版本可以在Windows(7、8和10)、macOS和Linux上运行。每种安装过程都类似,并且在所有情况下的起点都是相同的:<代码class="prism-code language-none rounded-md p-1 break-words" style="color:#bfc7d5;background-color:#292d3e">https://code.visualstudio.com/Download.图1-1显示了目前的下载页面,但它自然会发生变化。
图1 - 1
窗户
安装Windows最有效的起点是下载所需的安装程序。你有六种可能的选项——三种不同的安装程序,每一种都有32位和64位的格式,按照两个不同的属性划分。首先,你可以从三种安装类型中选择——system、User和Zip:
- 系统安装程序-这是Visual Studio Code的原始安装程序。它需要本地管理员权限,并将可执行文件和支持文件放在Program files目录结构中。
- 用户安装程序- Visual Studio Code的最新添加,此安装程序不需要管理员权限即可成功安装。您可以在“Program files”结构中找到文件,而不是将文件放在“Program files”结构中<代码class="prism-code language-none rounded-md p-1 break-words" style="color:#bfc7d5;background-color:#292d3e">当地AppData \ \项目在您的用户目录中。因为这实际上是首选的安装程序,系统将询问您是否想要卸载使用系统安装程序安装的任何版本。
使用这两个安装程序之一安装Visual Studio Code时,当有更新可用时,会自动通知您。Visual Studio Code的变化速度意味着更新大约每月交付一次。
- 邮政编码- Zip选项只是一个Zip压缩文件,其中包含放置的内容<代码class="prism-code language-none rounded-md p-1 break-words" style="color:#bfc7d5;background-color:#292d3e">当地AppData \ \项目用户安装程序。打开文件后,可以将内容复制到您喜欢的任何位置。但是,您负责创建到可执行文件(称为<代码class="prism-code language-none rounded-md p-1 break-words" style="color:#bfc7d5;background-color:#292d3e">code.exe),你想放在你的桌面或任务栏。此外,你不会自动收到更新。如果您希望使用最新的版本,则需要下载一个新的ZIP文件并重新复制这些文件。
第二个可用于安装程序的属性值为32位或64位。这是指设备上的CPU支持的数据单元的宽度。如果您运行的是32位的Windows,请选择所需安装程序的32位版本。如果你运行的是64位的Windows,你可以选择32位或64位版本。
请注意
这可能会让一些人失望,但这个选择确实会让人失望不这意味着Visual Studio Code是一个64位的应用程序。它不是。Visual Studio Code是一个32位的应用程序,不管它是否运行在64位版本的Windows上。
对于系统安装程序和用户安装程序,运行安装程序提供类似的体验。安装过程由以下界面组成:
- 欢迎屏幕-描述你将要做什么(即安装Visual Studio Code)。说明说明您使用的是用户安装程序还是系统安装程序。
- 许可协议Visual Studio Code的许可协议。你必须接受协议,然后才能安装软件。
- 选择目标位置在这个界面中,如图1-2所示,你选择要安装Visual Studio Code的目录。用户版本和系统版本的默认值不同。对于User安装,它被放置在<代码class="prism-code language-none rounded-md p-1 break-words" style="color:#bfc7d5;background-color:#292d3e">C:\Users\<您的用户名>\AppData\Local\Programs\Microsoft VS Code.对于系统安装,它被放置在<代码class="prism-code language-none rounded-md p-1 break-words" style="color:#bfc7d5;background-color:#292d3e">C:\Program Files (386)\Microsoft VS Code.如果你在32位操作系统上运行,目录的(386)部分将被省略。
图1 - 2
- 选择开始菜单文件夹-一旦你指定了Visual Studio Code的安装位置,你就可以在开始菜单中确定到应用程序的链接放在哪里。对话框如图1-3所示。默认文件夹是Visual Studio Code,但您可以提供另一个名称,在现有的开始菜单文件夹中浏览,或者根据需要创建一个新文件夹。如果您不想添加任何开始菜单项,请选中对话框左下角的“不创建开始菜单文件夹”复选框。
图1 - 3
- 选择附加任务-可以在安装过程中执行一些额外的任务。如图1-4所示对话框中的选项包括:
图1 - 4
- 创建启动Visual Studio Code的桌面图标。
- 在Windows资源管理器文件和目录的上下文菜单中添加“使用代码打开”选项。
- 将Visual Studio Code注册为任何支持的文件类型的编辑器。这将导致Visual Studio Code出现在Windows资源管理器上下文菜单中的“打开与”选项列表中。
- 将Visual Studio Code的安装目录添加到<代码class="prism-code language-none rounded-md p-1 break-words" style="color:#bfc7d5;background-color:#292d3e">路径环境变量。这使得Visual Studio Code命令可以在命令行工具中调用。请记住,任何更改都需要重新启动计算机<代码class="prism-code language-none rounded-md p-1 break-words" style="color:#bfc7d5;background-color:#292d3e">路径生效
- 准备安装-安装过程的最后一步,如图1-5所示,是你在其他屏幕上选择的选项的摘要。如果单击“Install”,则开始安装。
图1 - 5
Linux
在Linux上安装Visual Studio Code的基本步骤是相同的,不管你使用的是哪种发行版:
- 下载相应的软件包。
- 使用适合您的发行版的工具安装它。
但是,这些步骤中的具体内容取决于您的发行版。下面几节将描述许多不同发行版的精确说明。
本节中的所有图形都是从Ubuntu内部捕获的,所以在您自己的环境中可能会看到一些略有不同的东西。另外,要注意,为了运行Visual Studio Code,您需要在Linux环境中安装桌面。
Ubuntu和Debian发行版
Ubuntu或Debian的安装流程与Windows或macOS非常相似:
- 打开您最喜欢的浏览器并导航到<代码class="prism-code language-none rounded-md p-1 break-words" style="color:#bfc7d5;background-color:#292d3e">https://code.visualstudio.com/download.该网页外观如图1-6所示。
图1 - 6
- 确定所需的安装包并下载。64位和32位版本的Visual Studio Code是可用的,以及一个gzip的TAR文件。使用适合您平台的版本(即,不是TAR文件)。
- 系统将提示您如何处理该文件。界面如图1-7所示。虽然从Software Install打开似乎是显而易见的选择,但是选择Save File单选按钮并单击OK。
图1 - 7
- 下载完文件后,打开一个终端窗口。将目录更改为下载文件的位置。默认情况下,这样做的命令是:
cd~ /下载
- 安装包使用<代码class="prism-code language-none rounded-md p-1 break-words" style="color:#bfc7d5;background-color:#292d3e">恰当的用途:
sudo恰当的安装./<文件>. deb
请注意
在某些情况下,可能需要安装一些额外的依赖项。如果发生这种情况,您将在最后一个命令的输出中看到缺失的依赖项。您可以手动安装依赖项(使用相同的
apt安装
命令),或者您可以执行以下命令来安装所有缺失的依赖项:
sudoapt-get安装- f
此时,Visual Studio Code应该已经准备好了。执行代码
在终端内启动应用程序(参见图1-8)。
图1 - 8
CentOS、Fedora和RHEL发行版
获取Visual Studio Code安装文件的另一种方法是通过YUM存储库。微软维护了一个YUM存储库,其中包含当前稳定的64位版本的Visual Studio代码。
请注意
YUM (Yellowdog Updater, Modified)存储库是RPM (Red Hat Package Manager)文件的存储库。该存储库的目的是提供一种简单的机制,通过该机制可以安装软件、解析依赖关系并交付更新。它在概念上与NuGet或NPM(节点包管理器)相同。
要安装密钥和YUM存储库,请在Linux机器上执行以下命令:
sudorpm——进口https://packages.microsoft.com/keys/microsoft.ascsudo上海- c'echo -e "[code]\nname=Visual Studio代码\ \ nenabled = 1 \ nbaseurl = https://packages.microsoft.com/yumrepos/vscodengpgcheck = 1 \ ngpgkey = https://packages.microsoft.com/keys/microsoft.asc " >/etc/yum.repos.d / vscode.repo '
第一个命令将存储库的密钥导入到环境中。第二个是将Microsoft存储库添加为公认的YUM存储库。这是通过创建一个名为<代码class="prism-code language-none rounded-md p-1 break-words" style="color:#bfc7d5;background-color:#292d3e">vscode.repo),并把它放在<代码class="prism-code language-none rounded-md p-1 break-words" style="color:#bfc7d5;background-color:#292d3e">/etc/yum.repos.d目录中。
一旦完成,您可以通过执行以下命令更新YUM包缓存:
百胜全部选中更新
现在您已经准备好实际安装Visual Studio Code了。的<代码class="prism-code language-none rounded-md p-1 break-words" style="color:#bfc7d5;background-color:#292d3e">yum安装开始安装:
sudo百胜安装代码
命令完成后,Visual Studio Code就可以运行了。
请注意
微软对YUM存储库中的包使用手动签名过程。因此,用于发布Visual Studio Code的系统不能在将更新的包交付到其他分发点(如Visual Studio Code网站)的同时交付更新的包;更新在其他平台和YUM存储库中可用之间可能会有延迟。
OpenSUSE和SLE发行版
对于这些发行版,YUM存储库是获取Visual Studio代码的最佳选择。不同之处在于需要执行的命令。下面的命令安装密钥和存储库:
sudorpm——进口https://packages.microsoft.com/keys/microsoft.ascsudo上海- c'echo -e "[code]\nname=Visual Studio代码\ nbaseurl = https://packages.microsoft.com/yumrepos/vscode \ nenabled = 1 \ ntype = r点检测——md \ ngpgcheck = 1 \ ngpgkey = https://packages.microsoft.com/keys/microsoft.asc " >/etc/zypp/repos.d/vscode.repo”
下面两个命令将更新包缓存并安装Visual Studio Code:
sudozypper刷新sudozypper安装代码
Nix包管理器
Linux世界中偶尔出现的另一个包管理器是Nix。虽然微软没有维护一个Nix包,但社区管理的版本可以在<代码class="prism-code language-none rounded-md p-1 break-words" style="color:#bfc7d5;background-color:#292d3e">https://github.com/NixOS/nixpkgs/blob/master/pkgs/applications/editors/vscode/vscode.nix.
要使用Nix安装Visual Studio Code,请设置<代码class="prism-code language-none rounded-md p-1 break-words" style="color:#bfc7d5;background-color:#292d3e">allowUnfree在您的<代码class="prism-code language-none rounded-md p-1 break-words" style="color:#bfc7d5;background-color:#292d3e">config.nix文件为true。然后执行如下命令:
Nix-env -i vscode
macOS
像Windows一样,在macOS上安装Visual Studio Code的起点是Visual Studio Code下载页面(在<代码class="prism-code language-none rounded-md p-1 break-words" style="color:#bfc7d5;background-color:#292d3e">https://code.visualstudio.com/Download如图1-9所示)。
图1 - 9
点击右边的Mac选项开始下载。当它完成后,打开浏览器上的下载部分并打开下载的文件。您将看到一条警告消息,表明您正在尝试打开的文件来自Internet(图1-10)。
图1 - 10
单击“打开”按钮以展开下载的文件。因为下载的是一个ZIP文件,这意味着内容是可见的。拖动Visual Studio<代码class="prism-code language-none rounded-md p-1 break-words" style="color:#bfc7d5;background-color:#292d3e">Code.app文件到<代码class="prism-code language-none rounded-md p-1 break-words" style="color:#bfc7d5;background-color:#292d3e">应用程序文件夹中。这使得Visual Studio代码可以在你的Launchpad中使用。
如果您想将Visual Studio Code添加到您的平台上,请右键单击图标并选择“选项”(图1-11)。
图1 - 11
请注意
如果在安装Visual Studio Code后升级到macOS Mojave,可能会开始看到提示Visual Studio Code需要访问一些常见文件位置的对话框。具体来说,您可能会在对话框中看到任何或所有日历、照片和联系人。这些对话框是Mojave的安全附加,因此,并不是Visual Studio Code所特有的。运行其他应用程序可能会生成相同的对话框。你可以安全地回答“不允许”这些请求。Visual Studio Code不需要访问这些文件夹,如果您拒绝请求,也不会对任何功能产生影响。
跨平台如何运作
尽管对于能够使用Visual Studio Code并不是必需的,但是理解允许它跨它所支持的不同平台工作的基础是有指导意义的。如果你有任何关于为Visual Studio Code创建扩展的想法,这个主题将在第10章“创建你自己的扩展”中介绍。
首先,Visual Studio Code是一个开源项目。这意味着任何人都可以轻易地查看源代码。如果你愿意,甚至可以为之贡献力量。你可以在<代码class="prism-code language-none rounded-md p-1 break-words" style="color:#bfc7d5;background-color:#292d3e">https://github.com/Microsoft/vscode.
Visual Studio Code基于一个叫做Electron的框架。Electron的设计允许使用web应用程序的前端和后端组件创建桌面应用程序。在前端,JavaScript、HTML和CSS用于创建用户界面功能。界面使用Chromium渲染。
请注意
Chromium是一个开源的网络浏览器项目,由谷歌领导。它是构建Chrome的基础,也将是微软Edge未来版本的基础。
在后端,Node.js用于为用户界面组件提供服务,并提供任何附加功能。这种技术组合允许它在三个主要平台的桌面上运行:Windows、macOS和Linux。
Electron最初是由GitHub创建的,表面上看,它的主要目的是支持Atom文本编辑器。但它的使用还不止于此。它目前被广泛应用于各种应用程序,从集成开发环境(ide)到音乐播放器再到游戏。
虽然Electron是构建Atom的基础,但Visual Studio Code并不使用Atom作为编辑器。相反,它使用了Azure DevOps(以前称为Visual Studio Team Services,以前是Visual Studio Online)中相同的文本编辑器。文本编辑器叫做Monaco。它也是开源的,可以从Visual Studio Code中单独获得<代码class="prism-code language-none rounded-md p-1 break-words" style="color:#bfc7d5;background-color:#292d3e">https://microsoft.github.io/monaco网络编辑器).
额外的公共功能是通过许多其他渠道实现的。例如,着色是通过Monarch提供的,该库允许您使用声明性语法指定语法高亮显示。更棒的是,语法是使用JSON表示的,这可能是大多数web开发人员所熟悉的。
另一个例子是,特定于语言的功能,如自动补全、格式化和诊断,是在单独的语言服务器中实现的。这个服务器运行在一个独立于Visual Studio Code的进程中,其目标是最小化执行连续的词典分析可能对IDE造成的任何影响。Visual Studio Code使用语言服务器协议(LSP)与这些服务器通信(您正在编辑的每种语言通常都有一个)。
总结
您已经了解了如何在Visual Studio Code支持的不同操作系统上安装Visual Studio Code。一旦应用程序准备好了,跨平台的用户体验就会非常一致。这与Visual Studio Code是如何构建的(即在Electron平台上)有关。
在随后的章节中,您将学习如何定制IDE以更适合自己的工作风格。您还将看到Visual Studio Code如何努力使您的开发过程更容易和更快。