想提高編程效率？掌握快捷鍵和Emmet技巧至關(guān)重要。

合理使用快捷鍵，不必頻繁移動(dòng)鼠標(biāo)或點(diǎn)開菜單，能夠節(jié)省大量時(shí)間，讓你的工作更加流暢輕松。

本文中，分享20個(gè)自己日常必備的VS Code快捷技巧。這些技巧不僅提高了我的編程速度，還增加了樂趣。

1. 使用Emmet快速創(chuàng)建HTML結(jié)構(gòu)

div*3.box → 迅速創(chuàng)建三個(gè)擁有box類的<div>元素：

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

ul>li*5 → 直接生成帶有五個(gè)列表項(xiàng)的<ul>：

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

section{這是一些文本} → 快速擴(kuò)展為：

<section>這是一些文本</section>

2. Emmet快速創(chuàng)建多個(gè)類名

div.title.card.main → 快速輸出：

<div class="title card main"></div>

3. 快速創(chuàng)建子級(jí)與兄弟元素

div>ul>li*3 → 自動(dòng)生成：

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

div+h2+p → 輸出：

<div></div>
<h2></h2>
<p></p>

4. 分組快速生成復(fù)雜結(jié)構(gòu)

div>(header>nav>ul>li*2>a)+footer>span → 自動(dòng)擴(kuò)展為：

<div>
  <header>
    <nav>
      <ul>
        <li><a></a></li>
        <li><a></a></li>
      </ul>
    </nav>
  </header>
  <footer>
    <span></span>
  </footer>
</div>

5. 使用$符號(hào)自動(dòng)生成編號(hào)

ol>li.item$*4 → 自動(dòng)生成帶編號(hào)的元素：

<ol>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
  <li class="item4"></li>
</ol>

6. 快速插入標(biāo)簽內(nèi)文本

button{點(diǎn)擊提交} → 迅速展開為：

<button>點(diǎn)擊提交</button>

7. 展開Emmet縮寫

按Ctrl+E → 快速展開光標(biāo)所在的Emmet縮寫。

8. 快速查看引用位置

按Shift+F12 → 快捷展示當(dāng)前符號(hào)的全部引用位置。

9. 快速重命名符號(hào)

按F2 → 快速對當(dāng)前光標(biāo)所在符號(hào)進(jìn)行全局重命名。

10. 上下移動(dòng)行

按Alt+↑ / ↓ → 快速上下移動(dòng)當(dāng)前行位置。

11. 快捷復(fù)制當(dāng)前行

按Shift+Alt+↑ / ↓ → 迅速復(fù)制當(dāng)前行至上下位置。

12. 快速刪除行

按Ctrl+Shift+K → 一鍵刪除整行。

13. 快速上下插入新行

按Ctrl+Enter / Ctrl+Shift+Enter → 快速在當(dāng)前行的上下插入新行。

14. 快捷切換行注釋

按Ctrl+/ → 快速切換單行注釋。

15. 快捷切換區(qū)塊注釋

按Shift+Alt+A → 快速切換區(qū)塊注釋。

16. 一鍵格式化文檔

按Shift+Alt+F → 快捷自動(dòng)格式化整個(gè)文檔。

17. 快速打開文件

按Ctrl+P → 快速輸入文件名打開對應(yīng)文件。

18. 快速查看全部符號(hào)

按Ctrl+T → 快捷顯示當(dāng)前工作空間內(nèi)所有符號(hào)。

19. 快速顯示或隱藏側(cè)邊欄

按Ctrl+B → 一鍵快速切換側(cè)邊欄的可見性。

20. 快速打開快捷鍵設(shè)置

按Ctrl+K Ctrl+S → 快捷打開快捷鍵編輯器。