---
tags: TS_編輯器
---
<p style="text-align:right;font-size:13px;font-style:italic">
TSuiling最後修改時間@2021.03.01
</p>
# VScode 網頁編輯器
## ==[【※※這份講義有更新版本可點選此連結前往查看※※】](http://tsweb.com.tw/TS_handout/vscode.html?v4)==
## 一、攜帶式免安裝版本 VSCode Portable (只有Win版)
### (一) 下載攜帶式免安裝版本 VSCode Portable
> 1. <a href="http://tsweb44.com/download/VSCodePortable.zip">==這裡按右鍵選擇另存連結 >下載後 > 解壓縮即可使用==</a>
> 2. 這個版本是經過 TSuiling 將環境配置好了，解壓縮即可快速上手使用。
> 3. 如果第一次啟動發現功能表不是中文介面，請關閉軟體，再一次重新啟動即可。
<br>
<br>
### (二) 視窗左側按鈕的介紹
> 
>
> 
>
> * 選擇 ==**色彩佈景主題**== 可以選擇切換程式碼色彩表現的佈景主題。
>
> * 選擇 ==**色彩佈景主題**== > ==安裝其他的色彩佈景主題...== 可以安裝色彩佈景主題。
> 例如：輸入關鍵字 ==One Monokai== 點選安裝 One Monokai Theme。
> 安裝後中央上方會顯示佈景主題選項, 點選 ==Monokai Dimmed== 即可。
>
> * 選擇 ==**設定**== 可以進行這個編輯器環境配合操作的方法。
>
> * 例如：==**使用者**== > ==**經常使用的**== > ==**Files: Auto Save**== 選擇 ==**afterDelay**== 輸入 ==**1000**==，
> 表示每次輸入或修改1秒後即自動存檔。
>
> * 例如：在搜尋設定欄輸入 ==**mouse**== 找到 ==**Editor: Mouse Wheel Zoom**==
> 勾選 ==**使用滑鼠滾輪並按住Ctrl時，縮放編輯器的字型**==
>
<br>
<br>
### (三) 看看上方的文字功能表
> 
>
<br>
<br>
### (四) 網頁檔案的基本操作
> 1. 「**檔案** > ==**開啟資料夾**==」 選擇網站所在的資料夾。
> 2. 「**檔案** > ==**新增檔案**==」 開啟新的檔案。
> 3. 「**檔案** > ==**儲存檔案**==」 儲存檔案，檔案名稱 ==**test001.html**== 必須要有對的副檔名。
> 4. 輸入「==**!**==」按[TAB]鍵或[Enter]鍵，即可產生出網頁基本需要的HTML原始碼。
> 
>
<br>
<br>
### (五) 常用快速鍵的推薦
> 沒有加底色不是不重要, 而是一般常用的, 加了底色是特別又好用的！！
> 選擇「**檔案** > **喜好設定** > **鍵盤快速鍵**」可以查看、修改鍵盤快速鍵。
>
| 分類 | Win Key | Mac Key | 摘要說明 |
| ---- | ------------------ | ---------------- | -------- |
| 檔案 | Ctrl+N | command+N | 新增檔案 |
| | Ctrl+S | command+S | 儲存檔案 |
| | ==Ctrl+K== > ==S== | ==option==+==command==+==S== | 儲存全部檔案 |
| | ==Ctrl==+==P== | ==command==+==P== | 尋找開啟檔案 |
| | ==Ctrl==+==Shift==+==P== | ==command==+==Shift==+==P== | 開啟命令選擇區 |
| 編輯 | 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+↓ | 往下複製整行 |
| | ==Ctrl==+==D== | | 複製游標所在的一整行(已安裝外掛) |
| | ==Ctrl==+==Shift==+==K== | | 刪除游標所在的一整行 |
| | ==Alt==+==↑== | ==option==+==↑== | 整行往上移動 :thumbsup: |
| | ==Alt==+==↓== | ==option==+==↓== | 整行往下移動 :thumbsup: |
| | ==Shift==+==Alt==+==F== | | 格式化文件 (或按右鍵選擇) |
| 選取 | Ctrl+A | command+A | 全選 |
| | Ctrl+Alt+↑ | option+command+↑ | 垂直向上增加游標 |
| | Ctrl+Alt+↓ | option+command+↓ | 垂直向下增加游標 |
| | ==Ctrl==+==Shift==+==L== | ==shift==+==command==+==L== | 選取文字再按快速鍵會選取所有相同文字 |
| | Shift+Alt | |先點一下選取區左上角，按住【Shift+Alt】再拖曳，可選區塊式選取|
| 檢視 | ==Ctrl== + ==+== | ==shift==+==command==+==+== | 畫面檢視放大 |
| | ==Ctrl== + ==-== | ==shift==+==command==+==-== | 畫面檢視縮小 |
| | ==Alt==+==Z== | ==option==+==Z== | 程式碼自動換行的切換 |
### <a href="https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf" target="_blank">官網快速鍵一覽表 for Windows</a>
### <a href="https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf" target="_blank">官網快速鍵一覽表 for macOS</a>
<br>
<br>
<br>
<br>
<br>
<hr>
## 二、下載安裝版的步驟 ==============
### (一) 前往 [https://code.visualstudio.com](https://code.visualstudio.com/) 下載 VSCode
>
> 
>
<br>
<br>
### (二) 下載後進行安裝
> 啟動執行下載的檔案, 下一步 ... ... 即可安裝完成。
>
<br>
<br>
### (三) 安裝延伸模組擴充功能(推薦安裝以下10個左右)
> 1. 中文(繁體)介面 (關鍵字: **chinese** )
>
> 2. 縮排直線提示 (模組名稱: **indenticator** )
> 3. 影像預覽功能 (模組名稱: **Image preview** )
> 4. 括號逐層換色 (模組名稱: **Bracket Pair Colorizer** )
> 5. ==Ctrl+D== 複製目前整行 (模組名稱: **Duplicate selection on line** )
> 6. 同時修改頭尾標籤名稱 (模組名稱: **Auto Rename Tag** )
> 7. 連結link或載入src時自動提示路徑及檔名的選擇 (模組名稱: **Path Intellisense** )
> 8. 讓色彩碼顯示對應顏色 (模組名稱: **Color Highlight** )
> 9. 按右鍵選擇 color manager 選擇色彩 (模組名稱: **Color Manager** )
> 10. 檔案同步預覽功能 (模組名稱: **Liver Server** )
<hr>
以下如有需要再安裝~~~
> 11. 支援即時編譯 SASS/SCSS 成 CSS (模組名稱: **Live Sass Compiler** ) [ref1](https://www.minwt.com/webdesign-dev/html/22366.html) [ref2](https://www.youtube.com/watch?v=lGUNWBP2p8U)
> 12. PHP程式碼提示功能 (模組名稱: **PHP Intelephense** )(不需撰寫PHP者不用安裝)
>
<br>
<br>
<br>
<br>
<br>
### (四) Win電腦中修改HTML文件預設 ( ![TAB]的預設 )
-----------------------------(參考操作，版本不同方法可能不同！)
> step 1. 在 VSCode 左下角點選 ==**管理**== > ==**設定**== 搜尋 ==**emmet**==
>
> step 2. 找到 ==**Extensions Path**== 點選 ==**在 settings.json 內編輯**==
> 
>
> step 3. 在 ==**settings.json**== 檔案中找到 ==**emmet.extensionsPath**==
> 如果沒有找到這一行設定, 可以自行輸入這一行
> 
>
> step 4. 檔案總管中找到這個路徑, 如果沒有找到這個路徑, 也可以自行新增這個資料夾, 再建立一個 ==**snippets.json**== 檔案, 輸入以下內容
>
```
{
"html": {
"snippets": {
"doc": "html[lang=\"zh-Hant-TW\"]>(head>meta[name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=1.0, maximum-scale=3.0\"]+meta[http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"]+meta[charset=${charset}]+title{${1:Document}})+body"
}
}
}
```
<br>
> 儲存檔案後, 重新啟動 VSCode。
>
<br>
<br>
<br>
### (五) Mac電腦中修改HTML文件預設 ( ![TAB]的預設 )
> 基本上, 與 Win 電腦上的修改雷同
> 但得先讓隱藏屬性的檔案顯示出來
> 選擇 **Launchpad** > **終端機** > 輸入
>
> ==**defaults write com.apple.finder AppleShowAllFiles TRUE;\killall Finder**==
>
<br>
<br>
> 接著
> step 1. 在 VSCode 左下角點選 ==**管理**== > ==**設定**== 搜尋 ==**emmet**==
>
> step 2. 找到 ==**Extensions Path**== 點選 ==**在 settings.json 內編輯**==
>
> step 3. 在 ==**settings.json**== 檔案中找到 ==**emmet.extensionsPath**==
>
> step 4. Finder中找到這個路徑, 建立一個 ==**snippets.json**== 檔案, 輸入上述 Win電腦 step 4 相同的內容
<br>
<br>
> 最後，建議修改完成建議再將隱藏屬性的檔案隱藏起來
> 選擇 **Launchpad** > **終端機** > 輸入
>
> ==**defaults write com.apple.finder AppleShowAllFiles FALSE;\killall Finder**==
>
Sign in with Wallet
Connect another wallet