---
# System prepended metadata

title: 開發環境建置
tags: [開發環境, 網頁, Live Server, VS Code]

---

{%hackmd @dzif24x25/IBXIWNXgTju0h2AKtSaLkA %}

###### tags: `網頁` `開發環境` `VS Code` `Live Server`

# 開發環境建置

## VS Code 安裝
前往[VS Code官網](https://code.visualstudio.com/)，選擇"Download for Windows"，即可下載安裝檔
![](https://i.imgur.com/iEOqA9X.png)

執行安裝檔（同意之後，一直下一步就對了）
![](https://i.imgur.com/F6Sz97Q.png)

安裝完成VS Code之後，開啟VS Code
![](https://i.imgur.com/qWCCOZw.png)

選擇左邊的Extensions
![](https://i.imgur.com/NxTyn3Z.png)

如果偏好中文，可以安裝中文的Extension
![](https://i.imgur.com/UNMOOov.png)

Live Server 可以即時查看所撰寫的網頁

![](https://i.imgur.com/uRKtuvO.png)

如此一來，你就成功建置完成開發環境了！

:::info
點此前往簡報 https://hackmd.io/@dzif24x25/ByH7eUXWn
:::