VSCODE快速生成代码
一、快速编辑HTML代码
1、添加类、id、文本和属性
（1）输入 .box
<div class="box"></div>
2）输入p#text
<p id="text"></p>
（3）类和id一起输入 .box #text
<div id="box" class="text"></div>
（4）元素和内容一块输出 p{你好}
<p>你好</p>
（5）输出属性 a[href=#]
<a>href="#"></a>
(6) 给后代设置class第一种方法： ul>.calss
<ul> <li class="calss"></li> </ul>
(7)给后代设置class第二种方法： table>.row>.col
<table> <tr class="row"> <td class="col"></td> </tr> </table>
2、嵌套
（1）输入div+p
<div></div><p></p>
（2）输入ul>li*3>a
<ul> <li></li> <li></li> <li></li> </ul>
(3)
‘+’：同级标签符号
‘>’：子元素符号，表示嵌套的元素
3、分组
可以通过嵌套和括号来快速生成一些代码块:(.foo>h1)+(.bar>h2)
<div class="foo"> <h1></h1> </div> <div class="bar"> <h2></h2> </div>
4、定义多个带属性的元素
1.输入ul>li.item$*3
<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> </ul>
2.自增符$
div.class>div.classl_$*5
<div class="class"> <div class="class1_1"></div> <div class="class1_2"></div> <div class="class1_3"></div> <div class="class1_4"></div> <div class="class1_5"></div> </div>
3.自增
从某数开始 div.class>div.classl_$@3*4
<div class="class"> <div class="class1_3"></div> <div class="class1_4"></div> <div class="class1_5"></div> <div class="class1_6"></div> </div>
二、CSS缩写**
1. 值
比如要定义元素的宽度，只需输入w100，即可生成
width: 100px;
注：除了px，也可以生成其他加粗样式单位
p 表示%
e 表示 em
x 表示 ex
三.常用快捷键
ctrl + shift + d 复制光标所在一整行代码
ctrl + d 选择相同文字
shift + 方向键 选择文字
ctrl + z 返回上一步操作
ctrl + y 返回下一步操作
shift + ctrl + 上下方向键 移动光标所在代码位置
shift + alt + 上下方向键 上下添加光标
end 把光标移动最后一位
fn+end shift+end 笔记本
shift + ctrl + k 删除一整行
ctrl + enter 换行
Ctrl + Shift + M 错误和警告（快速跳转到项目中的错误和警告。通过F8或Shift + F8循环检查错误）
Ctrl + \ 并排编辑
在拖动鼠标时按住Shift + Alt 列（盒）选择
Shift + Alt +向上键或Shift + Alt +向下键 向上/向下复制行号
Alt + Up或Alt + Down 上下移动行号
Shift + Alt +向左键或Shift + Alt +向右键 缩小/扩大选择
CLI快捷（即在cmd里命令）
# open code with current directory code . # open the current directory in the most recently used code window code -r . # create a new window code -n # change the language code --locale=es # open diff editor code --diff <file1> <file2> # open file at specific line and column <file:line[:character]> code --goto package.json:10:5 # see help options code --help # disable all extensions code --disable-extensions .
