VScode 網頁編輯器

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

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

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

(二) 認識視窗左側按鈕


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

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

  1. 「檔案 > 開啟資料夾」 選擇網站所在的資料夾。
  2. 「檔案 > 新增檔案」 開啟新的檔案。
  3. 「檔案 > 儲存檔案」 儲存檔案,檔案名稱 test001.html 必須要有對的副檔名。
  4. 輸入「 ! 」按[TAB]鍵或[Enter]鍵,即可產生出網頁基本需要的HTML原始碼(如下)。

(五) 常用快速鍵的推薦

選擇「檔案 > 喜好設定 > 鍵盤快速鍵」可以查看、修改鍵盤快速鍵

分類 Win Key Mac Key 摘要說明
檔案 Ctrl+N command+N 新增檔案
  Ctrl+S command+S 儲存檔案
      看看上方「檔案」功能表,常用的就記下來
編輯 Ctrl+F command+F 目前文件尋找文字
  Ctrl+H option+command+F 目前文件取代文字
  Ctrl+/ command+/ 加上或取消註解
      看看上方「編輯」功能表,常用的就記下來
選取項目 Ctrl+Enter command+Enter 目前位置往下新增一行
  Shift+Alt+↑ Shift+option+↑ 向上複製一整行
  Shift+Alt+↓ Shift+option+↓ 向下複製一整行
  Ctrl+D command+D 向下複製一整行
  Ctrl+Shift+K command+Shift+K 刪除游標所在的一整行
  Alt+↑ option+↑ 整行往上移動
  Alt+↓ option+↓ 整行往下移動
  Ctrl+Shift+L shift+command+L 選取文字再按快速鍵會選取所有相同文字
  Shift+Alt Shift+option 先點一下選取區左上角,
按住【Shift+Alt】再拖曳,
可選區塊式選取
      看看「選取項目」功能表,常用的就記下來
檢視 Ctrl+Shift+P command+Shift+P 開啟命令選擇區
  Ctrl+[+] command+[+] 畫面檢視放大
  Ctrl+[-] command+[-] 畫面檢視縮小
  Alt+Z option+Z 程式碼自動換行的切換
      看看上方「檢視」功能表,常用的就記下來

官網快速鍵一覽表 for Windows

官網快速鍵一覽表 for macOS

二、下載安裝版的步驟

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

(二) 下載後進行安裝

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

(三) 安裝擴充功能(推薦安裝以下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 )

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

  1. 支援即時編譯 SASS/SCSS 成 CSS (模組名稱: Live Sass Compiler ) REF1 REF2
  2. PHP程式碼提示功能 (模組名稱: PHP Intelephense )


(四) Win版本中修改 HTML文件預設的Code ( ![TAB]的預設 )

目前 Win 與 Mac 的方法雷同,以下參考操作,未來VScode版本不同時方法可能不同!

【Win Step-1】設定settings.json中擴充設定檔案的位置

【Win Step-2】加上方框中 "emmet.extensionsPath":XXXXXXXX 這一行

這一行是指定擴充檔案要存放的位置,其中「TS」表示開機使用者名稱的資料夾。
而其他行是因其他設定中的改變而自動產生的。

【Win Step-3】檔案總管 > 指定路徑 > 新增 snippets.json 檔案

指定路徑就是 Step-2 輸入的路徑,如果沒有找到這個路徑, 也可以自行新增這個資料夾。

在指定路徑中新增 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"
      }
    }
  }


(五) Mac版本中修改 HTML文件預設的Code ( ![TAB]的預設 )

目前 Win 與 Mac 的方法雷同,以下參考操作,未來VScode版本不同時方法可能不同!

【Mac Step-1】設定settings.json中擴充設定檔案的位置

【Mac Step-2】加上方框中 "emmet.extensionsPath":XXXXXXXX 這一行

這一個設定是指定擴充檔案要存放的位置,其中「TSuilingChang」表示開機使用者名稱的資料夾。
而其他行是因其他設定中的改變而自動產生的。

【Mac Step-3】檔案總管 > 指定路徑 > 新增 snippets.json 檔案

指定路徑就是 Step-2 輸入的路徑,如果沒有找到這個路徑, 也可以自行新增這個資料夾。

在指定路徑中新增 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"
      }
    }
  }