【第一节】VS Code中的一些骚操作，设置，做完这些，前端开发仿佛加了“瑞士军刀”！

vs code现在作为开发，尤其是前端开发，不知道给前端开发者提供了多少便捷，简直就是IDE中的开发神器！废话不多说，看着一篇文章就够了，整合了常用的vs中的方法！

第一节：vs code中常用的插件

第二节：vs code中常用的快捷键

HTML

• auto close tag ： 自动闭合HTML标签
  
• auto rename tag ：自动更改闭合标签
  
• HTML CSS Support： CSS自动提示
  

CSS

• beautify css/sass/scss ： 格式化
  
• color highlight ：颜色值高亮显示
  
  VUE
• vetur ：vue语法高亮
  
• vueHelper ：vue代码帮助
  

代码注释

• better comments ：编写更加人性化的注释
  
• eslint： eslint高亮提示
  
• guides： 高亮缩进基准线
  
• Chinese ： 汉化
  
• open in browser 打开浏览器预览
  

如何快速格式化

快捷键： Alt+ Shift+F

如何保存即可自动格式化代码的方法？

• 打开首选项设置
  
• 找到user
  
• 添加配置信息
  

"editor.formatOnType": true, 
"editor.formatOnSave": true,

如何让文档自动保存？

其实就上上面设置的

 "files.autoSave": "afterDelay"

如何快速编码，拒绝单调的重复输入？

生成固定结构

新建的html文件是什么内容都没有的空文件，每次新建之后我们都要写那一坨一模一样的固定结构，但是又懒得去记那十几行的东西
在VSCode中编辑.html文件只需要输入一个 感叹号!(英文的) 然后一回车就可以自动生成这个固定结构了

输入内容：

!

HTML部分快捷键

• 生成标签直接输标签名回车即可

输入内容

div 回车

生成：

• 生成多个相同标签输标签名之后输个*后面加上个数
  输入内容

a*5

生成：

• 父子级关系的标签用>连接
  输入内容

ul>li*3

生成

再比如，输入内容：

tr*3>td*5

输出

• 兄弟关系的用+连接
  输入内容

h1+div*3+p+ul>li*3

输出

• 带有类名或id名的
  输入内容：

div.header

输出

输入内容

div#headers

输出

• 标签内部有内容的内容用{}括起来
  输入内容

div{names}

输出

• 自增符号$
  输入内容

div.div$*3

输出

再比如：
输入内容

 div*3{$}

CSS部分

敲的时候直接敲缩写就好
输入内容：

div {
    w200
}

结果如下

其他便捷操作

同时添加多个光标：
单个添加: 将光标放在一个位置，然后按住Alt键的时候用鼠标点击其他地方，点到的地方就会添加一个光标出来
添加一整列: 按住Shift+Alt然后鼠标下拉，即可添加一整列光标