--- tags: TS_編輯器 --- <p style="text-align:right;font-size:13px;font-style:italic"> TSuiling最後修改時間@2020.08.18 </p> # VScode 網頁編輯器 ## 零、攜帶式免安裝版本 VSCode Portable(只有Win版) > 1. 這裡提供一個攜帶式免安裝版本並且經過TS將環境配置好了(for Windows), <a href="http://tsweb44.com/download/VSCodePortable.zip">==點我下載,解壓縮即可使用 (以下安裝版就不需要執行了)==</a>。 > <br> <br> <br> <br> <br> <hr> # 以下是下載安裝版的步驟 ============== ## 一、下載 > [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. 影像預覽功能 (模組名稱: **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> ## 四、視窗左側按鈕 > ![](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==+==P==  | ==command==+==P== | 尋找開啟檔案 :thumbsup: | |   | ==Ctrl==+==Shift==+==P==  | ==command==+==Shift==+==P== | 開啟命令選擇區 :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+↓ | 往下複製整行 | |  | ==Ctrl==+==Shift==+==K== | | 刪除行 | |  | ==Alt==+==↑== | ==option==+==↑== | 整行往上移動 :thumbsup: | |  | ==Alt==+==↓== | ==option==+==↓== | 整行往下移動 :thumbsup: | |  | ==Shift==+==Alt==+==F== | | 格式化文件 :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 | 程式碼自動換行的切換 | ### <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> ## 七、基本操作 > 1. 「**檔案** > ==**開啟資料夾**==」 選擇網站所在的資料夾。 > 2. 「**檔案** > ==**新增檔案**==」 開啟新的檔案。 > 3. 「**檔案** > ==**儲存檔案**==」 儲存檔案,檔案名稱 ==**test001.html**== 必須要有對的副檔名。 > 4. 輸入「==**!**==」按[TAB]按鈕。 > ![](https://i.imgur.com/QQYGqn3.png) > <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> ## 九、Mac電腦中修改HTML文件預設 ( ![TAB]的預設 ) 的方法 > 基本上, 與 Win 電腦上的修改雷同 > > step 1. 在 VSCode 左下角點選 ==**管理**== > ==**設定**== 搜尋 ==**emmet**== > > step 2. 找到 ==**Extensions Path**== 點選 ==**在 settings.json 內編輯**== > > step 3. 在 ==**settings.json**== 檔案中找到 ==**emmet.extensionsPath**== > > step 4. Finder中找到這個路徑, 建立一個 ==**snippets.json**== 檔案, 輸入上述 Win電腦 step 4 相同的內容 > <p style="padding:50px 0;text-align:right;"> <a href="http://tsweb.com.tw" style="padding:20px;">回到 TS web</a> </p>