如何成为编程大佬？
那当然是coding的时候手不离键盘，疯狂敲击(CV)。
毕竟每一次右手离开键盘去触碰鼠标，都是一次浪费时间的操作。

vscode作为目前前端开发的主力工具，在平常的日常学习和工作中伴随着我们非常多的时间。
本篇手册将会介绍本人在日常开发中比较常用的一些vscode相关的内容。
87417c60jw1fb12snc2wkg20dw08cqcu.gif.webp

前端修炼手册——vscode篇 - 图3

常用快捷键

这里分别整理了 mac window 对应的快捷键，方便俩类终端的用户查看

mac	window
control	window
option	alt
command	ctrl

复制当前行

ctrl/command+shift+↑ / ↓

删除当前行

ctrl/command+shift+K

移动当前行（上下）

alt/option + ↑ / ↓

另起一行

command/ctrl + Enter

以单词为单位移动

command/ctrl + ← / →

演示中用到的其他快捷键有：
ctrl+D：以单词选择（可多选）

移到行首/行尾

演示中用到的其他快捷键有：
ctrl+shift+alt：键盘多光标
ctrl+D：以单词选择（可多选）

鼠标多光标：

演示中用到的其他快捷键有：
ctrl+D：以单词选择（可多选）

鼠标单点多光标：

ctrl+鼠标左键

选中同样的全部内容

ctrl/command + shift+L

同样的操作全选操作ctrl+D也同样可以完成，不同的是ctrl+D的一个一个选的，比起ctrl+shift+L稍微灵活但麻烦一点。

Emmet

VsCode内置了Emmet语法,输入缩写后按Tab键即会自动生成相应代码。
这是一个非常强大的工具，熟练掌握可以大大提高平时的编写html的编码速度。
官方文档

基础用法

element（元素）

div => <div> </div>
foo => <foo> </foo>
html:5 => 将生成html5标准的包含body为空基本dom
html:xt => 生成XHTML过渡文档类型,DOCTYPE为XHTML
html:4s => 生成HTML4严格文档类型,DOCTYPE为HTML 4.01
a:mail          => <a href="mailto:"></a>
a:link          => <a href="http://"></a>
base            => <base href="">
br              => <br>
link            => <link rel="stylesheet" href="">
script:src      => <script src=""></script>
form:get        => <form action="" method="get"></form>
label           => <label for=""></label>
input           => <input type="text">
inp             => <input type="text" name="" id="">
input:hidden    => <input type="hidden" name=""> input:h亦可
input:email     => <input type="email" name="" id="">
input:password  => <input type="password" name="" id="">
input:checkbox  => <input type="checkbox" name="" id="">
input:radio     => <input type="radio" name="" id="">
select          => <select name="" id=""></select>
option          => <option value=""></option>
bq              => <blockquote></blockquote>
btn             => <button></button>
btn:s           => <button type="submit"></button>
btn:r           => <button type="reset"></button>

文本操作符

div{这是一段文本} => <div>这是一段文本</div>

属性操作符

id/class

div.test => <div class="test"></div>
div#pageId => <div id="pageId"></div>

如果需要绑定多个类名用.符号连续起来即可

div.test1.test2.test3  => <div class="test1 test2 test3"></div>

隐式标签

隐式标签会根据父标签自动推导出你所需要的标签

table>.row>.col=>
<table>
    <tr class="row">
        <td class="col"></td> 
    </tr>
</table>

自定义属性使用 [attr1=’’ attr2=’’]

嵌套操作符

子级:>

div#pageId>ul>li 
=> 
<div id="pageId">
    <ul>
        <li></li>
    </ul>
</div>

同级:+

div#pageId+div.child
=>
<div id="pageId"></div>
<div class="child"></div>

父级:^

div>p.parent>span.child^ul.brother>li
=>
<div>
    <p class="parent"><span class="child"></span></p>
    <ul class="brother">
        <li></li>
    </ul>
</div>

分组操作符

分组使用()来实现缩写的分离.比如这个例子,如果不加括号那么a将作为span的子级元素生成.加上括号a将于()内的元素同级.

div>(ul>li+span)>a
=>
<div>
    <ul>
        <li></li>
        <span></span>
    </ul>
    <a href=""></a>
</div>

乘法

ul>li*3
=>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

自动计数

这个功能挺方便的对于生成重复项时增加一个序号,只需要加上$符号即可.
如果生成两位数则使用两个连续的$$,更多位数以此类推…
使用@修饰符，可以更改编号方向（升序或降序）和基数（例如起始值）.注意这个操作符在$之后添加
@-表示降序,@+表示升序,默认使用升序.
@N可以改变起始值.需要注意的是如果配合升降序使用的话N是放到+-符后.

ul>li.item${item number:$}*3
<ul>
    <li class="item1">item number:1</li>
    <li class="item2">item number:2</li>
    <li class="item3">item number:3</li>
</ul>
---------------------------
ul>li.item$@-*3
=>
<ul>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>
---------------------------
ul>li.item$@-10*3
=>
<ul>
    <li class="item12"></li>
    <li class="item11"></li>
    <li class="item10"></li>
</ul>

进阶用法

Actions

这边只介绍一些常用的，其他自行官网查看。
在vscode中按 ctrl+shift+p 出来搜索框，搜索emmet就可以查看所有的actions

