这是本节的多页打印视图。 点击此处打印.

返回本页常规视图.

VS Code学习笔记

1 - 介绍

VS Code的介绍，以及VS Code的资料收集

1.1 - 概况

介绍VS Code概况

介绍

Visual Studio Code是一个轻量级但功能强大的源代码编辑器，在你的桌面上运行，可用于Windows、macOS和Linux。它内置了对JavaScript、TypeScript和Node.js的支持，并有一个丰富的扩展生态系统，可用于其他语言和运行系统（如C++、C#、Java、Python、PHP、Go、.NET）。

官方介绍

来自页面 https://code.visualstudio.com/

Code editing.

Redefined.

Free. Built on open source. Runs everywhere.

  • 满足IntelliSense

    IntelliSense超越了语法高亮和自动完成，它提供了基于变量类型、函数定义和导入模块的智能完成。

  • 打印语句的调试已经成为过去

    直接从编辑器中调试代码。启动或附加到你正在运行的应用程序，用断点、调用堆栈和交互式控制台进行调试。

  • 内置Git命令

    与Git和其他SCM供应商合作从未如此简单。在编辑器中查看差异、阶段性文件，并直接进行提交。从任何托管的SCM服务中推拉。

  • 可扩展和可定制

    想要更多的功能？安装扩展程序来添加新的语言、主题、调试器，并连接到其他服务。扩展程序在独立的进程中运行，确保它们不会拖慢你的编辑器。了解更多关于扩展的信息。

  • 充满信心和轻松地进行部署

    通过微软Azure，你可以部署和托管你的React、Angular、Vue、Node、Python（以及更多！）网站，存储和查询基于关系和文档的数据，并通过无服务器计算进行扩展，所有这些都可以在VS Code中轻松实现。

1.2 - 资料

收集VS Code的各种资料

官方资料

学习资料

2 - 安装部署

在各种环境下安装配置VS Code

2.1 - 安装概述

概述介绍VS Code的安装

setup

摘录自：https://code.visualstudio.com/docs/setup/setup-overview

使用Visual Studio Code启动和运行是快速而简单的。它的下载量很小，所以你可以在几分钟内安装，并试一试VS Code。

跨平台

VS Code是一个免费的代码编辑器，它可以在macOS、Linux和Windows操作系统上运行。

请遵循以下特定平台的指南：

  • macOS
  • Linux
  • Windows

VS Code是轻量级的，应该可以在大多数可用的硬件和平台版本上运行。你可以查看系统要求以检查你的计算机配置是否被支持。

更新节奏

VS Code每个月都会发布一个新的版本，包含新的功能和重要的错误修复。大多数平台支持自动更新，当新版本可用时，你会被提示安装。你也可以通过在Linux和Windows上运行帮助>检查更新，或者在macOS上运行代码>检查更新来手动检查更新。

注意：如果你喜欢按照自己的计划更新VS Code，你可以禁用自动更新。

Insiders nightly build

如果你想尝试我们的nightly build，以尽早看到新功能或验证错误修复，你可以安装我们的Insiders构建。Insiders 版本与每月的稳定版本并排安装，你可以在同一台机器上自由地使用这两种版本。Insiders版本是VS Code开发团队日常使用的版本，我们非常感谢人们尝试新功能并提供反馈。

便携模式

Visual Studio Code支持便携模式的安装。这种模式使VS Code创建和维护的所有数据都在自己附近，所以它可以在不同的环境中移动，例如，在USB驱动器上。详情请见VS Code便携模式文档。

附加组件

VS Code首先是一个编辑器，并以其占用空间小而自豪。与传统的往往包括所有的东西IDE不同，你可以根据你关心的开发技术调整你的安装。在阅读完平台指南后，请务必阅读 “附加组件 “主题，了解如何定制你的VS Code安装。

扩展

VS Code的扩展允许第三方增加对额外的支持。

  • 语言 - C++, C#, Go, Java, Python
  • 工具 - ESLint, JSHint , PowerShell
  • 调试器 - PHP XDebug.
  • 按键映射 - Vim, Sublime Text, IntelliJ, Emacs, Atom, Brackets, Visual Studio, Eclipse

扩展集成到VS Code的用户界面、命令和任务运行系统中，所以你会发现通过VS Code的共享界面可以很容易地使用不同的技术。查看VS Code的扩展市场，看看有什么可用的。

接下来的步骤

一旦你安装并设置了VS Code，这些主题将帮助你了解更多关于VS Code的知识：

  • 附加组件 - 了解如何安装Git、Node.js、TypeScript和Yeoman等工具。
  • 用户界面 - 快速了解VS Code。
  • 基本编辑 - 了解强大的VS Code编辑器。
  • 代码导航 - 快速浏览你的源代码。
  • 调试 - 直接在VS Code编辑器中调试你的源代码。
  • 代理服务器支持 - 配置你的代理设置。

