Visual Studio Code
設計一個網站/應用程式，涉及到兩個階段，包括『前置作業』以及『程式建立與測試』，這個文章的效率專注在第二個階段，也就是已完成前置作業後，程式的輸入、顯示、檢測的過程，這其中有五大方法可以提高效率，分別為：輸入程式效率、跳到某程式效率、搜尋效率、顯示效率、除錯效率，這個文章及影片，以Visual Studio Code為編輯軟體，整理主要的效率提升技巧，彙整所有的內容。
【輸入程式效率】
html架構
輸入! 按下Enter就會跳出HTML架構
html標籤
快速建立標籤
不用打< >，直接打標籤名稱，例如style，打下去後自動產生<style>
快速建立標籤屬性
div.hello (.hello)
div#hello (#hello)
input:radio
button:submit
link:css
組合： input:radio.hello#yes
快速建立巢狀式標籤＋屬性
nav>ul>li
table>.row>.col
ul>li.item$*5
選擇多個一樣的標籤，同時編輯
選擇一個要更改的之後，按下Ctrl+D/Cmd+D
按下多個，可以同時更改多個
如果要針下標籤修改，可以下載auto rename tag
建立多個指標，同時編輯
按下 Alt+點一下/Option +點一下，點選多個地方之後，同時輸入
移動整列程式
Alt +↑ or ↓ / option +↑ or ↓
複製、貼上整段程式
選擇要複製的程式後，
Shift+Alt +↑ or ↓ / Shift+option +↑ or ↓
自動完成
Intellisense for CSS
【跳到某程式效率】
跳到最上、最下、最左、最右的程式
Ctrl+↑ /Cmd +↑
Ctrl+↓ /Cmd +↓
Ctrl+← /Cmd +←
Ctrl+→ /Cmd +→
跳到某程式效率
開啟Command Palette Ctrl+P / Cmd+P
輸入：程式列；例如： :100
【搜尋效率】
快速開啟檔案
開啟Command Palette Ctrl+P / Cmd+P
找關鍵字
Ctrl +F / Cmd +F
快速找command
開啟Command Palette Ctrl+P / Cmd+P
輸入>
快速找變數、函式、標籤
方法一：
開啟Command Palette Ctrl+P / Cmd+P
輸入＠
方法二：
Ctrl + Shift + ./Cmd+Shift+.
【顯示效率】
顯示結果
Live Server
自動排版
Prettier
【除錯效率】
ChatGPT EasyCode
官網介紹：https://code.visualstudio.com/docs/editor/codebasics
網路分享：https://docs.emmet.io/cheat-sheet/