VSCode 教學與你值得擁有的擴充功能

哈囉大家好，我是毛哥EM，歡迎來到網棧。今天我要讓你學會使用VS Code 建造網案與你值得擁有的擴充功能。

在我們開始之前讓我先簡單介紹什麼是 VSCode。VSCode 是一個整合式開發環境 Integrated Development Environment（簡稱 IDE）。因為寫程式需要同時用到很多工具，包括寫程式的文字編輯器，終端機，瀏覽器等。這時如果你有一個軟體可以做到所有的功能，還可以在需要其他功能時直接下載擴充，是不是十分的方便！

安裝軟體

首先請你到 Visual Studio Code 官網下載並安裝 Visual Studio Code。打開安裝檔並一直下一步即可。如果顯示的版本不正確的話請你點擊箭頭選擇正確的作業系統版本。

建立網站

進到 VSCode 中會顯示歡迎畫面，你可以選擇你喜歡的主題顏色佈置。我們直接來試著架設一個網頁，首先請你先開啟一個資料夾，如果沒有的話你可以建立一個。比如說我建立了一個叫做資料夾的資料夾。在 VSCode 中我建議你開啟資料夾而不是單一檔案，除了切換檔案比較方便以外，有一些功能也需要開啟資料夾才能使用。

我們在資料夾建立一個檔案，命名叫做index.html。VSCode 完全支援 Emmet 語法，我們輸入!並按下 tab 就會建立一個基本的 HTML 架構。沒錯，這才是完整的 HTML，我們之前打在 Codepen 的 HTML 應該要打在<body>裡面。第一排的<!DOCTYPE html> 是在告訴瀏覽器使用最新的 HTML5，<head>是放使用者看不到的網頁資訊，而<body>就是頁面內容。讓我來嘗試打開這個 HTML 檔案。點擊文件並且按下alt+shift+r或是點擊右鍵選擇在檔案總管開啟。雙擊使用瀏覽器打開。

你可以把視窗往螢幕的右側頂就會填滿右半部，左半部選擇 VSCode 即可完成左右畫面切割。對於製作網頁即時預覽非常方便。

擴充功能

Live Server - 即時預覽

不過你可以發現每次編輯完存檔後右邊的瀏覽器都需要重新整理，非常麻煩，而且如果你使用久了，你會發現很多網站功能會失效。因此我建議你安裝一個擴充功能叫做 Live Server。切換到擴充功能分頁並且安裝後，點擊右下角的 Go Live 就會自動架設本地的網頁伺服器，並顯示你的網頁。只要編輯完按control+S存檔就會即時同步更新。

Indent Rainbow - 縮排彩虹

我建議你安裝一個擴充功能叫做 Indent Rainbow - 縮排彩虹。他會幫你用不同的顏色標記每個縮排，在閱讀複雜文件時非常有用。

VS Code Pets - 養隻寵物吧

一個人寫程式非常孤獨，但是你可以在 VSCode 裡養寵物。下載 VSCode Pets 擴充功能你就可以在 VSCode 視窗裡面養寵物，且我有把它翻譯成中文（對了，如果你看不慣英文介面 VSCode 也有繁體中文擴充功能可以安裝），你可以在設定裡改變寵物大小，場地背景以及開啟丟球模式。點擊 + 可以生成更多寵物，讓他們陪伴你度過痛苦的寫程式時光。

Night Owl - 看起來舒服的主題

一直看著同一個畫面長時間會感到膩和煩躁。一個好看的主題可以讓你的眼睛更舒服。我十分喜歡 Night Owl 這個主題，對於不同資料型態的顏色和字體區分讓我開發起來很有效率，且長時間注視不會不舒服。

Copilot / Tabnine - 讓 AI 助你一臂之力

我還建議你安裝 GitHub Copilot。他會在你寫程式的時候預測你之後要打的內容，可以大幅加速你開發的效率。不過 Copilot 對於非學生是需要付費的，如果你有的話可以登入你的 GitHub 帳號驗證。如果沒有的話，使用 Tabnine 也有不錯的效果。你在寫程式的時候，他自己就會幫你猜下一行。你也可以透過註解要求他生成指定的內容比如說這裡我要求他生成一個質感設計的按鈕。