如何在Mac上安装Visual Studio Code

如果你是开发者或编码人员,那么你很可能一直在寻找新的工具来帮助简化你的工作流程。幸运的是,你可以在 Mac 上找到最好的代码编辑器之一,那就是 Visual Studio Code。

Visual Studio Code(VS Code)提供了许多功能,可以帮助你更高效地编写代码。在本文中,你将学习如何在 Mac 上安装 VS Code,并了解一些最佳的扩展和主题,以帮助你入门。

继续阅读,准备好提升你的工作效率吧!

先决条件

本教程将进行实际操作演示。如果你想跟着做,请确保你有一台 macOS 设备。本教程使用的是 Apple Silicon(M1)芯片,所以如果你有一台基于 Intel 的 Mac,则步骤可能略有不同。

下载适用于 Mac 的 Visual Studio Code

Visual Studio Code(VS Code)是微软推出的一款免费开源的代码编辑器,适用于 Windows、Linux 和 macOS。但和其他工具一样,你需要下载并安装 VS Code 到你的系统上。

1. 打开你喜欢的网络浏览器,前往VS Code 下载页面

2. 接下来,点击 Mac 图标下的 Apple Silicon,下载 VS Code 的 Mac 包安装程序 ZIP 文件。这个 Apple Silicon(M1)版本是由 Apple 开发的最新芯片。

如果你有一台带有 Intel 处理器的旧版 Mac,请点击 Intel Chip。

Downloading VS Code for Mac

最后,在你的终端中运行以下ls命令,以验证你下载的VS Code包安装程序。

ls -la ~/Downloads/VSCode-darwin-arm64.zip

下面的输出显示了zip文件的位置。

Verifying the downloaded zip file

在Mac上安装Visual Studio Code

现在,你已经下载了VS Code安装程序,准备在你的Mac上安装VS Code并体验一个重新定义的代码编辑器。VS Code经过优化,使你能够更有效地构建和调试现代的Web和云应用程序。

VS Code的另一个强大功能是通过在市场上找到的扩展来支持大量的编程语言。

在Mac上安装VS Code的步骤:

1. 选择下载的VS Code zip文件 → 点击省略号图标(右上角) → 打开以解压ZIP文件。

解压后,你应该在下载文件夹中有一个新的Visual Studio Code应用程序。

Unzipping the VS Code zip file

2. 接下来,请运行以下ls命令验证应用程序文件。此命令会列出Visual Studio Code应用程序文件的内容。

反斜杠符号(\)是一个转义字符,告诉终端将空格视为普通字符。当文件名中有空格时,必须使用转义字符。

ls -la ~/Downloads/Visual\ Studio\ Code.app
Listing the contents of the Visual Studio Code application file

3. 运行以下open命令以在新实例(-n)中启动安装程序。

open -n ~/Downloads/Visual\ Studio\ Code.app
Launching the installer

4. 现在,在出现提示时点击“打开”以继续安装。

此警告出现是因为您从互联网下载了该应用程序,可以安全忽略。

Opening the installer

安装完成后,VS Code应用程序会打开,并且您将看到下面的“入门”页面。

Viewing VS Code’s main window.

导航VS Code的图形用户界面

您已成功在Mac上安装了VS Code,但在进行编码之前,请先熟悉VS Code的图形用户界面和功能。

VS Code代码具有许多功能,让您可以:

  • 选择主题,并更改编辑器的外观。
  • 打开项目文件夹,这样您可以快速在文件之间切换,并确保文件结构正确。
  • 添加源代码控制系统,如Git。
  • 快速从市场添加扩展等。

这些只是 VS Code 能提供的一小部分功能。亲自体验每个功能如何帮助你的工作流程。也许改变主题是个好的开始。

1. 从“入门”页面中根据你的喜好选择编辑器主题,保持其他设置默认,然后点击“标记完成”(左下角)。

如果浅色和深色主题不符合你的口味,点击“查看更多主题”寻找一个吸引你的主题。

Selecting a theme

2. 接下来,探索 VS Code 最左侧的部分,即活动栏,它有七个主要部分。但首先从其中一个最重要的部分开始,即资源管理器(Ctrl+Shift+E / Cmd+Shift+E)。

资源管理器显示项目中的文件和文件夹,你可以在此克隆存储库。此外,资源管理器还可以执行以下不同操作:

  • 在你的项目中创建、删除和重命名文件和文件夹。
  • 通过拖放文件和文件夹来移动它们到项目文件夹中。

