--- 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> ### (二) 視窗左側按鈕的介紹 > ![](https://i.imgur.com/cwI6M4R.png) > > ![](https://i.imgur.com/NkE4I1j.png) > > * 選擇 ==**色彩佈景主題**== 可以選擇切換程式碼色彩表現的佈景主題。 > > * 選擇 ==**色彩佈景主題**== > ==安裝其他的色彩佈景主題...== 可以安裝色彩佈景主題。 > 例如:輸入關鍵字 ==One Monokai== 點選安裝 One Monokai Theme。 > 安裝後中央上方會顯示佈景主題選項, 點選 ==Monokai Dimmed== 即可。 > > * 選擇 ==**設定**== 可以進行這個編輯器環境配合操作的方法。 > > * 例如:==**使用者**== > ==**經常使用的**== > ==**Files: Auto Save**== 選擇 ==**afterDelay**== 輸入 ==**1000**==, > 表示每次輸入或修改1秒後即自動存檔。 > > * 例如:在搜尋設定欄輸入 ==**mouse**== 找到 ==**Editor: Mouse Wheel Zoom**== > 勾選 ==**使用滑鼠滾輪並按住Ctrl時,縮放編輯器的字型**== > <br> <br> ### (三) 看看上方的文字功能表 > ![](https://i.imgur.com/gugtmfL.png) > <br> <br> ### (四) 網頁檔案的基本操作 > 1. 「**檔案** > ==**開啟資料夾**==」 選擇網站所在的資料夾。 > 2. 「**檔案** > ==**新增檔案**==」 開啟新的檔案。 > 3. 「**檔案** > ==**儲存檔案**==」 儲存檔案,檔案名稱 ==**test001.html**== 必須要有對的副檔名。 > 4. 輸入「==**!**==」按[TAB]鍵或[Enter]鍵,即可產生出網頁基本需要的HTML原始碼。 > ![](https://i.imgur.com/QQYGqn3.png) > <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 > > ![](https://i.imgur.com/9O6NeRO.png) > <br> <br> ### (二) 下載後進行安裝 > 啟動執行下載的檔案, 下一步 ... ... 即可安裝完成。 > <br> <br> ### (三) 安裝延伸模組擴充功能(推薦安裝以下10個左右) > 1. 中文(繁體)介面 (關鍵字: **chinese** ) ![](https://i.imgur.com/d7p8Cjj.png) > > 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 內編輯**== > ![](https://i.imgur.com/Lc0cJwx.png) > > step 3. 在 ==**settings.json**== 檔案中找到 ==**emmet.extensionsPath**== > 如果沒有找到這一行設定, 可以自行輸入這一行 > ![](https://i.imgur.com/dmGvUSJ.png) > > 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**== >