VSCode几个好用的技巧

创建新文档总是要会的呐

在vscode之前,用的软件是php(phpstorm),创建文件的时候会有选项,比如说html、css、js文件等等,但是用vscode的时候,没有选项了哦,如下图所示
在这里插入图片描述
其实也挺方便的,右击文件夹,点击了新建文件(或者ctrl N什么的随便啦)以后,直接输入文件名和文件类型(后缀)回车就行了(我会说我当时找后缀选项找了半天后来实在找不到就问了同事吗,科科)。
在这里插入图片描述

很好用的多视图编辑哦

有时候打起代码来,动不动就是几百行,总是上下移动移到猴年马月吗,左边html右边css还是小意思,同一个文件查看布局功能方法或者其他什么的还是挺好用的
VSCode几个好用的技巧_第1张图片
VSCode几个好用的技巧_第2张图片

编辑时的一些小技巧

tip1: 按下!后,Tab或Enter,快速生成代码
VSCode几个好用的技巧_第3张图片
tip2: 输入标签后按Tab或Enter补全
在这里插入图片描述

tip3: 用>生成嵌套标签,带class和id用.及#,把div省略直接.类名或#id也可以哦,例
在这里插入图片描述
按下Tab或Enter,快速补全
在这里插入图片描述

tip4: 用+生成并列标签,例
在这里插入图片描述
按下Tab或Enter,快速补全

在这里插入图片描述
tip5: 用*生成多个相同标签,例
在这里插入图片描述
按下Tab或Enter,快速补全
VSCode几个好用的技巧_第4张图片
tip6: 用{}嵌套文本,例
在这里插入图片描述
按下Tab或Enter,快速补全
在这里插入图片描述
tip7: 用^生成与前一个元素同级的元素,例
在这里插入图片描述
按下Tab或Enter,快速补全
VSCode几个好用的技巧_第5张图片
tip8: 用()实现多个不嵌套板块的生成,例
在这里插入图片描述
按下Tab或Enter,快速补全
VSCode几个好用的技巧_第6张图片
tip9: 按住Alt不放,点击生成多个光标(可以与上图进行比较哦)
VSCode几个好用的技巧_第7张图片
tip10: 通过[]生成属性,例
在这里插入图片描述
按下Tab或Enter,快速补全
VSCode几个好用的技巧_第8张图片
tip11: 通过$实现递增序列,例
在这里插入图片描述
VSCode几个好用的技巧_第9张图片
还有挺多的有机会再说吧,还有调试查看效果这些下回继续

你可能感兴趣的:(html)