如果你想快速运行一些东西，可以试试Node.js教程的演练，它能让你在几分钟内用VS Code调试一个Node.js网络应用。

常见问题

我如何创建和运行一个新的项目？

VS Code 不包括传统的 文件 > 新项目 对话框或预装的项目模板。你需要根据你的开发兴趣来添加额外的组件和脚手架。有了像Yeoman这样的脚手架工具和通过npm包管理器提供的大量模块，你肯定能找到合适的模板和工具来创建你的项目。

我怎样才能 “干净 “地卸载VS Code？

如果你想在卸载 VS Code 后删除所有用户数据，你可以删除用户数据文件夹 Code 和 .vscode。这将使您回到安装VS Code之前的状态。如果你不想卸载VS Code，这也可以用来重置所有设置。

文件夹的位置会因你的平台不同而不同。

  • Windows - 删除 %APPDATA%Code 和 %USERPROFILE%\.vscode。

  • macOS - 删除 $HOME/Library/Application Support/Code 和 ~/.vscode。

    如果要完全清理，最好删除以下内容：

    rm -fr ~/Library/Preferences/com.microsoft.VSCode.helper.plist 
rm -fr ~/Library/Preferences/com.microsoft.VSCode.plist 
rm -fr ~/Library/Caches/com.microsoft.VSCode
rm -fr ~/Library/Caches/com.microsoft.VSCode.ShipIt/
rm -fr ~/Library/Application\ Support/Code/
rm -fr ~/Library/Saved\ Application\ State/com.microsoft.VSCode.savedState/
rm -fr ~/.vscode/

  • Linux - 删除 $HOME/.config/Code 和 ~/.vscode。

2.2 - Linux Mint安装

在Linux Mint上安装VS Code

下载安装

https://code.visualstudio.com/docs/?dv=linux64_deb

下载的 code_1.73.0-1667318785_amd64.deb 文件直接安装即可。

2.3 - macos安装

在macos上安装VS Code

下载

https://code.visualstudio.com/download

根据 cpu 芯片选择 intel / apple silicon 或者 universal。

安装

将下载的 zip 文件解压缩，将 vs code.app 文件拖到 applications 目录。

3 - 配置

配置VS Code

3.1 - 概述

概述介绍VS Code的配置

3.2 - 主题

配置VS Code的主题

参考文档

https://code.visualstudio.com/docs/getstarted/themes

设置主题

启动后，在 Get Started 界面，“choose the look you want"中选择 “Brower Color themes”，然后选择 “solarized dark”，这是个人最喜欢的一个配色。

或者 ctrl + shift + p 打开 command palette, 然后输入 color theme，在这里直接选择需要的主题。

设置文件图标

或者 ctrl + shift + p 打开 command palette, 然后输入 file icon theme，在这里直接选择需要的文件图标。

也可以选择 “Install Additional file icon theme”, 打开列表之后选择 “Material Icon Theme”

3.3 - 字体

配置VS Code的字体

个人配置

默认字体为：

'Droid Sans Mono', 'monospace', monospace

在安装了文泉微米等宽黑字体之后，就可以在vs code中启用这个圆润的多的字体了：

'WenQuanyi Micro Hei Mono', 'monospace', monospace

然后将默认字体大小从 14 修改为 18（27寸4k显示器, mbp 上我用20）。

常见问题

无法在Ubuntu中看到汉字

我们正在进行修复。在此期间，打开应用程序菜单，然后选择文件>偏好>设置。在文本编辑器>字体部分，将 “Font Family” 设置为 Droid Sans Mono, Droid Sans Fallback。如果你想直接编辑 settings.json文件，可以设置 editor.fontFamily，如图所示。

"editor.fontFamily": "Droid Sans Mono, Droid Sans Fallback"

3.4 - 同步

配置VS Code的同步

启动后，在 Get Started 界面，“Sync to and from devices"中点击 “Enable Settings Sync”，然后选择 “github” 帐号。

3.5 - 快捷键

配置VS Code的快捷键

参考官方的 Keyboard reference sheets：

https://code.visualstudio.com/docs/getstarted/tips-and-tricks#_keyboard-reference-sheets

Linux

General

  • Ctrl+Shift+P, F1 Show Command Palette
  • Ctrl+P Quick Open, Go to File…
  • Ctrl+Shift+N New window/instance

basic editing

Rich langurage editing

  • Ctrl+Shift+I Format document
  • F12 Go to Definition
  • F2 Rename Symbol
  • Ctrl+K M Change file language

Gavitation/导航

这里有两个最重要的快捷键：

  • Ctrl+Alt+- Go back
  • Ctrl+Shift+- Go forward

