VScode 網頁編輯器

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

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

如果要使用上述下載的 Portable 攜帶式免安裝版本,
那麼以下 「二、下載安裝版的步驟」 就不用安裝
但,有空時推薦你根據 「二、下載安裝版的步驟」 進行安裝,
2個版本可以同時存在的。

 

 

二、下載安裝版的步驟

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

(二) 下載後進行安裝

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

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

安裝擴充功能的方法

  1. 中文(繁體)介面 (關鍵字: chinese )
  2. 縮排直線提示 (模組名稱: indenticator )
  3. 括號逐層換色 (模組名稱: Bracket Pair Colorizer )
  4. 影像預覽功能 (模組名稱: Image preview )
  5. 讓色彩碼顯示對應顏色 (模組名稱: Color Highlight )
  6. Ctrl+D 複製目前整行 (模組名稱: Duplicate selection or line )
  7. 同時修改頭尾標籤名稱 (模組名稱: Auto Rename Tag )
  8. 連結link或載入src時自動提示路徑及檔名的選擇 (模組名稱: Path Intellisense )
  9. 檔案同步預覽功能 (模組名稱: Live Server )

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

  1. 輸入class名稱時根據link引用的外部文件展示下拉式選單 (模組名稱: IntelliSense for CSS class )
  2. 格式化javascript、JSON、CSS、Sass和HTML (模組名稱: Beautify )
  3. 多個顏色區塊標示縮排位置 (模組名稱: indent-rainbow )
  4. 按右鍵選擇 color manager 選擇色彩 (模組名稱: Color Manager )
  5. 支援即時編譯 SASS/SCSS 成 CSS (模組名稱: Live Sass Compiler ) REF1 REF2
  6. PHP程式碼提示功能 (模組名稱: PHP Intelephense )
  7. PHP程式碼提示功能 (模組名稱: PHP IntelliSense )
  8. PHP程式檢查除錯協助功能 (模組名稱: PHP Debug )

~~~~~~也可以Google搜尋,看看網路使用者的推薦,覺得有用再安裝~~~~~~~~~

 

 

三、認識 VSCode 環境

(一) 認識視窗左側按鈕


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

 

 

四、VSCode 環境設定

(一) 變更色彩佈景主題

(二) VScode中有效協助的「設定」

 

 

五、網頁檔案的基本操作

  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 程式碼自動換行的切換
  Ctrl+\ (英文) command+\ 切割視窗
      看看上方「檢視」功能表,常用的就記下來

VSCode 官網快速鍵一覽表 for Windows

VSCode 官網快速鍵一覽表 for macOS

為了讓輸入 HTML & CSS 更快速、更便利,可以參考 Emmet 官網輸入語法一覽表

 

 

七、修改 HTML 預設 Code

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

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

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

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

開啟了 settings.json 這個檔案後,參考下圖,輸入方框中的這一行
方框中的這一行是指定擴充檔案要存放的位置。

其中「Users」指的是「使用者」,「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"
      }
    }
  }

【Win Step-4】重新啟動 VSCode 即可。

 

 

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

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

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

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

開啟了 settings.json 這個檔案後,參考下圖,輸入方框中的這一行
方框中的這一行是指定擴充檔案要存放的位置。

其中「TSuilingChang」表示開機使用者名稱的資料夾。
建議先到檔案總管 Finder 找找這個路徑,確認這個路徑。

或許,如果,在檔案總管 Finder 中,要找的資料夾是隱藏檔,
那麼可以選擇 Launchpad > 終端機 > 輸入以下指令開啟顯示隱藏的資料夾
defaults write com.apple.finder AppleShowAllFiles TRUE;\killall Finder
如果想將資料夾再次隱藏起來, 可以輸入以下指令
defaults write com.apple.finder AppleShowAllFiles FALSE;\killall Finder

如果指定的路徑沒有找到, 也可以自行新增這個資料夾。

而其他行是因為其他設定中的改變而自動產生的,原則上可以不用管。

【Mac Step-3】檔案總管Finder > 指定路徑 > 新增 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 Step-4】重新啟動 VSCode 即可。

 

 

(三) Win版 & Mac版 皆適用的「使用者程式碼片段」

除了上述修改emmet的設定之外,還有一個方法「使用者程式碼片段」

【Step-1】點選「管理」> 「使用者程式碼片段」

【Step-2】選擇「新增全域程式碼片段檔案...」

【Step-3】輸入你想要的檔案名稱,例如:「TS」

【Step-4】在開啟的檔案中輸入以下的程式碼 (可以拷貝圖片下方的程式碼)

可以拷貝以下灰色區域內的程式碼,再貼到你的檔案中。

//簡碼tshtml5
"tshtml5": {
  "prefix": "link:tshtml5",
  "body": [
    "<!DOCTYPE html>",
    "<html lang=\"zh-Hant-TW\">",
    "<head>",
      "<meta charset=\"UTF-8\">",
      "<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\">",
      "<title>Document</title>",
    "</head>",
    "<body>",
    " ",
    "</body>",
    "</html>"
  ]
}

儲存檔案後,就可以在其他檔案運用了

開新檔案 > 儲存檔案 > xxxx.html

輸入「tshtml5」下拉式選單中會看到「link:tshtml5」,按「Enter」即可完成顯示。