VSCode快速编辑html(Emmet)

淡淡的烟草味﹌ 2023-07-15 09:10 12阅读 0赞

### 文章目录 ###

*   *  Emmet中文文档查看
     *  div加类名
     *  多光标选择编辑
     *  行跳转
     *  切换栏
     *  自动计数
     *  添加文本内容
     *  同时编辑多处文字 批量替换编辑内容
     *  缩进

## [Emmet中文文档查看][Emmet] ##

## div加类名 ##

**div.demo**

--------------------

## 多光标选择编辑 ##

**操作：alt + 鼠标左键**

<body>
        <ul>
            <li>多光标选择编辑</li>
            <li>多光标选择编辑</li>
            <li>多光标选择编辑</li>
            <li>多光标选择编辑</li>
            <li>多光标选择编辑</li>
        </ul>
    </body>

--------------------

## 行跳转 ##

**操作：Ctrl + g**

--------------------

## 切换栏 ##

**操作：Ctrl + B**  
![切换栏][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70]  
![切换栏][20200322145128200.png]

--------------------

## 自动计数 ##

**操作：ul>li\{ $ \}**

--------------------

## 添加文本内容 ##

**操作：\{\}**

ul>li{xyz}*3

--------------------

## 同时编辑多处文字 批量替换编辑内容 ##

**先按 Ctrl + F 打开搜索框，然后搜索要编辑的内容，接着按 Ctrl + Shift + L 就可以选中对应的所有内容了，然后按 Esc退出， 再进行编辑就可以达到替换的目的。**

1.  Ctrl + F：搜索：我是test.js里面的内容；![Ctrl + F][Ctrl _ F]
2.  Ctrl + Shift + L：按了Ctrl + Shift + L选中；
3.  Esc:退出；![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70 1]
4.  最后编辑你先替换成为的内容；

## 缩进 ##

> 加缩进： Tab  
> 减缩进：Shift + Tab

[Emmet]: http://yanxyz.github.io/emmet-docs/abbreviations/syntax/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70]: /images/20230528/3cb2b4fd3b59435c91d022ac074a7f4a.png
[20200322145128200.png]: /images/20230528/7273df9f61f74e27b9541fff5304052e.png
[Ctrl _ F]: /images/20230528/a8c1addbf0bb4d39b6000ba3da7279f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70 1]: /images/20230528/61178a1f9ebb4487858aeb1eaee2e109.png