使用Visual Studio Code開啟瀏覽器查看HTML檔案

標籤：任務   預覽   soft   runner   命令   解決   orm   alt   log   

使用Visual Studio Code開啟瀏覽器查看HTML檔案

vscode出來之前一直使用sublime，後者在編寫HTML檔案時可以通過點擊滑鼠右鍵，找到open in browser來啟動系統預設瀏覽器，而vscode卻沒有這個功能，調試和預覽起來比較麻煩。不過可以通過配置tasks.json檔案來解決這個問題。

按Ctrl+P開啟命令選擇區，輸入tasks.json然後斷行符號開啟這個檔案，可以看到預設配置，然後修改如下：

{    // See http://go.microsoft.com/fwlink/?LinkId=733558    // for the documentation about the tasks.json format    "version": "0.1.0",    "command": "Chrome",    //使用chrome瀏覽器    "windows": {        "command": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe" //chrome瀏覽器的路徑    },    "isShellCommand": true,    "args": ["${file}"],    //表示對當前檔案進行操作    "showOutput": "always"}

儲存後開啟一個html檔案，按按鍵組合Ctrl+Shift+B就可以使用指定的瀏覽器開啟html檔案了。

 

針對Version 1.8.0的更新

　　 最近升級到1.8.0，發現上面的操作失效了，於是改了一下(僅對Win)：

• 首先介面按下Ctrl+Shift+P顯示命令選擇區，輸入ctr
  
  選擇【任務：配置任務運行程式】
  
  
• 然後選擇【Others】，可以看到預設配置
  

最後修改如下(刪除其中一行)：

{    "version": "0.1.0",    "command": "Chrome",    "windows": {        "command": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"    },
    "isShellCommand": true,    "args": ["${file}"],    "showOutput": "never"}

儲存後開啟html檔案，按下Ctrl+Shift+B就能開啟瀏覽器了。

另外更正一下下面評論裡的說法，直接建立.vscode檔案夾是不行的，Windows會認為檔案名稱不合法，這個檔案夾只能通過VSCode建立，也就是上面提到的步驟。

除此之外，還可以在上面的基礎上用按鍵組合Ctrl+Shift+V來預覽該html檔案，這種方法不用開啟瀏覽器，但對沒有設定檔的單個檔案無效。

使用Visual Studio Code開啟瀏覽器查看HTML檔案