如何让 VS Code 变成你的开发神器？

关注「高级前端进阶」，回复“加群”
加入我们一起学习，每天都更进一步

作者：徐月超
来源：点滴前端
vscode 作为目前特别火的一款开发工具，我相信使用人数是非常庞大的。那么作为平常赖以编程的开发工具你对他了解多少呢？这篇文章的重点是 vsocde 的默认高频率快捷键，如何修改快捷键，如何自定义代码片段，如何使用 vscode 的命令工具，vscode 的 emmet 功能，使用哪些插件能够倍速提升开发效率

1. 默认高频率快捷键

这里分别整理了 mac window 对应的快捷键，方便俩类终端的用户查看
mac
window
control
window
option
alt
command
ctrl
上面可以看做是 mac 对应 window 上的按键，在大多数场景都是符合的，但也不是完全符合
描述
mac
window
文件内搜索内容
command + F
ctrl + F
文件内替换
无
ctrl + H
全文搜索内容
command + shift + F
ctrl + shift + F
全局搜索文件
command + P
ctrl + P
当前行上移/下移
option + ↑ / ↓
alt + ↑ / ↓
复制当前行在上方/下方
option+ shift + ↑ / ↓
alt + shift + ↑ / ↓
删除当前行
command + x(不选中内容的时候剪切
就能删除当前行)
ctrl + x
合并当前行
control + J
无
以单词为单位移动
option + ← / →
ctrl + ← / →
移到行首/行尾
command + ← / →
home / end
键盘多光标
command + option + ↑ / ↓

鼠标多光标
option + 鼠标左键
alt + 鼠标左键
选中同样的全部内容
option + shift + L
alt + shift + L
侧边栏开关
command + B
ctrl + B
控制台开关
command + J
ctrl + J
命令讲解：

合并当前行
使用合并当前行功能就可以快速的让图一变成图二的样子，这是俩种习惯，如果喜欢讲内容变成一行。这个快捷键无疑是非常爽的。

侧边栏开关 / 控制台开关
侧边栏和控制台默认情况下能够占到整个电脑的三分之一左右的样子，在笔记本上感觉码几行字就到头了。但是侧边栏和控制台还是常用功能，你掌握了这个快捷键就可以全屏幕的敲代码，并且快速控制侧边栏和控制台显隐是非常有控制感的快捷键

全局搜索文件
这个是调用出来了 vscode 的命令菜单。在这个菜单里面你可以输入中文来执行相关命令，非常强大。他在关键时刻就不仅仅是搜索文件这么简单了。列举几种常用的操作：

输入 ? 显示如何执行各种不同的命令

其中最常用的几个分别是 term（打开命令行） , view , :（调整到指定行）, edt（查看当前打开的标签并且提供跳转功能）, 无（搜索文件，并且提供跳转功能），> (显示并运行命令)。使用起来及其简单只要这些前缀 + 空格然后输入你要做的操作即可例如:

这是跳转到第一行的第三个字符

能够看到上图中一共有三个终端，并且我还重新重名了。右边的设置就是重命名功能。

2.分屏功能
我在写代码的时候经常碰到的一个场景就是不同的文件之间进行操作，俩个文件来回切换特别麻烦。其实你熟练掌握了 vscode 的分屏操作这里能够让你爽到飞起。

从图中可以看到编辑器不仅可以分屏，连控制台也可以分屏。分屏之后就可以左边看着 html 代码，右边写 css 代码了。再也不用回头看看格式对不对了。
创建分屏快捷键是 command + (ctrl + ), 编辑器之间分屏切换快捷键是 command + 1 - 9(cgtrl + 1-9)

3.代码片段
平常输入一部分内容的时候按回车或者是 tab 他就能给你补全。这种功能就是代码片段，像平时用的特别多的：

log -> console.log('');

复制代码

switch -> switch (key) {

复制代码

case value:

复制代码

break;

复制代码

default:

复制代码

break;

复制代码

}

复制代码

for -> for (let index = 0; index < array.length; index++) {

复制代码

const element = array[index];

复制代码

}

复制代码

等等，非常方便。但是这些远远不够的，像默认提供的 log 代码片段就不能够满足我的需要。这个时候自定义代码片段就特别重要了，而自定义代码片段是非常简单的。像控制补全时候光标所在的位置、多光标同时修改内容、tab 键之后的下个位置是非常常见的操作，看我三言俩语带你掌握

1. command + p（ctrl + p）打开命令菜单

2. 输入 “> 代码片段” 下方只有一个选项首选项: 配置用户代码片段，默认是直接选中的，回车即可。

3.选择新建全局代码片段，回车

4.输入文件名称，例如 js 代码片段，回车就会打开一个新的文件。里面的内容是按照 json 格式输入的。

5. 将文中的例子打开，无用的注释去掉,有用的注释打开。得到下面这样内容的一个文件

可以看到最外面是一个对象，里面只有一个名为 "Print to console" 的属性。一个属性就代表一个代码片段。现在先给你讲讲文中的这个代码片段。

