前端⼯具——VSCode的使⽤
前⾔
本⽂最新内容将在上实时更新。
VS Code 本来是前端⼈员专⽤，但由于它实在是太好⽤了，于是，各种开发⽅向的码农也正在⽤ VS Code 作为他们的主⼒编程⼯具。甚⾄是⼀些写作的同学，也把 VS Code 作为 markdown 写作⼯具。
写下这篇⽂章，是顺势⽽为。
VS Code 的介绍
VS Code 的全称是 Visual Studio Code，是⼀款开源的、免费的、跨平台的、⾼性能的、轻量级的代码编辑器。它在性能、语⾔⽀持、开源社区⽅⾯，都做的很不错。
编辑器与 IDE
IDE和编辑器是有区别的：
IDE ：对代码会有较好的智能提⽰，同时侧重于⼯程项⽬，对项⽬的开发、调试⼯作有较好的图像化界
⾯的⽀持，因此⽐较笨重。⽐如 Eclipse 的定位就是 IDE。
编辑器：要相对轻量许多，侧重于⽂本的编辑。⽐如 Sublime Text 的定位就是编辑器。再⽐如 Windows 系统⾃带的「记事本」就是最简单的编辑器。
需要注意的是，VS Code 的定位是编辑器，⽽⾮IDE。但 VS Code ⼜⽐⼀般的编辑器的功能要丰富许多。
VS Code的⼀些补充
VS Code 的使命，是让开发者在编辑器⾥拥有 IDE 那样的开发体验，⽐如代码的智能提⽰、语法检查、图形化的调试⼯具、插件扩展、版本管理等。
VS Code 的源代码以MIT协议开源。
VS Code ⾃带了 TypeScript 和 Node.js 的⽀持。也就是说，你在书写 JS 和 TS 时，是⾃带智能提⽰的。
有⼀点你可能不知道，VS Code 这个客户端软件是⽤ js 语⾔开发出来的（具体请⾃⾏查阅关键字Electron）。有句话说得好：能⽤ js 实现的功能，最终⼀定会⽤ js 实现。
前端利器之争： VS Code 与 WebStorm
前端⼩⽩最喜欢问的⼀个问题是：哪个编辑器/IDE 好⽤？是VS Code还是 WebStorm （WebStorm 其实是 IntelliJ IDEA的定制版）？我来做个对⽐：
哪个更酷：显然 VS Code 更酷。
内存占⽤情况：根据我的观察，VS Code是很占内存的（尤其是当你打开多个窗⼝的时候），但如果你的内存条够⽤的话，使⽤起来是不会有任何卡顿的感觉的。相⽐之下，IDEA 不仅⾮常占内存，⽽且还⾮常卡顿。
使⽤⽐例：当然是 VS Code 更胜⼀筹。先不说别的，我就拿数据说话，我⽬前所在的前端团队有100⼈左右，绝⼤部分前端同学都在⽤ VS Code，妥妥的。
所以，如果你以后还问这个问题，那就真有些掉底了。
VS Code 的安装
VS Code 官⽹：
VS Code 的安装很简单，直接去官⽹下载安装包，然后双击安装即可。
上图中，直接点击 download 下载安装即可。
VS Code快捷键
VS Code⽤得熟不熟，⾸先就看你是否会⽤快捷键。以下列出的内容，都是常⽤快捷键，⽽加粗部分的快捷键，使⽤频率则⾮常⾼。
visual studio和vs code的区别掌握10%的内容，⾜矣应对90%的⼯作。熟练使⽤它们，你就已经很⽜了。
移动光标
Mac快捷键Win快捷键作⽤备注
Cmd + ←Fn + ←将光标定位到当前⾏的最左侧很常⽤
Cmd + →Fn + →将光标定位到当前⾏的最右侧很常⽤
Cmd + ↑Ctrl + Home将光标定位到⽂章的第⼀⾏
Cmd + ↓Ctrl + End将光标定位到⽂章的最后⼀⾏
根据上⾯的快捷键，我们可以举⼀反三。补充如下：
「⽅向键」：在单个字符之间移动光标
「option + 左右⽅向键」：在单词之间移动光标（很常⽤）。注：Win 快捷键是「Ctrl + 左右⽅向键」。
「Cmd + 左右⽅向键」：在整⾏之间移动光标（很常⽤）。注：Win 的快捷键是「Fn + 左右⽅向键」「Cmd + Shift + \」：在代码块之间移动光标。
删除操作
Mac快捷键Win快捷键作⽤备注
option + Backspace Ctrl + Backspace删除光标之前的⼀个单词英⽂有效，很常⽤
option + delete Ctrl + delete删除光标之后的⼀个单词
Cmd + delete删除光标之前的整⾏内容很常⽤
Cmd + delete删除光标之后的整⾏内容
Cmd + shift + K Ctrl + Shift + K删除整⾏「Cmd + X」的作⽤是剪切，但也可以删除整⾏备注：上⾯所
讲到的移动光标、删除操作的快捷键，在其他编辑器⾥，也是同样的操作。
编辑操作
Mac快捷键Win快捷键作⽤备注
Cmd + Enter Ctrl + Enter在当前⾏下⾯新增⼀⾏，然后跳⾄该⾏即使光标不在⾏尾，也能快速向下插⼊⼀⾏Option + ↑Alt + ↑将代码向上移动很常⽤
Option + ↓Alt + ↓将代码向下移动很常⽤
JS语⾔相关
Mac快捷键Win快捷键作⽤备注
Cmd + /Ctrl + /添加单⾏注释很常⽤
Option + Shift + F Alt + shift + F代码格式化很常⽤
Ctrl + J将多⾏代码合并为⼀⾏Win ⽤户可在命令⾯板搜索”合并⾏“
Cmd +
Cmd + U Ctrl + U将光标的移动回退到上⼀个位置撤销光标的移动和选择
跳转操作
Mac快捷键Win快捷键作⽤备注
Ctrl + Tab Ctrl + Tab在已经打开的⽂件之间进⾏跳转
Cmd + P Ctrl + P在当前的项⽬⼯程⾥，全局搜索⽂件很常⽤
Ctrl + G Ctrl + G跳转到指定⾏
Cmd + Shift + O Ctrl + shift + O在当前⽂件的各种⽅法之间进⾏跳转
搜索
Mac快捷键Win快捷键作⽤备注
Cmd + F Ctrl + F在当前⽂件中搜索，光标在搜索框⾥
Cmd + G F3在当前⽂件中搜索，光标仍在编辑器⾥
Cmd + Shift + F Ctrl + Shift +F全局搜索很常⽤
多光标的使⽤
技巧1：按住「Option」键（windows ⽤户是按住「Alt」键），然后在页⾯中希望中现光标的位置点击⿏标。
技巧2：选中某个⽂本，然后反复按住快捷键「 Cmd + D 」键（windows ⽤户是按住「Ctrl + D」键），即可将全⽂中与光标当前所在位置的词相同的词逐⼀加⼊选择。
技巧3：选中⼀堆⽂本后，按住「Option + Shift + i」键（windows ⽤户是按住「Alt + Shift + I」键），既可在每⼀⾏的末尾都创建⼀个光标。
⼯作区快捷键
Mac快捷键Win快捷键作⽤备注
Cmd + B Ctrl + B显⽰/隐藏侧边栏很实⽤
Cmd + \Ctrl + \创建多个编辑器⽐较实⽤
Cmd + Option + 左右⽅向键Ctrl + Pagedown/Pageup在已经打开的⽂件之间进⾏切换⾮常实⽤
Ctrl + Tab Ctrl + Tab在已经打开的⽂件之间进⾏跳转不如上⾯的快捷键实⽤
Cmd + J Ctrl + J显⽰/隐藏控制台
⾃定义快捷键
按住快捷键「Cmd + Shift + P」，弹出命令⾯板，在命令⾯板中输⼊“快捷键”，可以进⼊快捷键的设置。
当然，你也可以选择菜单栏「偏好设置 --> 键盘快捷⽅式」，进⼊快捷键的设置：
快捷键列表
你可以点击 VS Code 左下⾓的齿轮按钮，效果如下：
上图中，在展开的菜单中选择「键盘快捷⽅式」，就可以查看和修改所有的快捷键列表了：
VS Code 的常见设置项
⾯包屑（Breadcrumb）
打开 VS Code 的设置项，选择「⽤户设置 -> ⼯作台 -> 导航路径」，如下图所⽰：
上图中，将红框部分打钩即可。
设置成功后，我们就可以查看到当前⽂件的「层级结构」，⾮常⽅便。如下图所⽰：
是否显⽰代码的⾏号
VS Code 默认显⽰代码的⾏号。你可以在设置项⾥搜索editor.lineNumbers修改设置，配置项如下：
我建议保留这个设置项，⽆需修改。
右侧是否显⽰代码的缩略图
VS Code 会在代码的右侧，默认显⽰缩略图。你可以在设置项⾥搜索editor.minimap进⾏设置，配置项如下：
将当前⾏代码⾼亮显⽰
当我们把光标放在某⼀⾏时，这⼀⾏的背景⾊并没有发⽣变化。如果想⾼亮显⽰当前⾏的代码，你可以在设置项⾥搜
索derLineHighlight进⾏设置。配置项如下：
我设置完之后，发现效果不是很明显。有待优化。
空格 or 制表符
VS Code 会根据你所打开的⽂件来决定该使⽤空格还是制表。也就是说，如果你的项⽬中使⽤的都是制表符，那么，当你在写新的代码时，按下tab 键后，编辑器就会识别成制表符。
常见的设置项如下：
editor.detectIndentation：⾃动检测（默认开启）。截图如下：
editor.insertSpaces：按 Tab 键时插⼊空格（默认）。截图如下：
editor.tabSize：⼀个制表符默认等于四个空格。截图如下：
改完代码后⽴即⾃动保存
改完代码后，默认不会⾃动保存。你可以在设置项⾥搜索files.autoSave，修改配置项如下：
上图中，我们将配置项修改为onFocusChange之后，那么，当光标离开该⽂件后，这个⽂件就会⾃动保存了。⾮常⽅便。
保存代码后，是否⽴即格式化
保存代码后，默认不会⽴即进⾏代码的格式化。你可以在设置项⾥搜索editor.formatOnSave查看该配置项：
我觉得这个配置项保持默认就好，不⽤打钩。
新建⽂件后的默认⽂件类型
当我们按下快捷键「Cmd + N」新建⽂件时，VS Code 默认⽆法识别这个⽂件到底是什么类型的，因此也就⽆法识别相应的语法⾼亮。如果你想修改默认的⽂件类型，可以在设置项⾥搜索files.defaultLanguage，设置项如下：
上图中的红框部分，填⼊你期望的默认⽂件类型。我填的是html类型，你也可以填写成javascript或者markdown，或者其他的语⾔类型。
删除⽂件时，是否弹出确认框
当我们在 VS Code 中删除⽂件时，默认会弹出确认框。如果你想修改设置，可以在设置项⾥搜索firmDelete。截图如下：
我建议这个设置项保持默认的打钩就好，不⽤修改。删除⽂件前的弹窗提⽰，也是为了安全考虑，万⼀⼿贱不⼩⼼删了呢？
命令⾯板的使⽤
Mac⽤户按住快捷键Cmd+Shift+P（Windows⽤户按住快捷键Ctrl+Shift+P），可以打开命令⾯板。效果如下：
如果们需要修改⼀些设置项，可以通过「命令⾯板」来操作，效率会更⾼。这⾥列举⼀些。
字体设置
在命令⾯板输⼊“字体”，可以进⾏字体的设置，效果如下：
当然，你也可以在菜单栏，选择「⾸选项-设置-常⽤设置」，在这个设置项⾥修改字体⼤⼩。
快捷键设置
在命令⾯板输⼊“快捷键”，就可以进⼊快捷键的设置。
⼤⼩写转换
选中⽂本后，在命令⾯板中输⼊transfrom，就可以修改⽂本的⼤⼩写了。
VS Code 的常⽤技巧
⽂件对⽐
VS Code 默认⽀持对⽐两个⽂件的内容。选中两个⽂件，然后右键选择「将已选项进⾏⽐较」即可，效果如下：
VS Code⾃带的对⽐功能并不够强⼤，我们可以安装插件compareit，进⾏更丰富的对⽐。⽐如说，安装完插件compareit之后，我们可以将「当前⽂件」与「剪切板」⾥的内容进⾏对⽐：
查某个函数在哪些地⽅被调⽤了
⽐如我已经在a.js⽂件⾥调⽤了foo()函数。那么，如果我想知道foo()函数在其他⽂件中是否也被调⽤了，该怎么做呢？
做法如下：在a.js⽂件⾥，选中foo()函数（或者将光标放置在foo()函数上），然后按住快捷键「Shift + F12」，就能看到foo()函数在哪些地⽅被调⽤了，⽐较实⽤。
⿏标操作
在当前⾏的位置，⿏标三击，可以选中当前⾏。
⽤⿏标单击⽂件的⾏号，可以选中当前⾏。
在某个⾏号的位置，上下移动⿏标，可以选中多⾏。
重构
重构分很多种，我们来举⼏个例⼦。
1、命名重构：
当我们尝试去修改某个函数（或者变量名）时，我们可以把光标放在上⾯，然后按下「F2」键，那么，这个函数（或者变量名）出现的地⽅都会被修改。
2、⽅法重构：
选中某⼀段代码，这个时候，代码的左侧会出现⼀个「灯泡图标」，点击这个图标，就可以把这段代码提取为⼀个单独的函数。
在当前⽂件中搜索
在上⾯的快捷键列表中，我们已经知道如下快捷键：
Cmd + F（Win⽤户是Ctrl + F）：在当前⽂件中搜索，光标在搜索框⾥
Cmd + G（Win⽤户是 F3）：在当前⽂件中搜索，光标仍在编辑器⾥
但是，你可能会注意到，搜索框⾥有很多按钮，每个按钮都对应着不同的功能，如下图所⽰：
上图中，你可以通过「Tab」键和「Shift + Tab」键在输⼊框和替换框之间进⾏切换。
「在选定内容中查」这个功能还是⽐较实⽤的。你也可以在设置项⾥搜索editor.find.autoFindInSelection，勾选该设置项后，那么，当你选中指定内容后，然后按住「Cmd + F」，就可以⾃动只在这些内容⾥进⾏查。该设置项如下图所⽰：
正常情况下，我建议这个设置项不⽤勾选。
全局搜索
在上⾯的快捷键列表中，我们已经知道如下快捷键：
Cmd + Shift + F（Win⽤户是Ctrl + Shift +F）：在全局的⽂件夹中进⾏搜索。效果如下：
上图中，你可以点击红框部分，展开更多的配置项。
Git版本管理
VS Code ⾃带了 Git 版本管理，如下图所⽰：
上图中，我们可以在这⾥进⾏常见的git 命令操作。如果你还不熟悉 Git版本管理，先去补补课吧。
与此同时，我建议安装插件GitLens，它是 VS Code 中我最推荐的⼀个插件，简直是Git神器，码农必备。
将⼯作区放⼤/缩⼩
我们在上⾯的设置项⾥修改字体⼤⼩后，仅仅只是修改了代码的字体⼤⼩。
如果你想要缩放整个⼯作区（包括代码的字体、左侧导航栏的字体等），可以按下快捷键「cmd +/-」。windows⽤户是按下「ctrl +/-」
当我们在给别⼈演⽰代码的时候，这⼀招⼗分管⽤。
如果你想恢复默认的⼯作区⼤⼩，可以在命令⾯板输⼊重置缩放（英⽂是reset zoom）
创建多层⼦⽂件夹
我们可以在新建⽂件夹的时候，如果直接输⼊aa/bb/cc，⽐如：