VSCODE快速生成代码tips_vscode批量生成代码

VSCODE快速生成代码

一、快速编辑HTML代码

1、添加类、id、文本和属性

（1）输入 .box

<div class="box"></div>
1

（2）输入p#text

<p id="text"></p>
1

（3）类和id一起输入 .box #text

<div id="box" class="text"></div>
1

（4）元素和内容一块输出 p{你好}

<p>你好</p>
1

（5）输出属性 a[href=#]

<a>href="#"></a>
1

(6) 给后代设置class第一种方法： ul>.calss

<ul>
    <li class="calss"></li>
</ul>
1
2
3

(7)给后代设置class第二种方法： table>.row>.col

<table>
    <tr class="row">
        <td class="col"></td>
    </tr>
</table>
1
2
3
4
5

2、嵌套

（1）输入div+p

<div></div><p></p>
1

（2）输入ul>li*3>a

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
1
2
3
4
5

(3)
‘+’：同级标签符号
‘>’：子元素符号，表示嵌套的元素

3、分组

可以通过嵌套和括号来快速生成一些代码块:(.foo>h1)+(.bar>h2)

<div class="foo">
    <h1></h1>
</div>
<div class="bar">
    <h2></h2>
</div>
1
2
3
4
5
6

4、定义多个带属性的元素

1.输入ul>li.item$*3

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>
1
2
3
4
5

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>
1
2
3
4
5
6
7

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>
1
2
3
4
5
6

二、CSS缩写**

1. 值

比如要定义元素的宽度，只需输入w100，即可生成

width: 100px; 
1

注：除了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 .
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23