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然后鼠标下拉，即可添加一整列光标
转载：https://blog.csdn.net/xiaorui51/article/details/108414956
查看评论