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

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
键盘多光标	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

更多功能能够查看这篇文章： www.cnblogs.com/summit7ca/p…

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.Chinese 语言汉化

3. ESLint

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

4.Open in Browser

html 文件中右键能够选择直接使用浏览器打开

5.Path Intellisense

路径匹配，

6.vetur

由于我是 vue 重度使用者，没这个插件连个高亮都没有，没有真的不行

7.live-server

这个不是 vscode 插件，能够直接用 npm -g live-server 安装。

开启一个服务，专门用于手机访问静态资源

好用的插件远远不止这一些，像 svg 查看，导入的包大小显示，git 提交的代码提示。可是我在使用的过程当中感受也是无关紧要的，也就是普适性不是特别广。若是你有缺乏就无法工做的插件欢迎评论留言

总结

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