WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

VScode 網頁編輯器

下載 VSCode

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

安裝 VSCode

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

安裝擴充功能

安裝擴充功能的操作方法

安裝 Chinese 時，右下角會出現重要訊息

以下是TSuiling講師建議安裝的擴充模組 (基礎課程建議安裝前 7 項)
  1. 模組名稱關鍵字：chinese --------------------- 中文 (繁體) 介面
  2. 模組名稱：Live Server ----------------------- (Ritwick Dey) 檔案同步到瀏覽器預覽結果 ⭐⭐⭐⭐⭐
  3. 模組名稱：Auto Rename Tag ---------------- (Jun Han) 同時修改頭尾標籤名稱 ⭐⭐⭐⭐⭐

~~~~~~~~~ 以下有幫助，建議安裝 ~~~~~~~~~~~~~~~~~~~~~

  1. 模組名稱：Duplicate selection or line -------- (Greg Bacchus) Ctrl+D 不選取時複製目前游標所在的整行
  2. 模組名稱：htmltagwrap ---------------------- (Brad Gashler) 先選取範圍按 Alt+W，在選取範圍外增加標籤
  3. 模組名稱：Image preview -------------------- (Kiss Tamás) 在原始碼編號的左側影像預覽功能
  4. 模組名稱：Dracula Theme Official -------------------- TSuiling 使用的原始碼色彩的佈景主題

~~~~~~~~~ 以下有幫助，RWD 課程建議安裝 ~~~~~~~~~~~~~~~~~~~~~

  1. 模組名稱：indent-rainbow ---------------------- (oderwat) 多種顏色區塊標示縮排位置
  2. 模組名稱：Color Highlight ---------------------- (Sergii N) 讓色彩碼顯示出對應的顏色 (內建已有, 但 TSuiling 通常還是會安裝)
  3. 模組名稱：IntelliSense for CSS class ------------ (Zignd) 輸入 class 名稱時根據 link 引用的外部文件展示下拉式選單來選擇

~~~~~~~~~ PHP 課程，建議安裝 ~~~~~~~~~~~~~~~~~~~~~

  1. 模組名稱：PHP Intelephense ---------------- PHP 程式碼提示功能
  2. 模組名稱：PHP Debug ---------------------- (Xdebug) PHP 程式檢查除錯協助功能
  3. 模組名稱：PHP File Link --------------------- PHP 程式中 include 的檔案 Ctrl+按一下 可以連結開啟檔案

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

  1. 模組名稱：Copy filename ------------------------ (Brad Zacher) 檔案總管或頁籤上的檔案名稱按右鍵 Copy Filename
  2. 模組名稱：Bootstrap 5 Quick Snippets ---------- (Anbuselvan Rocky) 提供 Bootstrap 5 智慧型片段選擇工具
  3. 模組名稱：Tailwind CSS IntelliSense ------------- (Tailwind Labs) 提供 Tailwind CSS 智慧型功能選擇工具
  4. 模組名稱：ESLint --------------------------------- (Microsoft) 編寫 JavaScript 時即時發現語法錯誤或不規範的寫法
  5. 模組名稱：JavaScript (ES6) code snippets ------- (charalampos karypidis) 提供 JavaScript ES6 語法的程式碼片段
  6. 模組名稱：Vue (Official) -------------------- (Vue) 提供 Vue 3 SFC 語法高亮、智慧感知 IntelliSense 等，取代舊版的 Vetur

  7. 模組名稱：Live Sass Compiler -------------- 支援即時編譯 SASS/SCSS 成 CSS [REF1, REF2, REF3, REF4]

  8. 模組名稱：Chinese Lorem ------------------ 繁體中文假文內容
    使用方式：輸入 ctlorem200，輸入的數字為顯示字數，不輸入預設為128
    如果輸入 lorem*3 則顯示英文的假文內容，輸入*3會顯示原文3段文容，預設顯示1段

  9. 模組名稱：Lorem Picsum ----------------- 協助產生假圖 [REF]
    使用方式：輸入 pic 之後，有下拉式選單可以選擇出現各類型假圖
    選擇後的語法中，最後的 600/400 指的是 寬度/高度，可以自行修改
    如果希望出現多張隨機假圖，可輸入如下，以此類推
    <img src="https://picsum.photos/200/300?random=1">
    <img src="https://picsum.photos/200/300?random=2">
    <img src="https://picsum.photos/200/300?random=3">

~~~~~~也可以Google搜尋，看看網路使用者的推薦，覺得有用再安裝，如果沒用則停用或移除~~~~~~~~~

