VSCODE快速生成代码
一、快速编辑HTML代码
1、添加类、id、文本和属性
（1）输入 .box
代码语言：javascript复制<div class="box"></div>（2）输入p#text
代码语言：javascript复制<p id="text"></p>（3）类和id一起输入 .box #text
代码语言：javascript复制<div id="box" class="text"></div>（4）元素和内容一块输出 p{你好}
代码语言：javascript复制<p>你好</p>（5）输出属性 a[href=#]
代码语言：javascript复制<a>href="#"></a>(6) 给后代设置class第一种方法： ul>.calss
代码语言：javascript复制<ul>
<li class="calss"></li>
</ul>(7)给后代设置class第二种方法： table>.row>.col
代码语言：javascript复制<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>2、嵌套
（1）输入div p
代码语言：javascript复制<div></div><p></p>（2）输入ul>li*3>a
代码语言：javascript复制<ul>
<li></li>
<li></li>
<li></li>
</ul>(3) ‘ ’：同级标签符号 ‘>’：子元素符号，表示嵌套的元素
3、分组
可以通过嵌套和括号来快速生成一些代码块:(.foo>h1) (.bar>h2)
代码语言：javascript复制<div class="foo">
<h1></h1>
</div>
<div class="bar">
<h2></h2>
</div>4、定义多个带属性的元素
1.输入ul>li.item$*3
代码语言：javascript复制<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>2.自增符 div.class>div.classl_
代码语言：javascript复制<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
代码语言：javascript复制<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，即可生成
代码语言：javascript复制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里命令）
代码语言：javascript复制# 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 .
