Featured image of post 新手第一步:安裝 VS Code 打造你的網頁開發環境

新手第一步:安裝 VS Code 打造你的網頁開發環境

工欲善其事,必先利其器。手把手教你安裝最強大的程式碼編輯器 Visual Studio Code。

在開始寫 HTML 之前,你需要一個好用的「筆記本」來寫程式。目前全球開發者最推薦的工具就是 Visual Studio Code (簡稱 VS Code)。它免費、快速,而且功能非常強大。


1. 下載 VS Code

首先,請前往 VS Code 的官方網站下載安裝檔。

進入官網後,點擊大大的 “Download” 按鈕(系統會自動偵測你是 Windows 還是 Mac)。


2. 安裝步驟 (Windows / Mac)

Windows 使用者:

  1. 執行下載的 .exe 檔。
  2. 點選「我同意合約」。
  3. 重要: 在「選取額外工作」畫面時,建議勾選 「將 [以此 Code 開啟] 動作新增到 Windows 檔案總管內容功能表」。這樣你之後對著資料夾點右鍵就能直接開啟,非常方便。
  4. 點擊「安裝」直到完成。

Mac 使用者:

  1. 下載完成後會得到一個 .zip 檔。
  2. 解壓縮後,將 Visual Studio Code 圖示拖曳到你的 「應用程式 (Applications)」 資料夾即可。

3. 環境中文化 (繁體中文)

VS Code 預設是英文介面,新手可以先安裝中文插件來降低學習門檻。

  1. 打開 VS Code。
  2. 點擊左側圖示列最下方的 「擴充功能 (Extensions)」 圖示(長得像積木)。
  3. 在搜尋框輸入:Chinese
  4. 找到 “Chinese (Traditional) Language Pack for Visual Studio Code” 並點擊 Install
  5. 安裝完成後,右下角會出現重啟通知,點擊 “Restart” 即可切換為中文。

4. 建立你的第一個網頁檔案

安裝好後,我們來動手試試看:

  1. 在桌面建立一個新的資料夾,取名為 my-web
  2. 回到 VS Code,點擊 「檔案」>「開啟資料夾」,選擇剛才建立的 my-web
  3. 點擊左側「檔案總管」旁的新增檔案圖示,輸入檔名:index.html
  4. 在右側空白處輸入 ! 然後按下 Tab 鍵,VS Code 會自動幫你產生標準的 HTML 骨架!

5. 推薦新手的必裝套件

除了中文化之外,這兩個套件能讓你寫網頁的效率提升 200%:

  • Live Server:讓你改完程式碼存檔後,瀏覽器會自動重新整理,即時看到結果。
  • Auto Close Tag:輸入開頭標籤後,自動幫你補上結尾標籤。

結語

恭喜你!你已經準備好開發環境了。現在你的電腦已經不是一台只能追劇的機器,而是能創造出無限可能網頁的工具。

下一步建議: 既然環境裝好了,快去學習 HTML 基礎標籤,試著在 index.html 寫下你的第一行標題吧!

使用 Hugo 建立
主題 StackJimmy 設計