【 Tools 】於 VS Code 中設定 JSX Emmet

內容

• 學習目標
• 前置準備作業
• 設定 Emmet

學習目標

• 於 JSX 中啟用 Emmet 功能

前置準備作業

• Visual Studio Code
  • 下載網址 https://code.visualstudio.com/

設定 Emmet

Step 1. 開啟 VS Code

Step 2. 開啟 settings.json

• Windows 作業系統

  • 點選左上角的 File > Preferences > Settings

    

• macOS 作業系統

  • 點選左上角的 Code > Preferences > Settings

    

• 開啟後畫面

  

Step 3. 切換成以 JSON 方式呈現

• 點選右上角左邊第一個 icon

  

Step 4. 輸入設定值以啟用 Emmet

• 如 settings.json 完全為空時，請輸入以下設定值並存檔

  

• 如 settings.json 已有其他設定值的話，請輸入以下設定值到 } 前方並存檔

GitHub

• ArcherHuang @ GitHub

List of blogs

• https://oranwind.org/author/archer/
• https://learningsky.io/author/archer/