1.使用缩写包裹（Wrap with Abbreviation）

使用缩写来包裹光标所在的元素。

2.分离/联结标记（Split/Join Tag）

让html标签转成单/双闭合标签。

3.更新标记（update tag）

4.平衡（Balance）

向内

向外

5.求数学表达式

6.其他：

Actions
- Go to Matching Pair（转至匹配对）
- Go to Edit Point（去上/下一个编辑点）
- Select Item（去上/下一项）
- Toggle Comment（切换注释）
- Remove Tag（删除标记）
- Merge Lines（合并行）
- Update Image Size（更新图片大小）
- Increment/Decrement Number（+0.1/1/10）
- Reflect CSS Value（映射CSS值）
  7.总结
  以上操作均可以使用快捷键，但是得你自己设置，vscode默认不会给你绑定。
  
  搜索emmet
  
  包装文本
  比如产品给了这样一段文字：
  首页
  产品介绍
  相关案例
  关于我们
  联系我们
  而我们预期的效果是这样
  
  另外如果给的文本带有序号的情况,我们也是可以通过缩写来处理,而不是手动删除,主要用的是|t来处理.
```
1.首页
2.产品介绍
3.相关案例
4.关于我们
5.联系我们
输入包装字符命令
ul>li*|t
即可看到生成的html中自动去掉了序号
```
  模拟文本/随机文本
  lorem
```
p>lorem4
=>
<p>Lorem ipsum dolor sit.</p>
```
  lorem后面的数字代表要随机几个单词。
  Eslint+Prettier自动格式化你的代码
  这里不涉及eslint配置，你只需要知道当你的编译器爆红的时候，你写的代码就是有问题的。
  我们需要的是配置一套规则，但是我们不需要关系规则到底是什么，而是让编译器告诉你，并且在保存文件的时候，自动按照工程规范格式化代码。

曾经我在拉下一个项目，并用vscode打开的，yarn serve。
不幸的是，vscode很友善的给我爆出了几千条eslint报错。
当时我的心情是这样的
很显然，那位好兄弟在写代码的时候，并没有使用eslint。

言归正传，我们来说说如何让你的vscode可以自动格式化你写的代码。

Eslint

我们需要做的是：

VSCode 安装 Eslint插件。
添加 .eslintrc.js 配置文件（一般项目都有，不需要管）。
更改 VSCode 的 setting.json 文件的配置。

如果你已经安装好了 Eslint插件。
按ctrl+ shif + p，打开 defaultSettings.json 文件，按 ctrl + f 搜索 eslint 可以看到所有 ESlint 在 VSCode 内的默认配置。
还是按 ctrl + shift + p 打开settings.json 文件。这个文件是用户自定义配置，里面的配置会覆盖defaultSettings.json里的同名配置。我们在这个文件里对 ESLint插件的配置做一些修改，让它达到我们想要的效果。
首先，我们想要保存时自动格式化，实现这个效果的配置有两种：

eslint.autoFixOnSave（已废弃）
editor.codeActionsOnSave（推荐）

并且我们要关闭 editor.formatOnSave，否则我们的文件将被修复两次，这是没有必要的。

// default: false
// "editor.formatOnSave": false,
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"[vue]": {
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[javascript]": {
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
// 始终在VSCode的右下角状态栏显示 ESLint 字样，查看 ESLint 运行状态,确保 ESLint 在正常运行
"eslint.alwaysShowStatus": true,

此时代码保存时，vscode会读取.eslintrc.js文件中的配置去自动格式化，但是这只是单纯的eslint格式化。

Prettier

我们经常会使用alt+shift+F来进行代码的格式化。值得一提的是，使用这个方式，只是一种单纯的prettier的格式化，他会读取你的vscode所有配置文件下的配置，并且按照一定的优先级来总结出最终的配置。

比如.prettierrc、.editorconfig、.vscode/settings.json和上文的编辑器全局配置，另外还有prettier插件默认的配置，那么它们同时存在时是如何表现的？

.prettierrc > editorconfig>.vscode/settings.json>User/settings.json>default.json
如果.prettierrc和.editorconfig并存，那么他们将会进行合并，并且对于同一个属性，前者会覆盖后者。
只有.prettierrc和.editorconfig都不存在时，vscode 的配置才会生效，反过来说，只要这2个其中一个存在，那么vscode的配置都不生效（注意：是prettier相关设置不生效）。

有些时候，我们项目中的eslint配置有一部分会和prettier的配置相互冲突，那此时如果你使用alt+shift+F来格式化你的代码，那将会得到一堆红色的报错信息（虽然你保存的时候eslint依然会自动修复）。
如何将你的alt+shift+F具有prettier的功能又不让eslint报错。

"[vue]": {
  "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
}
"[javascript]": {
  "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
}
//其他的文件同理

prettier-eslint 是直接让prettier按照eslint规则进行格式化，并且保留不冲突的部分（比如超过80字符换行）。

同步你的vscode配置

当你有多台电脑的时候会用到。

vscode安装Settings Sync
在你完整配置的电脑上，点击插件页面登录你的github。
ctrl+shift+P 上传最新配置
回家在其他电脑上重复1.2，然后下载配置
over

当你在哪台电脑上更新了配置，重复345即可。

插件

至于其他的插件就不推荐了，萝卜青菜各有所爱。

前端修炼手册——vscode篇