# 1.2 開發環境的準備 介紹 VS Code 與 Emmet

## [VS Code](https://code.visualstudio.com/)
> 活潑且功能強大的文字編輯器。微軟最大的開源專案，目前最多人使用。
> 內建了Git 版本控制功能。
Git 預設編輯器是Vi，可更改Git 設定讓預設編輯器為 VS Code，更方便Git 的使用。

## Extensions 擴充功能

VS Code 擁有非常多的套件可自行搭配選擇，Google 也可找到相當多的使用或推薦分享，多嘗試發現適合自己的套件，用起來更順手。

>Extensions 擴充功能俗稱套件，快速鍵：shift+command+X (MAC版)。

---

- [Emmet](https://docs.emmet.io/)
快速撰寫輔助工具，能加快並縮短開發者在編寫HTML及CSS的時間
Emmet官網 > Abbreviations > Syntax (HTML)
Emmet官網 > Cheat Sheet (HTML/CSS)
輸入元素的快捷縮寫後，按tab鍵，即可產生相對應的語法

- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
搜尋指令 快速鍵：command+shift+p (MAC版)
搜尋檔案 快速鍵：command+p (MAC版)
*Live server 跑不出來，只能安分用cmd+r (F5)。*

:::warning
VS 與VS Code 是不一樣的，有加code是文字編輯器，Vs IDE 付費軟體，功能很強大。
:::

###### tags: `前端幼幼班`

*[VS Code]:Visual Studio Code