怎樣設定vscode預設的瀏覽器（vscode如何設定預設瀏覽器）
我們在使用VScode開發專案的時候，需要經常在編輯器和瀏覽器之間來回切換來檢視頁面預覽效果，開發效率不是那麼的高！今天就來分享下如何在VScode中實時預覽html介面或vue頁面。
VScode預覽vue頁面
VScode預覽HTML頁面
不得不感嘆vscode外掛功能真是強大！
vscode預覽html
1、HTML Preview
一個很不錯的vscode預覽html頁面外掛
在VSCode擴充套件搜尋“HTML Preview”，點選安裝，通過如下快捷鍵預覽頁面。
- 開啟瀏覽器預覽 - ctrl shift v or cmd shift v
- 編輯器側邊預覽 - ctrl k v or cmd k v
2、Live Server
一個超讚的微型http伺服器（相當於使用nodejs的http-server ）
在VSCode擴充套件搜尋“Live Server”，點選安裝
開啟命令面板（ F1 或 Ctrl Shift P 或 Shift ⌘ P），輸入“ Live Server: Open With Live Server ”開啟服務，“ Live Server: Stop Live Server ” 關閉服務。
3、Preview on Web Server
在VSCode擴充套件中搜尋“Preview on Web Server”，點選安裝
- 編輯器側邊預覽 - ctrl shift v
- 外部瀏覽器預覽 - ctrl shift l
- 重啟web服務 - ctrl shift r
- 關閉web服務 - ctrl shift s
- 展示UI操作面板 - ctrl shift u
如下圖：還支援滑鼠右鍵快捷開啟
vscode預覽vue|react|angular
Browser Preview | 讓你能夠在VSCode中開啟一個真實的瀏覽器進行預覽並除錯。
- 在VSCode擴充套件中搜尋“Browser Preview”，點選安裝
安裝好 Browser Preview 外掛後，左側邊欄會看到一個新增的圖示。點選這個圖示，就能在 VS Code 裡開啟一個瀏覽器，輸入網址即可除錯vue/react/angular等頁面。
使用建議
按需安裝Visual Studio Code外掛，建議控制安裝數量在三十個外掛以內，否則會影響Visual Studio Code使用效能。
❤️ 最後
如果覺得這篇內容對你有幫助，點個「關注/轉發」，讓更多人也能看到你的分享！