最近網友詢問我關於用 VS code 做 ESP32 開發問題, 我是建議若寫 MicroPython 可用 Thonny, 我平常都用這個小巧的編輯器寫 Python/MicroPython. 若在 ESP32 要寫 C 程式那當然用 Arcuino IDE.
今天上 Hahow 六角學院的 Bootstrap 課程時老師使用 Visual Studio Code 寫網頁, 我發現 VS code 還蠻好用的 (例如按快捷鍵將凌亂的網頁整理好), 所以就下載安裝來玩看看, 下載網址如下 :
安裝檔大小約 92 MB, 對大檔案有恐懼症的我還可接受, 安裝過程只有一個地方可能需要改預設設定 (主要是取消將 VSC 設為所支援檔案類型之預設編輯器, 因我不喜歡它一桶江湖) :
為了避免 VS Code 變成很多檔案的預設編輯器, 將預設勾選改成如下 :
從課程中發現 VS Code 有許多編輯上的便利, 例如將 HTML 碼弄整齊, 同時編輯好幾列程式碼等, 確實是個好工具.
學習 Bootsrap 可安裝下面兩個 VScode 擴充套件 :
- Preview on Web Server :
可直接在 VS code 直接瀏覽網頁, 不須另外開啟瀏覽器, 只要存檔立即更新顯示網頁, 且可與 HTML 編碼左右對照. - Sublime Text Keymap :
鍵盤映射文件 (還不清楚實際用途).
按左邊上面第五個按鈕 (Extensions), 分別輸入上面兩個擴充套件名稱, 按 Install 安裝 :
其中 Preview on Web Server 提供兩個常用快捷鍵, 可以用來瀏覽網頁 :
- Ctrl+Shift+ P : 在 VS code 右邊開啟邊框來顯示網頁
- Ctrl+Shift+ L : 開啟預設瀏覽器來顯示網頁
這樣就可以開始用 VS code 來編寫網頁了. 按右上角第一個按鈕 (Explorer), 再按 Open a folder 按鈕開啟一個工作目錄 (在 VS code 一個目錄就是一個專案) :
這時會彈出一個視窗詢問是否信任此 folder 下檔案之作者, 按 Yes :
這樣便建立了一個在 demo 資料夾下的專案, 按右上方圈起來的按鈕新增網頁 index.htm :
然後在編輯區輸入驚嘆號 ! 再按 Enter 就會自動載入預設網頁模板 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
沒有留言:
張貼留言