Try   HackMD

TSuiling最後修改時間@2021.03.01

VScode 網頁編輯器

【※※這份講義有更新版本可點選此連結前往查看※※】

一、攜帶式免安裝版本 VSCode Portable (只有Win版)

(一) 下載攜帶式免安裝版本 VSCode Portable

  1. 這裡按右鍵選擇另存連結 >下載後 > 解壓縮即可使用
  2. 這個版本是經過 TSuiling 將環境配置好了，解壓縮即可快速上手使用。
  3. 如果第一次啟動發現功能表不是中文介面，請關閉軟體，再一次重新啟動即可。


(二) 視窗左側按鈕的介紹

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • 選擇 色彩佈景主題 可以選擇切換程式碼色彩表現的佈景主題。

  • 選擇 色彩佈景主題 > 安裝其他的色彩佈景主題… 可以安裝色彩佈景主題。
    例如：輸入關鍵字 One Monokai 點選安裝 One Monokai Theme。
    安裝後中央上方會顯示佈景主題選項, 點選 Monokai Dimmed 即可。

  • 選擇 設定 可以進行這個編輯器環境配合操作的方法。

  • 例如：使用者 > 經常使用的 > Files: Auto Save 選擇 afterDelay 輸入 1000，
    表示每次輸入或修改1秒後即自動存檔。

  • 例如：在搜尋設定欄輸入 mouse 找到 Editor: Mouse Wheel Zoom
    勾選 使用滑鼠滾輪並按住Ctrl時，縮放編輯器的字型



(三) 看看上方的文字功能表

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →



(四) 網頁檔案的基本操作

  1. 「檔案 > 開啟資料夾」 選擇網站所在的資料夾。
  2. 「檔案 > 新增檔案」 開啟新的檔案。
  3. 「檔案 > 儲存檔案」 儲存檔案，檔案名稱 test001.html 必須要有對的副檔名。
  4. 輸入「!」按[TAB]鍵或[Enter]鍵，即可產生出網頁基本需要的HTML原始碼。
    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →


(五) 常用快速鍵的推薦

沒有加底色不是不重要, 而是一般常用的, 加了底色是特別又好用的！！
選擇「檔案 > 喜好設定 > 鍵盤快速鍵」可以查看、修改鍵盤快速鍵。

分類 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+/ 加上或取消註解
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Shift+Alt+↑ shift+option+↑ 往上複製整行
Shift+Alt+↓ shift+option+↓ 往下複製整行
Ctrl+D 複製游標所在的一整行(已安裝外掛)
Ctrl+Shift+K 刪除游標所在的一整行
Alt+↑ option+↑ 整行往上移動
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Alt+↓ option+↓ 整行往下移動
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
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 程式碼自動換行的切換

官網快速鍵一覽表 for Windows

官網快速鍵一覽表 for macOS






二、下載安裝版的步驟 ==============

(一) 前往 https://code.visualstudio.com 下載 VSCode

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →



(二) 下載後進行安裝

啟動執行下載的檔案, 下一步 … … 即可安裝完成。



(三) 安裝延伸模組擴充功能(推薦安裝以下10個左右)

  1. 中文(繁體)介面 (關鍵字: chinese )

    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →

  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 )

以下如有需要再安裝~~~

  1. 支援即時編譯 SASS/SCSS 成 CSS (模組名稱: Live Sass Compiler ) ref1 ref2
  2. PHP程式碼提示功能 (模組名稱: PHP Intelephense )(不需撰寫PHP者不用安裝)





(四) Win電腦中修改HTML文件預設 ( ![TAB]的預設 )

––––––––––––––-(參考操作，版本不同方法可能不同！)

step 1. 在 VSCode 左下角點選 管理 > 設定 搜尋 emmet

step 2. 找到 Extensions Path 點選 在 settings.json 內編輯

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

step 3. 在 settings.json 檔案中找到 emmet.extensionsPath
如果沒有找到這一行設定, 可以自行輸入這一行

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

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"
    }
  }
}

儲存檔案後, 重新啟動 VSCode。




(五) Mac電腦中修改HTML文件預設 ( ![TAB]的預設 )

基本上, 與 Win 電腦上的修改雷同
但得先讓隱藏屬性的檔案顯示出來
選擇 Launchpad > 終端機 > 輸入

defaults write com.apple.finder AppleShowAllFiles TRUE;\killall Finder



接著
step 1. 在 VSCode 左下角點選 管理 > 設定 搜尋 emmet

step 2. 找到 Extensions Path 點選 在 settings.json 內編輯

step 3. 在 settings.json 檔案中找到 emmet.extensionsPath

step 4. Finder中找到這個路徑, 建立一個 snippets.json 檔案, 輸入上述 Win電腦 step 4 相同的內容



最後，建議修改完成建議再將隱藏屬性的檔案隱藏起來
選擇 Launchpad > 終端機 > 輸入

defaults write com.apple.finder AppleShowAllFiles FALSE;\killall Finder

Last changed by 
 
Chang Tsuiling
0
4
8162
Published on HackMD