请注意,“拖放”功能仅在从 VS Code 外部将文件移动到资源管理器时才有效。但如果资源管理器为空,则 VS Code 会将文件打开到编辑器中。

Viewing the Explorer section

3. 点击搜索图标(Ctrl+Shift+F / Cmd+Shift+F),打开搜索部分,在这里您可以搜索项目中的文件、符号和文本。

Viewing the Search section

4. 现在,点击源代码控制图标(Ctrl+Shift+G / Cmd+Shift+G),打开源代码控制部分,在这里您可以使用Git或其他源代码控制系统管理您的项目。

VS Code 自带集成的源代码控制管理(SCM),默认包含了 Git 支持。

Viewing the Source Control section

5. 在源代码控制之后,点击运行和调试图标(Ctrl+Shift+D / Cmd+Shift+D),打开运行和调试:运行部分,在这里您可以运行和调试您的项目。

Viewing the Run and Debug section

6. 最后,点击扩展图标(Ctrl+Shift+X / Cmd+Shift+X),进入扩展部分,在这里您可以从市场安装扩展。

Viewing the Extensions section

通过命令行环境启动 VS Code

也许您大部分时间都在命令行环境中,但需要快速编写一些代码。如果是这样,配置 VS Code 通过命令行环境启动将对您有利。

1. 在 VS Code 上按下(Cmd+Shift+P 或 Ctrl+Shift+P),打开命令面板,在这里您可以访问所有 VS Code 的功能。

2. 在命令面板中键入 Shell Command: Install ‘code’ command in PATH,并按 Enter。此命令会将 VS Code 可执行文件添加到您系统的 PATH 变量中。

Adding the VS Code executable to your system’s PATH variable

3. 添加后,请重新启动终端以使更改生效。现在您的终端中已经可以使用code命令。

4. 现在,创建一个文本文件,添加一些文本,然后保存并关闭该文件。

5. 最后,运行以下命令来启动 VS Code(code),并传入您的文本文件的文件路径(text.txt),在这种情况下,是从工作目录中进行。

# 切换到您保存文本文件的目录
cd Downloads
# 启动 VS Code 并打开文本文件
code . text.txt

您将看到 VS Code(在右侧)打开,并显示您的text.txt文件的内容在编辑窗口中显示。您现在可以使用 VS Code 的强大功能来编辑此文件。

Launching VSCode via the command-line environment

安装扩展以添加功能

VS Code 的最大优点之一是它的高度可定制性。怎么做?您可以安装扩展以添加新功能,并且有许多不同的扩展可用。

也许您想安装macOS Color Picker 扩展。此扩展允许您在使用 CSS、HTML 和 JavaScript 文件时选择原生 macOS 颜色选择器。

1. 转到活动栏中的扩展菜单,它有三个部分:

  • INSTALLED – 此部分显示已安装的扩展。
  • 推荐 – 本节显示根据您打开的文件类型推荐的扩展。例如,如果您使用JavaScript文件,则会看到推荐的JavaScript扩展。
  • 热门 – 本节显示最受欢迎的VS Code扩展。
Accessing the Extensions panel

2. 在搜索框中键入macOS Color Picker,然后按Enter键。将以降序(首先是最匹配的扩展)显示与之匹配的扩展的列表。

一旦看到目标扩展,单击扩展旁边的安装按钮。安装按钮变为绿色的启用按钮,因此单击它以启用扩展。

Installing the macOS Color Picker extension.

安装扩展后,右侧将显示扩展的概览页面,如下所示。

Verifying the macOS Color Picker is installed

3. 现在打开CSS、HTML或JavaScript文件以测试新的macOS Color Picker扩展。

4. 最后,打开命令面板(Cmd+Shift+P / Ctrl+Shift+P),键入Open Color Picker,然后按Enter键。macOS Color Picker窗格将打开,如下所示。

使用颜色选择器选择颜色,该颜色将插入到您的代码中。这个扩展是快速获取所需颜色值的好方法,而无需记住十六进制代码。

Testing the new macOS Color Picker extension

结论

在本教程中,您学会了如何在Mac上安装VS Code以及添加更多功能的扩展,使编写代码更加愉快。此时,您可以充分利用VS Code在下一个项目上的优势。

但不要就此止步!有了这些新知识,为什么不使用Git和GitHub进行版本控制来跟踪您的工作呢?

Source:
https://adamtheautomator.com/visual-studio-code-on-mac/