# VScode 網頁編輯器 ## 一、下載 > [https://code.visualstudio.com](https://code.visualstudio.com/) > > ![](https://i.imgur.com/9O6NeRO.png) > ## 二、安裝 > 啟動執行下載的檔案, 下一步 ... ... 即可安裝完成。 > <br> ## 三、延伸模組擴充功能推薦 > 1. 中文(繁體)介面 (關鍵字: **chinese** ) ![](https://i.imgur.com/d7p8Cjj.png) > > 2. 縮排直線提示 (模組名稱: **indenticator** ) > 3. 縮排區域彩虹色提示 (模組名稱: **indent-rainbow** ) > 4. 影像預覽功能 (模組名稱: **Image preview** ) > 5. 括號逐層換色 (模組名稱: **Bracket Pair Colorizer** ) > 6. ==Ctrl+D== 複製目前整行 (模組名稱: **Duplicate selection on line** ) > 7. 同時修改頭尾標籤名稱 (模組名稱: **Auto Rename Tag** ) > 8. 連結link或載入src時自動提示路徑及檔名的選擇 (模組名稱: **Path Intellisense** ) > 9. 檔案同步預覽功能 (模組名稱: **Liver Server** ) > 10. PHP程式碼提示功能 (模組名稱: **PHP Intelephense** ) > <br> ## 四、視窗左側按鈕 > ![](https://i.imgur.com/cwI6M4R.png) > > ![](https://i.imgur.com/NkE4I1j.png) > > 選擇 ==**色彩佈景主題**== 可以選擇切換程式碼色彩表現的佈景主題。 > > 選擇 ==安裝其他的色彩佈景主題...== 可以安裝色彩佈景主題。 > 例如輸入關鍵字 ==One Monokai== 點選安裝 One Monokai Theme。 > 安裝後中央上方會顯示佈景主題選項, 點選 ==Monokai Dimmed== 即可。 > > 選擇 ==**設定**== 「使**用者設定** > **文字編輯器** > **字型**」。 > 可以輸入設定程式碼顯示的 Font Family 字體。 > 也可以將 ==**Font Weight**== 選擇 ==**bold**== 粗體顯示。 > <br> ## 五、功能表..... > ![](https://i.imgur.com/gugtmfL.png) > <br> ## 六、常用快速鍵推薦 > 沒有加底色不是不重要, 是一般常用的, 加了底色是特別又好用的! > | 分類 | Win Key | Mac Key | 摘要說明 | | ---- | ------------------ | ---------------- | -------- | | 檔案 | Ctrl+N  | command+N | 新增檔案 | |  | Ctrl+S  | command+S | 儲存檔案 | |   | ==Ctrl+K== > ==S== | ==option==+==command==+==S== | 儲存全部檔案 :thumbsup: | | 編輯 | Ctrl+Z  | command+Z | 復原 | |  | Ctrl+Y  | shift+command+Z | 取消復原 | |  | Ctrl+X  | command+X | 剪下選取範圍 | |  | Ctrl+C  | command+C | 複製選取範圍 | |  | Ctrl+V  | command+V | 貼上複製或剪下的範圍 | |  | Ctrl+F  | command+F | 目前文件尋找文字 | |  | Ctrl+H  | option+command+F | 目前文件取代文字 | |  | Ctrl+/  | command+/ | 加上或取消註解 :thumbsup: | |  | Shift+Alt+↑ | shift+option+↑ | 往上複製整行 | |  | Shift+Alt+↓ | shift+option+↓ | 往下複製整行 | |  | ==Alt+↑== | ==option==+==↑== | 整行往上移動 :thumbsup: | |  | ==Alt+↓== | ==option==+==↓== | 整行往下移動 :thumbsup: | | 選取 | Ctrl+A  | command+A | 全選 | |  | Ctrl+Alt+↑  | option+command+↑ | 垂直向上增加游標 | |  | Ctrl+Alt+↓  | option+command+↓ | 垂直向下增加游標 | |  | ==Ctrl+Shift+L== | ==shift==+==command==+==L== | 選取文字再按快速鍵會選取所有相同文字 :thumbsup: | | 檢視 | ==Ctrl== + ==+== | ==shift==+==command==+==+== | 畫面檢視放大 | | | ==Ctrl== + ==-==  | ==shift==+==command==+==-== | 畫面檢視縮小 | | | Alt+Z  | option+Z | 程式碼自動換行的切換 | <br> ## 七、基本操作 > 1. 「**檔案** > ==**開啟資料夾**==」 選擇網站所在的資料夾。 > 2. 「**檔案** > ==**新增檔案**==」 開啟新的檔案。 > 3. 「**檔案** > ==**儲存檔案**==」 儲存檔案,檔案名稱 ==**test001.html**== 必須要有對的副檔名。 > 4. 輸入「==**!**==」按[TAB]按鈕。 > ![](https://i.imgur.com/QQYGqn3.png) > <p style="padding:50px 0;text-align:right;"> <a href="http://tsweb44.com" style="padding:20px;">回到 TS web</a> </p>