scope : 设置作用文件，可以扩展 vue，html
prefix：触发代码片段的前缀
body：代码片段主体。其中的 $1,$2 为按 tab 键光标依次移动的位置，俗称占位符，${1:label}。这样就是留有默认值 label。想要多光标就写入数字相同的占位符，例如把 $2 改为 $1 试试
description：描述这个代码片段的作用,一般用不到，提示信息用最外面的属性即可

下面我将上面的改造一下,顺便再加一个：

下面是我输入前缀的提示，是不是非常简单。

4.emmet 功能
你要是连这个都没听过，赶紧关注我。因为这是能让你敲代码提高十倍效率的东西

上图中的代码结构是不是很常见，其实比这复杂的也多的是呢。然后我让你一句话打印出来

div.parent>div.childern-first+div.children-two>ul>li*$4

复制代码

上面的这句话就能够变成图中的样子。你可以复制到你的 vscode 中把最后面的 4 删掉然后重新输入 4 再按 tab 就能看到效果。
这种大段的使用场景多用于第一次作图，左边放着 UI 图右边是你的编辑器。看着 UI 图中的某一个模块一口气把整个结构打印出来，然后在使用多编辑器功能，看着 UI 图和 HTML 结构图把样式一次搞到位，真的舒服到不行啊。这么神奇的东西怎么用呢，其实要点很简单。看我三言俩语带你飞。

1.知道如何生成子标签、同级标签、父标签同级标签的关键符号。>(子标签), +(同级标签) , ^ (父标签的同级标签)。例如：
div>p+p^div 可描述为 div 有子标签 p ，p 有同级标签 p，p 还有个父级标签的同级标签 div

2.如何给一个元素设置属性、值。属性用中括号[],需要多加注意的是 class , id 这俩个属性可以用 . 和 # 的简写形式。值用{}。例如:
div.abc[title=666 index=1]{123} 可描述为: div 的 class 为 abc。定义了俩属性是 title = "666", index = "1" , 值为 123
div.abc.efg.ccc 可描述为 div 的 class 为 abc efg ccc

3.重复某个标签多次用 * 。例如：
div*5 可描述为生成 5 个 div 标签

4.迭代值用 $,迭代值在支持的好的 emmet 插件中还能实现更多操作。不过比较小众，就不介绍了。例如：

div.abc$*5 可描述为生成 5 个div 标签并且 class 值依次为 abc1,abc2...abc5

5.添加括号()遍历一组标签,例如：
(ul>li*2{$})*2 可描述为生成俩组 ul>li*2{$}, 去掉括号的可描述为 ul 下面有 2 个子标签 li 值分别为 1， 2
更多功能可以查看这篇文章：https://www.cnblogs.com/summit7ca/p/6944215.html

5. css 的缩写方式
这个写的文章比较少，我也是自己再输入的时候发现的一些小技巧，但是用起来真的非常舒服。
数值的单位标签可以用首字母 + 数值 + 单位的方式(默认单位是 px )。例如：

p10 -> padding: 10px;

复制代码

pl10 -> padding-left: 10px; 其他三个方向只要把 l 改成 top 的 t

复制代码

，right 的 r，bottom 的 b即可

复制代码

m10 ->margin:10px;

复制代码

ml10 -> margin-left: 10px;

复制代码

t10 -> top: 10px;

复制代码

f10 -> font: 10px;

复制代码

fw500 ->font-weight: 500;

复制代码

h10px -> height: 10px;

复制代码

w10 -> width: 10px;

复制代码

6.常用的插件
好用的插件是数不胜数的，这里我只列举一些没有了我就难受的要死的插件

1.Auto Rename Tag 自动同步双标签

2. ESLint
这个插件需要组合使用，项目必须要支持 eslint 格式化才行，然后将代码保存变为失去焦点保存，所以不符合 eslint 格式的代码自动变成符合 eslint 格式的代码爽到怀疑人生

3.Open in Browser
html 文件中右键可以选择直接使用浏览器打开

4.Path Intellisense
路径匹配

5.veter
因为我是 vue 重度使用者，没这个插件连个高亮都没有，没有真的不行

6.live-server
这个不是 vscode 插件，可以直接用 npm -g live-server 安装。
开启一个服务，专门用于手机访问静态资源
好用的插件远远不止这一些，像 svg 查看，导入的包大小显示，git 提交的代码提示。但是我在使用的过程中感觉也是可有可无的，也就是普适性不是特别广。如果你有缺少就没法工作的插件欢迎评论留言

总结
vscode 的功能远不止这些，还有很多有趣的东西。但是碍于文章的篇幅，以及普适性并不适合拿出来说。如果你有普适性非常搞得点，还是那句话欢迎留言，我将会补充进文章，让他成为你收藏夹中的经典文章。

[url=]点击我开始留言互动啦[/url]
[h2] 看完三件事
[/h2]如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：

点个「在看」，让更多的人也能看到这篇内容（喜欢不点在看，都是耍流氓 -_-）
关注我的官网 https://muyiy.cn，让我们成为长期关系
关注公众号「高级前端进阶」，每周重点攻克一个前端面试重难点，公众号后台回复「资料」免费送给你精心准备的前端进阶资料。

你的“在看”，我当成喜欢