菜鳥工程師肉豬: 在Visual Studio Code建立第一個HTML文件

2019/7/10

本篇介紹如何在Visual Studio Code（簡稱VS Code）建立一個HTML文件。

你可能看過如何用普通的文字編輯器，例如Windows內建的記事本，或Notepad++等來建立你的第一個HTML文件，但現今大部分的前端工程師都選擇以VS Code編輯器來開發，因為這套編輯器提供了很多好用的功能，所以試著學習如何使用吧。

安裝好後開啟VS Code，在最上方的功能選單點選File -> New File新增一份編輯文件。

在VS Code右側編輯區輸入下面HTML內容。

<!DOCTYPE html>
<html>
<head>
</head>
<body>

  <h1>您好，歡迎光臨</h1>

</body>
</html>

然後按Ctrl + S存檔。
選擇存放的位置；[存檔類型]選擇HTML；[檔案名稱]可任意命名，只要副檔名是.html即可。
本範例是命名為welcome.html並存在桌面。

存檔後可以看到原本沒有程式碼高光效果(code syntax highlight)的HTML碼瞬間變成有顏色標示了，因為把檔案存成.html檔後，VS Code就知道你正在編輯的是HTML格式的文件。

然後在編輯區上按Alt + B直接將編輯的HTML文件開啟於瀏覽器（需安裝open in browser套件）。

恭喜你在Visual Studio Code建立的第一份HTML文件。

菜鳥工程師肉豬