# VS Code 基本介紹 講師 陳琨 --- # 常用快速鍵 * Windows 作業系統 * Mac 作業系統 ---- ## Windows作業系統 1. 註解: `ctrl`+`/` 2. 還原上一步: `ctrl`+`z` 3. 存檔: `ctrl`+`s` 4. 切換程式: `alt`+`tab` 5. 在瀏覽器開啟: `ctrl`+`1` (需安裝 Open HTML in Default Browser 套件) 6. 自動排版 `ctrl` + `shift` + `F` ---- ## Mac作業系統 1. 註解: `command`+`/` 2. 還原上一步: `command`+`z` 3. 存檔: `command`+`s` 4. 切換程式: `command`+`tab` 5. 在瀏覽器開啟: `command`+`1` (需安裝 Open HTML in Default Browser 套件) 6. 自動排版 `command` + `shift` + `F` ---- ## 官網的詳細快速鍵  ---- ## 文件下載 [官網快速鍵文件](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf) --- # 常用擴充套件 * VS Code 的中文(繁體)語言套件 * Chinese (Traditional) Language Pack for Visual Studio Code * 自動將 HTML 檔案在瀏覽器顯示 * Open HTML in Default Browser * 自動排版 * JS-CSS-HTML Formatter --- # emmet語法 * 建立單一個tag * 建立多個tag * $數字自動補上 * 添加tag的屬性值 ---- ## 建立單一個tag * 語法 `tagname{內容文字或標籤}` + `tab` * 範例1  * 結果  ---- ## 建立多個tag * 語法 `tagname*數字` + `tab` * 範例2  * 結果  ---- ## $數字自動補上 * 範例3  * 結果  ---- ## 添加tag的屬性值 * 語法 `tagname[attr1=value1 attr2=value2]` + `tab` * 範例4  * 結果  ---- ## 產生五張圖片 * 範例5  * 結果  --- ###### tags: `前端程式設計`