VS Code 编辑器入门指南上篇-核心概念与组件
本文收发于「少数派」
写在前面
如果当电脑只能装一个软件还需要尽量不影响日常学习工作时,不知道你的选择会是什么。我把这个看似「荒诞」的问题理解为「All-in-One」的升级版拷问。
这个问题陪伴了我很久,每用一个软件我都会想想它对我究竟有多不可代替,然后决定是否继续用下去;当决定深度使用后,我就会问自己它能在多大程度上帮助我完成日常的学习和工作。截至这篇文章完稿,如果我的电脑只能装一个软件还要做到基本不影响日常学习工作,我的选择是 VS Code。
参考之前写过的 文献管理工具 Zotero 入门指南,本入门指南将从 VS Code 特点出发,介绍入门 VS Code 必须了解的核心概念和组件(上篇)以及 5 个 VS Code 实际使用场景(下篇)。希望对想了解和学习 VS Code 的读者能有一点帮助和启发,下文是该入门指南的上篇。
什么是代码编辑器
如果此前对「代码编辑器」没有任何概念,我们可以和文本编辑器(写作工具)进行类比,就是为了更好更方便进行代码编写开发的工具。
提到代码编辑器,不少「工龄」较长的程序员第一反应都会是 Notepad++,这款代码编辑器发布于 2003 年并更新至今,非常经典。因为使用惯性和轻量的特点它目前依旧很受欢迎。不过在 2020 年的今天,有更多好用的代码编辑器值得向你推荐。目前比较受欢迎的代码编辑器主要有 VS Code、Atom 和 Sublime text 。它们各有特点也都有不少死忠粉,新手在初期都可以尝试。
另外你或许还经常人提起 IDE(Intergreated Development Environment),和代码编辑器相比 IDE 更关注开箱即用的体验、对代码的智能理解和对大型项目的支持,因此相对「笨重」;代码编辑器则更加轻量,侧重于文件,对于语言和工作流的支持也更自由。
为什么选择 VS Code
Visual Studio Code(简称 VS Code)是一个由微软开发,同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器,它支持测试,并内置了 Git 版本控制功能,同时也具有开发环境功能,例如代码补全(类似于 IntelliSense)、代码片段和代码重构等。该编辑器支持用户个性化配置,例如改变主题颜色、键盘快捷方式等各种属性和参数,同时还在编辑器中内置了扩展程序管理的功能。
——维基百科
瑞士计算机科学家 Erich Gamma (《设计模式》作者、 Eclipse 主要开发者之一) 2011 年从 IBM 来到微软后起初负责组建团队开发一款线上开发工具(Manaco),后来他们在这个工具的基础上开发了如今的 VS Code 并于 2015 年发布。VS Code 定位为一个 高性能轻量级的编辑器,为了保证主进程的稳定,插件系统运行在主进程之外,所有个性化功能都由插件系统完成,在 IDE 和编辑器之间找到一个比较理想的平衡。
在微软所有开源项目中,VS Code 是目前最受欢迎的一个。经过不同工具之间的比较,我最终选择 VS Code 的原因包括:
- 完全免费且开源,更新迭代稳定
 - 跨平台编辑器,满足日常在不同系统中的使用
 - 占用系统资源比较少,大文件打开速度快
 - 插件丰富,扩展性极强
 - 使用人数多且社区活跃,碰到问题和需求容易找到解决方案
 
从 0 到 1 开始使用 VS Code
下载与安装
VS Code 有两个不同版本:稳定版(Stable)每月更新;预览版(Insiders)每个工作日更新。两个版本可同时安装互不影响,在 官网 即可选择自己需要的平台和版本,本文使用的版本为稳定版 1.44.1。

客户端安装完成后,如希望通过终端启动 VS Code,可以按下  shift+command+p  调出命令面板,在搜索框内输入shell command  后找到并点击「Shell Command: Install 'code' command in PATH」即可。

VS Code 默认是英文界面,这里并不建议把默认语言修改为中文,因为在学习大量英文相关教程和说明时使用英文界面或许更容易操作。另外,VS Code 绝大多数插件都没有汉化,使用起来会中英混杂。
如果需要使用中文,依旧可以通过  shift+command+p  调取命令面板,然后在搜索框中输入  display  找到并点击「Configure Display Language」,这时会显示目前可以选择的语言或者安装其它语言。选择「Install additional languages...」后会跳转到相关语言插件,选择中文语言包安装并进行安装。安装完成后再次找到「Configure Display Language」后选择「zh-cn」后重启即可。

欢迎界面
打开 VS Code 后,未修改默认配置的情况下首先会看到「欢迎页面」。如下图,欢迎页面有五部分内容。首次使用不妨先花点时间浏览「学习」部分内容,其中交互式演练场(interactive playground)是新手了解 VS Code 好资料。

VS Code 主题与图标
在个性化设置部分点击「Color theme」可以选择一个你喜欢的主题。

除了主题之外,你还可以为 VS Code 选择一套自己喜欢的文件图标。点击左下角的「设置」图标,选择「file icon theme」。

然后选择「Install additional File icon theme...」会弹出可以安装的 icon 插件列表,例如 Material Icom Theme,点击安装后选择使用即可。
核心概念与组件

上面这张图展示了默认配置情况下 VS Code 的基本界面。
- 编辑器:在这里码字写代码
 - 侧边栏:可以类比为 macOS 的扩展坞,姑且称为「组件坞」,这里会展示各种组件和插件图标。
 - 组件内容:击侧边栏不同的组件后这里会展示相应显示组件内容。
 - 面板:包括问题显示、输出、调试控制台和终端四个组件。问题面板会显示代码中的警告和问题,输出面板会呈现命令和插件的运行结果,调试控制台用来进行代码调试,终端则可以帮助我们直接在 VS Code 中进行命令行操作。
 - 状态栏:可以类比为 macOS 的菜单栏 + 通知中心,这里会展示和文档及项目相关的简单信息以及部分插件提供的信息。
 
侧边栏及常用组件

默认情况下,侧边栏显示的五个组件分别是:资源管理器、跨文件搜索、源代码管理、启动和调试和扩展管理。随着后期安装插件的增多,侧边栏可以显示的组件数量也会越来越多,不过你可以通过右击侧边栏选择隐藏那些用不到的组件还可以拖动组件图标进行排序。...
剩余内容已隐藏