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

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

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

• guides： 高亮缩进基准线
  

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

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

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

• 生成html中ul标签的作用直接输html中ul标签的作用名回车即可

• 生成多个相哃html中ul标签的作用输html中ul标签的作用名之后输个*后面加上个数
  

• 父子级关系的html中ul标签的作用用>连接
  

• html中ul标签的作用内部有内容的内容用{}括起来
  

敲的時候直接敲缩写就好

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

• Emmet (前身为 Zen Coding) 是一个能大幅度提高前端開发效率的一个工具. 在前端开发的过程中一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候效率会特别低下，因为需要敲打很哆尖括号而且很多html中ul标签的作用都需要闭合html中ul标签的作用等。于是就有了 Emmet，它可以极大的提高代码编写的效率它提供了一种非常简練的语法规则，然后立刻生成对应的 HTML 结构或者 CSS 代码同时还有多种实用的功能帮助进行前端开发。
  VsCode内置了Emmet语法,在后缀为.html/.css中输入缩写后按Tab键即会自动生成相应代码

  E{foo} 代表html中ul标签的作用包含的内容是foo E+N 代表N是E的同级元素。 E^N 代表N是E的上级元素

• 您可以使用元素的名称，如div或p来生成HTMLhtml中ul標签的作用Emmet没有一组可用的html中ul标签的作用名称，可以写任何单词并将其转换为html中ul标签的作用也就是只要知道元素的缩写,Emmet会自动转换成對应html中ul标签的作用.
  

如果想在生成元素的同时添加文本内容可以使用{}

div{这是一段文本}
 

 


 

隐式html中ul标签的作用则会自动联想生成对应元素,根据配置规則不同生成的结果也是不同的.

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

• 嵌套操作符用于将缩写元素放置在生成的树中,是否应放置在上下文元素的內部或附近.

• 分组使用()来实现缩写的分离.比如这个例子,如果不加括号那么a将作为span的子级元素生成.加上括号a将于()内的元素同级.
• 使用N即可自动生荿重复项.N是一个正整数.在使用时请注意N所在位置,位置不同生成的结果不同.

 

 这个功能挺方便的对于生成重复项时增加一个序号,只需要加上$符號即可.
 
 

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

 上述的操作是可以搭配使用进而得出酷炫的效果,使用时请注意空格的问题,缩写代码不要有空格否则是不会进行转换的.
另外如果你的编辑器中已经有了一些html智能提示代码段,比如我的VsCode还装了HTML Snippets插件,这个与Emmet语法有部分冲突,使用Tab键时会优先使用插件的代码提示,建议禁用.
组合起来看看效果:
 
 

 这段目的在于生荿一个类名为table-row,且自定义了属性role的tablehtml中ul标签的作用,内部包含了thead与tbody,分别生成5个td.
thead中td的内容是item加上自增序号,自增序号基数从120开始.
tbody中td拥有一个名为item加降序自增符号类名,且每个td内容随机填充10个单词.
 
 

 再来个配合嵌套元素和计数的大栗子.
 
 

 这个有点复杂,看下效果: