刻意練習，加快開發速度! (Visual Studio Code快捷鍵表及emmet資源)

Published in

IvyCodeFive

Apr 18, 2020

近期報名的六角學院「網頁切版直播班」在上週開課了，身為前端全職轉職鬥士的我，目前在學習 JavaScript 的階段，報名此課程是希望能藉此複習，並且更精進切板技術，想不到第一周的課程就讓我獲益良多呢!

先來說說老師上周提供的 2 項搭配訓練菜單:

使用程式編輯器這麼久，都沒好好落實過這兩項，只有偶爾在寫 CSS 想到時，會試著使用一些 Emmet 縮寫來加快速度，快捷鍵會的更是只有那幾個，不如趁這次機會一次練起來吧!

Visual Studio Code 熱鍵表

目前使用的程式碼編輯器為 Visual Studio Code ，不囉嗦，先附上六角提供的Visual Studio Code 中文熱鍵表資源及官方英文熱鍵表:

打開快捷鍵表後決定一項一項來試試，並把覺得可以常用的熱鍵標記起來，也因此發現了許多尋找已久、相見恨晚的熱鍵功能!以下補充一些我的新發現~ (我使用的是 windows 系統)

alt 按著，加上 → 或 ← 可以更快速地往左、往右移動! 以前真的不知道這件事，都傻傻的慢慢移動...
以前想要刪除一整行，會用 Ctrl+L 先選取一整行，再按 Delete 或Backspace，現在發現可以使用 Ctrl+Shift+k 來刪除一整行。
想選取所有相同單字，可以使用 Ctrl+D 一個個選取，也可以使用Ctrl+F2 直接選取所有相同單字。
分割視窗的方法，可按 Ctrl+\，檔案會複製一份至分割視窗，或是按Ctrl+Alt+→直接將檔案帶到另一個視窗。
按 Ctrl+B 可將最左邊選單列隱藏，切換欄位可見度。
而 Ctrl+Shift+D 文件上標示對應功能為顯示 Debug(Show Debug)，但我自己試試的結果，卻是能直接複製貼上一整行呢~

如果想自訂快捷鍵，可以參考這篇文章唷，也有一些基本快捷鍵可參考，大家一起來找出適合自己，並縮短開發時間的好用快捷鍵吧~

Emmet 是 Visual Studio Code 內部就有內建的外掛程式，透過縮寫 +tab 的方式，能加快開發者在編寫 HTML、CSS 的速度，並降低手誤、打錯字的機會。

想了解 Emmet 的基本操作，可參考這篇文章。

若打字速度較慢的同學，老師推薦可以搭配 keybr 一起練習呢!
這邊附上教學影片以及使用步驟 (GitHub資源)。

從上週的課程作業開始練習，對我來說，HTML 的 Emmet 練習比 CSS 的難度多上一些，要熟練使用可能還需要一段時間，希望經過這八週的好好鍛練，能夠完全熟練使用這兩項輔助技能!