VS Code的使用

一、前言

前端目前是处在春秋战国时代，各路英雄豪杰成为后浪，各种框架工具层出不穷，VS Code 软件无疑是大前端时代最骄傲的工具。

如果你是做前端开发（JavaScript 编程语言为主），则完全可以将 VS Code 作为「主力开发工具」。这款软件是为前端同学量身定制的，开箱即用。

如果你是做其他语言方向的开发，并且不需要太复杂的集成开发环境，那么，你可以把 VS Code 作为「代码编辑器」来使用，纵享丝滑。

甚至是一些写文档、写作的同学，也经常把 VS Code 作为 markdown 写作工具，毫无违和感。

退而求其次，即便你不属于以上任何范畴，你还可以把 VS Code 当作最简单的文本编辑器来使用，完胜 Windows 系统自带的记事本。

二、VS Code的介绍

VS Code 的全称是 Visual Studio Code，是一款开源的、免费的、跨平台的、高性能的、轻量级的代码编辑器。它在性能、语言支持、开源社区方面，都做得很不错。

VS Code 的特点

• 跨平台：支持 MacOS、Windows 和 Linux 等多个平台。在这多种平台下，拥有一致的用户界面和开发体验。
• 开源：VS Code的源代码以 MIT 协议开源。不仅代码开源，而且整个产品的开发计划和发布管理也都是开源的。VS Code团队每年都会在 GitHub的Wiki上发布 Roadmap，列出一整年的规划图。VS Code 软件的官方文档也托管在了 GitHub 上。
• 自带终端、图形化的调试工具、Git 版本控制。
• 插件扩展：支持第三方插件，功能强大。既有中心化的插件市场，也可以直接在 VS
  Code里搜索你想要的插件。
• 生态：社区生态活跃且丰富，社区氛围浓厚。
• 自带emmet：支持代码自动补全，快速生成简单的语法结构。要知道，这个功能在 Sublime Text中，得先安装插件才行。
• 语法支持：VS Code 自带了 JavaScript、TypeScript 和 Node.js的语法支持，包括：语法高亮、代码智能提示和补全、括号匹配、颜色区分、代码片段提示等。也就是说，你在书写 JS 和 TS
  时，这些语法支持都是自带的。其他的一些语言，你需要先安装相应的扩展包插件，就出现语法支持。
• 在修改配置方面，既有图形化的配置界面，也有基于 JSON 文件的配置方式，满足不同人群的使用习惯。

VS Code被分为以下五个区域：

• 编辑器
• 侧边栏
• 状态栏
• 活动栏
• 面板

VS Code在功能上非常克制，只包含了大多数开发流程中所需要的基础模块，包括：编辑器、文件管理、窗口管理、首选项设置、终端等。

你需要根据具体需要安装额外的组件或者插件。比如说，如果开发TS项目，则需要安装 TS编译器、ESLint、TSLint等编译工具。如果开发C语言项目，则需要安装gcc、Clang等编辑工具。

三、VS Code 快捷键

VS Code 用得熟不熟，首先就看你是否会用快捷键。以下列出的内容，都是常用快捷键，使用频率则非常高。

任何工具，掌握 20%的技能，足矣应对 80% 的工作。

掌握下面这些高频核心快捷键，你和你的工具，足矣露出锋芒。

1、工作区快捷键

作用	Win快捷键	Mac快捷键	备注
显示命令面板	Ctrl + Shift + P，F1	Cmd+ Shift + P
显示/隐藏侧边栏	Ctrl + B	Cmd+ B
拆分为多个编辑器	Ctrl + \	Cmd+ \	抄代码利器
重新开一个软件的窗口	Ctrl + Shift + N	Cmd + Shift + N
关闭软件的当前窗口	Ctrl + Shift + W	Cmd + Shift + W
新建文件	Ctrl + N	Cmd + N
关闭当前文件	Ctrl + W	Cmd + W

2、跳转快捷键

作用	Win快捷键	Mac快捷键	备注
在同一个软件的多个工作区之间切换		Cmd + `	使用很频繁
在已经打开的多个文件之间进行切换	Ctrl + Pagedown/Pageup	Cmd + Option + 左右方向键	非常实用
在当前文件的各种方法之间进行跳转	Ctrl + shift + O	Cmd + Shift + O

3、移动光标

作用	Win快捷键	Mac快捷键	备注
在单词之间移动光标	Ctrl + 左右方向键	option + 左右方向键
将光标定位到当前行的最左侧、最右侧（在整行之间移动光标）	Fn + 左右方向键（或 Win + 左右方向键）	Cmd + 左右方向键
左右扩大/缩小选中的范围	Alt + Shift + 左右方向键	Option + Alt + 左右方向键	很酷，极为高效
将光标定位到文件的第一行	Ctrl + Home	Cmd + ↑
将光标定位到文件的最后一行	Ctrl + End	Cmd + ↓
在代码块之间移动光标		Cmd + Shift + \

4、编辑操作

作用	Win快捷键	Mac快捷键	备注
在当前行的下方新增一行，然后跳至该行	Ctrl + Enter	Cmd + Enter	即使光标不在行尾，也能快速向下插入一行
在当前行的上方新增一行，然后跳至该行	Ctrl+Shift+Enter	Cmd+Shift+Enter
将代码向上移动	Alt + ↑	Option + ↑
将代码向下移动	Alt + ↓	Option + ↓
将代码向下复制一行	Alt + Shift + ↓	Option + Shift + ↓	写重复代码的利器

另外再补充一点：将光标点击到某一行的任意位置时，默认就已经是选中全行了，此时可以直接复制【Ctrl + C】或剪切【Ctrl + X】，无需点击鼠标。这个非常实用，是所有的编辑操作中，使用得最频繁的。

5、删除操作

作用	Win快捷键	Mac快捷键	备注
删除整行	Ctrl + Shift + K	Cmd + shift + K	「Cmd + X」的作用是剪切，但也可以删除整行
删除光标之前的一个单词	Ctrl + Backspace	option + Backspace	英文有效，很常用
删除光标之后的一个单词	Ctrl + delete	option + delete
删除光标之前的整行内容		Cmd + Backspace	很常用