--- tags: TS_編輯器 --- # VScode 網頁編輯器 ## 零、攜帶式免安裝版本 VSCode Portable(只有Win版) > 1. 這裡提供一個攜帶式免安裝版本並且經過TS將環境配置好了(for Windows), <a href="http://tsweb44.com/download/VSCodePortable.zip">==點我下載,解壓縮即可使用 (以下安裝版就不需要執行了)==</a>。 > <br> # 以下是下載安裝版的步驟 ======== ## 一、下載 > [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. 檔案同步預覽功能 (模組名稱: **Liver Server** ) > 9. 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]的預設 )的方法 > 檔案總管 > 找到 VSCode 安裝的位置 > 搜尋 ==**expand-full.js**== 檔案 > 使用 **VSCode** 開啟檔案進行修改 > 修改後存檔,必須在右下角點選「==**Retry as Admin...**==」使用系統管理者來儲存。 > > 大略會是在這個位置上 > C:\Program Files\Microsoft VS Code\resources\app\extensions\emmet\node_modules\vscode-emmet-helper\out\expand <br> > 行5657左右 > ```js=5657 const defaultVariables = { lang: 'zh-Hant-TW', locale: 'zh-Hant-TW', charset: 'UTF-8' }; ``` <br> > 行4980左右: ( 修改以下,不要換行 ) > ```js=4980 "meta:vp": "meta[name=viewport content='width=${1:device-width}, initial-scale=${2:1.0}, user-scalable=${3:yes}, minimum-scale=${4:1.0}, maximum-scale=${5:3.0}']", ``` <p style="padding:50px 0;text-align:right;"> <a href="http://tsweb.com.tw" style="padding:20px;">回到 TS web</a> </p>