VSCODE快速生成代码tips

天天Lotay

发布于 2022-12-02 09:39:24

1.3K0

发布于 2022-12-02 09:39:24

文章被收录于专栏：嵌入式音视频

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_

<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 .

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-01-12，如有侵权请联系 cloudcommunity@tencent.com 删除

class