VScode快捷键记录

发表于 更新于 分类于 本文字数： 1.5k 阅读时长 ≈ 1 分钟

⚠️注释：⌘=Command; ⌥=Option; ^=Control; ⇧=Shift; ⇪=CapLock; ⎋=Escape

HTML篇

  • ! +Tab：可以快速制作骨架

  • ⌥⇧F：实现代码对齐

  • ⌘ + /：添加/取消注释（另外还有 ⌘KC & ⌘KU）

  • 1
    2
    3
    4
    // 输入 div*3 , 回车
    <div></div>
    <div></div>
    <div></div>
  • 1
    2
    3
    4
    // 输入 div{$}*3 ，回车
    <div>1</div>
    <div>2</div>
    <div>3</div>
  • 1
    2
    3
    4
    5
    // 给标签加id和class
    // 输入 div#tagId ，回车
    <div id="tagId"></div>
    // 输入 div.tagClass ，回车
    <div class="tagClass"></div>
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    // 多层嵌套标签用>右尖括号，还可以任意组合。
    span>div>section
    <span>
        <div>
            <section></section>
        </div>
    </span>

    span>div*3>section
    <span>
        <div>
            <section></section>
        </div>
        <div>
            <section></section>
        </div>
        <div>
            <section></section>
        </div>
    </span>

    span>div{$}*3>section
    <span>
        <div>
            1
            <section></section>
        </div>
        <div>
            2
            <section></section>
        </div>
        <div>
            3
            <section></section>
        </div>
    </span>

    span>div*3>section{$}*3
    <span>
        <div>
            <section>1</section>
            <section>2</section>
            <section>3</section>
        </div>
        <div>
            <section>1</section>
            <section>2</section>
            <section>3</section>
        </div>
        <div>
            <section>1</section>
            <section>2</section>
            <section>3</section>
        </div>
    </span>
✩
--------------------END--------------------