比较常用的：

  • Ctrl+G Go to Line…
  • Ctrl+P Go to File…
  • Ctrl+Shift+O Go to Symbo

mac

3.6 - 网络

配置VS Code的网络连接

摘录自 https://code.visualstudio.com/docs/setup/network

Visual Studio Code是建立在 Electron 之上的，并受益于 Chromium 的所有网络堆栈功能。这也意味着 VS Code 的用户可以获得谷歌浏览器中的大部分网络支持。

常见的主机名

VS Code 中的少数功能需要网络通信才能工作，如自动更新机制、查询和安装扩展以及遥测。为了使这些功能在代理环境下正常工作，你必须正确配置产品。

如果你在防火墙后面，需要允许VS Code使用的特定域，这里是你应该允许通信通过的主机名列表：

  • update.code.visualstudio.com - Visual Studio Code download and update server
  • code.visualstudio.com - Visual Studio Code documentation
  • go.microsoft.com - Microsoft link forwarding service
  • vscode.blob.core.windows.net - Visual Studio Code blob storage, used for remote server
  • marketplace.visualstudio.com - Visual Studio Marketplace
  • *.gallery.vsassets.io - Visual Studio Marketplace
  • *.gallerycdn.vsassets.io - Visual Studio Marketplace
  • rink.hockeyapp.net - Crash reporting service
  • bingsettingssearch.trafficmanager.net - In-product settings search
  • vscode.search.windows.net - In-product settings search
  • raw.githubusercontent.com - GitHub repository raw file access
  • vsmarketplacebadge.apphb.com - Visual Studio Marketplace badge service
  • az764295.vo.msecnd.net - Visual Studio Code download CDN
  • download.visualstudio.microsoft.com - Visual Studio download server, provides dependencies for some VS Code extensions (C++, C#)
  • vscode-sync.trafficmanager.net - Visual Studio Code Settings Sync service
  • vscode-sync-insiders.trafficmanager.net - Visual Studio Code Settings Sync service (Insiders)
  • vscode.dev - Used when logging in with GitHub or Microsoft for an extension or Settings Sync
  • default.exp-tas.com - Visual Studio Code Experiment Service, used to provide experimental user experiences

代理服务器支持

VS Code拥有与 Google Chromium 完全相同的代理服务器支持。下面是Chromium文档中的一个片段：

“Chromium 网络堆栈使用系统网络设置，这样用户和管理员就可以轻松控制所有应用程序的网络设置。网络设置包括：

  • 代理设置

  • SSL/TLS设置

  • 证书撤销检查设置

  • 证书和私钥存储”

这意味着你的代理设置应该被自动接收。

否则，你可以使用以下命令行参数来控制你的代理设置。

# 禁用代理
--no-proxy-server

# 手动代理地址
--proxy-server=<scheme>=<uri>[:<port>][;...] | <uri>[:<port>] | "direct://"

# 手动PAC地址
--proxy-pac-url=<pac-file-url>。

# 禁用每主机的代理
--proxy-bypass-list=(<trailing_domain>|<ip-address>)[:<port>][; ...］

要了解这些命令行参数的更多信息，请参见Chromium网络设置。

4 - Copilot

在 VS Code 中使用Copilot

4.1 - Copilot介绍

Copilot 介绍

https://github.com/features/copilot

4.2 - 开始使用Copilot

在 vs code 中安装配置 Copilot 以便开始使用

参考：

Getting started with GitHub Copilot in Visual Studio Code - GitHub Docs

步骤

安装 copilot 扩展

打开 vs code 的 extension marketplace, 搜索 compilot：

Selection_001

登录组织

扩展安装完成之后，vs code 提示要登录以使用 github copilit：

Selection_002

因为我是 microsoft 组织的成员，所以就简单了，在这里点 continue 就好：

Selection_003

github 开启 copilot

github 设置开启 copilot : Configuring GitHub Copilot settings on GitHub.com - GitHub Docs 。

完成后，vs code 左下角会有一个提示

Menu_001

点击后继续提示：

Visual_Studio_Code_001

容许之后，在 vs code 右下角可以看到 copilot 的标记：

Selection_004

使用

js 的简单例子

参考文档的说明：

https://docs.github.com/en/copilot/getting-started-with-github-copilot/getting-started-with-github-copilot-in-visual-studio-code#seeing-your-first-suggestion

在 vs code 中新建 a.js 文件，输入

function calculateDaysBetweenDates(begin, end) {

就能看到 copilot 的建议代码:

Selection_005

golang 的简单例子

新建一个 test.go 文件，输入提示注释, 回车之后， copilot 建议代码如下：

// server on port 8080
func main() {
	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
		w.Write([]byte("Hello, World!"))
	})
	http.ListenAndServe(":8080", nil)
}