認識 VSCode 環境

視窗左側按鈕

看看上方的文字功能表

網頁檔案的基本操作

  1. 【檔案 > 開啟資料夾】選擇網站所在的資料夾。 必須開啟網站資料夾，所有相關功能才能使用！⭐⭐⭐⭐⭐
  2. 【檔案 > 新增文字檔】接著 【檔案 > 儲存檔案】儲存檔案， 檔案名稱 test001.html 必須要有對的副檔名。
    新增檔案更方便的方法：【檔案總管】面板中上方的【新增檔案...】按鈕，再輸入檔案名稱。
  3. 輸入【html】選擇【html:5】按【Enter】鍵，即可產生出網頁基本需要的HTML原始碼(如下)。
    或者是輸入【 ! 】出現下拉式選單，選擇一個【 ! 】，再按【Enter】鍵，就可以產生如下圖所示。



  4. 按【 Ctrl + + 】畫面檢視放大
    按【 Ctrl + - 】畫面檢視縮小

加強環境的設定

選擇左下角【管理】>【設定】可以進行這個編輯器環境配合操作的方法。

⭐⭐⭐⭐⭐ 使用者 > 經常使用的 > Files: Auto Save，選擇 afterDelay 預設 1000ms，表示每次輸入或修改 1 秒後即自動存檔。
    也可以勾選【 檔案 > 自動儲存】

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

變更色彩佈景主題

【方法】
  • 左下角【管理】選擇【主題】選擇【 色彩佈景主題】，可以選擇切換程式碼色彩表現的佈景主題。
  • 接著選擇【✕ 瀏覽其他色彩佈景主題…】，可以安裝色彩佈景主題。
  • 利用鍵盤「↓」「↑」移動可以預覽結果 ( 建議先開啟一個HTML檔案來觀察 )。
【建議】
  • 可以自行瀏覽找到喜歡的、舒服的色彩佈景主題。
  • 但是，建議初學者固定一個色彩佈景主題，不要一天一個心情一個顏色喔。
  • 因為，色彩佈景主題可以協助你第一時間辨別錯誤喔。

常用快速鍵的推薦

選擇左下角【管理】> 【鍵盤快速鍵】可以查看、修改鍵盤快速鍵
分類 Win Key Mac Key 摘要說明
檔案 Ctrl+N ⌘ N 新增檔案
  Ctrl+S ⌘ S 儲存檔案
      看看上方「檔案」功能表，常用的就記下來
編輯 Ctrl+F ⌘ F 目前文件尋找文字
  Ctrl+H ⌥option ⌘F 目前文件取代文字
  Ctrl+/ ⌘ / 加上或取消註解
      看看上方「編輯」功能表，常用的就記下來
選取項目 Ctrl+Enter ⌘ Enter 目前位置往下新增一行
  Shift+Alt+↑ ⇧ ⌥option ↑ 向上複製一整行
  Shift+Alt+↓ ⇧ ⌥option ↓ 向下複製一整行
  Ctrl+D ⌘ D 向下複製一整行 (安裝擴充功能Duplicate ...才有)
  Ctrl+Shift+K ⇧ ⌘ K 刪除游標所在的一整行
  Alt+↑ ⌥option ↑ 整行往上移動
  Alt+↓ ⌥option ↓ 整行往下移動
  Ctrl+Shift+L ⇧ ⌘ L 選取文字再按快速鍵會選取所有相同文字
  Shift+Alt ⇧ ⌥option 先點一下選取區左上角，
按住【Shift+Alt】再拖曳，
可以區塊式選取
      看看「選取項目」功能表，常用的就記下來
檢視 Ctrl+Shift+P ⇧ ⌘ P 開啟命令選擇區
  Ctrl+[+] ⌘ [+] 畫面檢視放大
  Ctrl+[-] ⌘ [-] 畫面檢視縮小
  Alt+Z ⌥option Z 程式碼自動換行的切換
  Ctrl+\ (英文) ⌘ \ 切割視窗
      看看上方「檢視」功能表，常用的就記下來
  Ctrl+K =>
Ctrl+0 (數字)		 ⌘ K => ⌘ 0 收合全部階層區域 (不能按右側數字鍵區的0)
  Ctrl+K =>
Ctrl+J		 ⌘ K => ⌘ J 展開全部階層區域

VSCode 官網快速鍵一覽表 for Windows

VSCode 官網快速鍵一覽表 for macOS

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

自定程式碼片段

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

【Step-3】輸入你想要的檔案名稱，例如：「TS」或「123」

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

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

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

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

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

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