Visual Studio Codeを使用してブラウザーでHTMLファイルを表示する方法

新しいMicrosoft Visual Studio Codeを使用してブラウザでHTMLコードを表示するにはどうすればよいですか？

Notepad ++では、ブラウザーで実行するオプションがあります。Visual Studio Codeで同じことをするにはどうすればよいですか？

Windowsの場合-デフォルトのブラウザーを開きます-VS Code v 1.1.0でテスト済み

特定のファイル（名前はハードコードされています）を開くか、他のファイルを開くかの両方に答えます。

手順：

1. ctrl+ shift+ p（またはF1）を使用してコマンドパレットを開きます。

2. Tasks: Configure Task古いバージョンを入力しますConfigure Task Runner。それを選択すると、tasks.jsonファイルが開きます。表示されたスクリプトを削除し、次のように置き換えます。

   {
       "version": "0.1.0",
       "command": "explorer",    
       "windows": {
           "command": "explorer.exe"
       },
       "args": ["test.html"]
   }

   tasks.jsonファイルの「args」セクションをファイルの名前に変更することを忘れないでください。これにより、F5キーを押すと、常にその特定のファイルが開きます。

   これを設定し["${file}"]て、「args」の値として使用することで、そのときに開いていたファイルを開くこともできます。はの$外に{...}あるため["{$file}"]、正しくないことに注意してください。

3. ファイルを保存します。

4. HTMLファイル（この例では「text.html」）に切り替え、ctrl+ shift+ bを押してWebブラウザでページを表示します。

VS Codeには、ステータスバーからのワンクリック起動をサポートするLive Server Extentionがあります。

いくつかの機能：

• ステータスバーからワンクリックで起動
• ライブリロード
• Chromeデバッグアタッチメントのサポート

@InvisibleDev-これを使用してMacでこれを機能させるには：

{
    "version": "0.1.0",
    "command": "Chrome",
    "osx": {
        "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
    },
    "args": [
        "${file}"
    ]
}

既にChromeを開いている場合は、新しいタブでHTMLファイルが起動されます。

ライブでリロードしたい場合は、ファイルの変更を監視してページをリロードするgulp-webserverを使用できます。これにより、ページで毎回F5を押す必要がなくなります。

これを行う方法は次のとおりです。

• コマンドプロンプト（cmd）を開き、次のように入力します。

  npm install --save-dev gulp-webserver

• VSコードにCtrl + Shift + Pを入力し、Configure Task Runnerと入力します。それを選択し、Enterキーを押します。それはあなたのためにtasks.jsonファイルを開きます。それからすべてを削除し、次のコードを入力してください

tasks.json

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": [
        "--no-color"
    ],
    "tasks": [
        {
            "taskName": "webserver",
            "isBuildCommand": true,
            "showOutput": "always"
        }
    ]
}

• プロジェクトのルートディレクトリにgulpfile.jsを追加し、次のコードを入力します。

gulpfile.js

var gulp = require('gulp'),
    webserver = require('gulp-webserver');

gulp.task('webserver', function () {
    gulp.src('app')
        .pipe(webserver({
            livereload: true,
            open: true
        }));
});

• VS CodeでCtrl + Shift + Pを入力し、「Run Task」と入力すると、タスク「webserver」が選択され、Enterキーを押します。

Webサーバーは、デフォルトのブラウザーでページを開きます。これで、HTMLまたはCSSページに対して行う変更はすべて自動的に再ロードされます。

ここでは、インスタンスポート用に「gulp-webserver」を構成する方法、およびどのページをロードするかについての情報があります...

Ctrl + Pを入力してtask webserverと入力するだけでタスクを実行することもできます

これで、ブラウザで表示する拡張機能をインストールできます。私はそれをクロムのあるウィンドウでテストしました、そしてそれは働いています。

vscodeバージョン：1.10.2

キーボードショートカット付きのChromeの現在のドキュメントの2.0.0バージョンは次のとおりです。

tasks.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Chrome",
            "type": "process",
            "command": "chrome.exe",
            "windows": {
                "command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
            },
            "args": [
                "${file}"
            ],
            "problemMatcher": []
        }
    ]
}

keybindings.json ：

{
    "key": "ctrl+g",
    "command": "workbench.action.tasks.runTask",
    "args": "Chrome"
}

ウェブサーバーで実行する場合：

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Linuxでは、次のxdg-openコマンドを使用して、デフォルトのブラウザでファイルを開くことができます。

{
    "version": "0.1.0",
    "linux": {
        "command": "xdg-open"
    },
    "isShellCommand": true,
    "showOutput": "never",
    "args": ["${file}"]
}

ステップ1：

1. Visual Studio Codeを開き、拡張機能に移動します。

2. 「ブラウザで開く」を検索します。

   3.インストールします。

   4.htmlファイルを右クリックすると、[ブラウザで開く]オプションが表示されます。

   それで全部です................................................ ……

私はmsdnブログから使用した手順を再投稿しています。それはコミュニティを助けるかもしれません。

これは、セットアップにとして知られているローカルWebサーバのお手伝いをしますLITE-サーバーとのVS Code、そしてまた、あなたの静的ホストに導きhtml内のファイルlocalhostとdebugあなたのJavascriptコードを。

1. Node.jsをインストールします

まだインストールされていない場合は、ここから入手してください

npm（開発ライブラリを取得および管理するためのパッケージマネージャー）が付属しています

2.プロジェクト用の新しいフォルダーを作成します

ドライブのどこかに、Webアプリ用の新しいフォルダーを作成します。

3. package.jsonファイルをプロジェクトフォルダーに追加します

次に、次のテキストをコピーして貼り付けます。

{
   "name": "Demo",
   "version": "1.0.0",
   "description": "demo project.",
   "scripts": {
     "lite": "lite-server --port 10001",
     "start": "npm run lite"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "lite-server": "^1.3.1"
   }
}

4. Webサーバーをインストールする

プロジェクトフォルダーで開いているターミナルウィンドウ（Windowsではコマンドプロンプト）で、次のコマンドを実行します。

npm install

これにより、デフォルトのブラウザーにindex.htmlを読み込み、アプリケーションファイルが変更されると自動的に更新する静的サーバーであるlite-server（package.jsonで定義）がインストールされます。

5.ローカルWebサーバーを起動します。

（プロジェクトフォルダにindex.htmlファイルがあると仮定します）。

同じターミナルウィンドウ（Windowsのコマンドプロンプト）で、次のコマンドを実行します。

npm start

少し待ってください。index.htmlがロードされ、ローカルWebサーバーが提供するデフォルトのブラウザーに表示されます。

lite-serverはファイルを監視しており、html、js、cssファイルに変更を加えるとすぐにページを更新します。

また、自動保存するようにVS Codeを構成している場合（メニューファイル/自動保存）、入力するとブラウザーに変更が表示されます。

ノート：

• その日のアプリでのコーディングが完了するまで、コマンドラインプロンプトを閉じないでください
• http：// localhost：10001で開きますが、package.jsonファイルを編集してポートを変更できます。

それでおしまい。コーディングセッションの前に、npm startと入力してください。これで準備完了です。

もともとはブログでここに投稿されましたmsdn。クレジットは著者に送られます：@Laurent Duveau

Macだけを使用している場合、このtasks.jsonファイルは次のとおりです。

{
    "version": "0.1.0",
    "command": "open",
    "args": ["${file}"],
}

...現在のファイルをSafariで開くために必要なのは、その拡張子が「.html」であると仮定した場合のみです

作成しtasks.json、その上およびたinvoke説明したように⌘+ shift+ b。

Chromeで開く場合：

{
    "version": "0.1.0",
    "command": "open",
    "args": ["-a", "Chrome.app", "${file}"],
}

これにより、アプリが既に開いている場合に新しいタブで開く場合と同様に、必要な操作を実行できます。

ワンクリックソリューションは、Visual Studioマーケットプレイスからブラウザーで開く拡張機能をインストールするだけです。

2020年4月18日に回答を更新

この左下の管理アイコンをクリックします。拡張機能またはショートカットをクリックしますCtrl+Shift+X

次に、このキーセンテンスで拡張機能で検索します。デフォルトのブラウザで開く。この拡張機能が見つかります。それは私に良いです。

今すぐ右クリックしhtml、ファイル、あなたが表示されます既定のブラウザで開くか、ショートカットCtrl+1を参照してhtml、ブラウザでファイルを。

Macの場合-Chromeで開きます-VS Code v 1.9.0でテスト済み

1. Command+ shift+ pを使用してコマンドパレットを開きます。

2. [タスクランナーの構成]と入力します。これを初めて行うときに、[その他]を選択した場合、VS Codeはスクロールダウンメニューを表示します。以前にこれを実行したことがある場合は、VS Codeが直接tasks.jsonに送信します。

3. 一度tasks.jsonファイルに追加します。表示されたスクリプトを削除し、次のように置き換えます。

{
    "version": "0.1.0",
    "command": "Chrome",
    "osx": {
        "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
    },
    "args": ["${file}"]
}

4. htmlファイルに戻り、Command+ Shift+ bを押してChromeでページを表示します。

CTRL+SHIFT+Pコマンドパレットが表示されます。
もちろん、何を実行しているかによって異なります。入力できるASP.netアプリの例：
>kestrel次に、Webブラウザーを開いて入力します。localhost:(your port here)ます。

入力する>と、showコマンドとrunコマンドが表示されます

または、HTMLの場合F5、コマンドパレットを開いた後にデバッガを開く必要があると思います。

ソース：リンク

Operaブラウザーでファイルを開く（Windows 64ビット）。この行を追加してください：

{
"version": "0.1.0",
"command": "opera",
"windows": {
    "command": "///Program Files (x86)/Opera/launcher.exe"
},
"args": ["${file}"] }

"command"：行のパス形式に注意してください。「C：\ path_to_exe \ runme.exe」形式は使用しないでください。

このタスクを実行するには、表示するhtmlファイルを開き、F1 を押してtask operaと入力し、Enter キーを押します

私のランナースクリプトは次のようになります。

{
    "version": "0.1.0",

    "command": "explorer",

    "windows": {
        "command": "explorer.exe"
    },

    "args": ["{$file}"]
}

index.htmlファイルでctrl shift bを押すと、エクスプローラーが開きます

これは、Windowsの複数のブラウザで実行する方法です

{
 "version": "0.1.0",
 "command": "cmd",
 "args": ["/C"],
 "isShellCommand": true,
 "showOutput": "always",
 "suppressTaskName": true,
 "tasks": [
     {   
         "taskName": "Chrome",
         "args": ["start chrome -incognito \"${file}\""]
     },
     {   
         "taskName": "Firefox",
         "args": ["start firefox -private-window \"${file}\""]
     },
     {   
         "taskName": "Edge",
         "args": ["${file}"]
     }   
    ]
}

EdgeのデフォルトのブラウザーはEdgeにファイルの名前を与えただけなので、edgeの引数には何も入力しなかったことに注意してください。

編集：また、-incognitoも-private-windowも必要ありません...それは私だけのプライベートウィンドウで表示するのが好きです

最近、www.lynda.comのビジュアルスタジオコードチュートリアルの1 つでこの機能に遭遇しました

Ctrl + Kに続いてMを押すと、「言語モードの選択」が開きます（または、そのスマイリーの前にHTMLと表示されている右下隅をクリックします）。markdownと入力してEnterキーを押します。

Ctrl + Kを押してからVを押すと、近くのタブにHTMLが開きます。

タダァア!!!

今、htmlファイルのこのモードではemmetコマンドが機能していなかったので、元の状態に戻しました（注-htmlタグテリセンスは完全に機能していました）

元の状態に戻るには-Ctrl + Kに続いてMを押し、[自動検出]を選択します。emmetコマンドが機能し始めました。HTMLのみのビューアに満足している場合は、元の状態に戻す必要はありません。

マークダウンモードでhtmlファイルを表示できるときに、vscodeにデフォルトでhtmlビューアオプションがないのはなぜですか。

とにかくかっこいいです。幸せなvscoding :)

Mac OSxのバージョン2.0.0は次のとおりです。

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "echo",
      "type": "shell",
      "command": "echo Hello"
    },
    {
      "label":"chrome",
      "type":"process",
      "command":"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
      "args": [
        "${file}"
      ]
    }
  ]
}

Ctrl + F1はデフォルトのブラウザを開きます。または、Ctrl + Shift + Pを押してコマンドウィンドウを開き、[ブラウザで表示]を選択します。HTMLコードはファイルに保存する必要があります（エディターに保存されていないコード-拡張子なしでは機能しません）

おそらくほとんどが上記の答えから解決策を見つけることができますが、どれも私にとってうまくいかなかったので（vscode v1.34）私は自分の経験を共有したいと思いました。少なくとも1人は、それがその後、有用見つけた場合、ではなく、無駄なポストを冷却amiirteを？

とにかく、私のソリューション（windows）は@noontzの上に構築されています。彼の設定は古いバージョンでは十分だったかもしれvscodeませんが1.34（少なくとも、動作させることができませんでした）。

私たちの設定はほとんど同じですが、1つのプロパティを保存しgroupます。理由はわかりませんが、これがないと、コマンドパレットにタスクが表示されません。

そう。を実行tasks.jsonしているwindowsユーザーのための作業vscode 1.34：

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Chrome",
            "type": "process",
            "command": "chrome.exe",
            "windows": {
                "command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
            },
            "args": [
                "${file}"
            ],
            "group": "build",
            "problemMatcher": []
        }
    ]
}

ご注意problemMatcherプロパティが仕事に、このために必要とされていませんが、それなしで、余分な手動のステップがあなたに課せられています。このプロパティのドキュメントを読み込もうとしましたが、理解するには厚すぎます。うまくいけば、誰かがやって来て私を教えてくれますが、そうです、そのことを前もって感謝します。私が知っているすべては-このプロパティを含めてctrl+shift+b、現在のhtmlファイルを新しいchromeタブで開きます。

簡単です。

プロンプトからURLでカスタムChromeを開く

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Open Chrome",
      "type": "process",
      "windows": {
        "command": "${config:chrome.executable}"
      },
      "args": ["--user-data-dir=${config:chrome.profileDir}", "${input:url}"],
      "problemMatcher": []
    }
  ],
  "inputs": [
    {
      "id": "url",
      "description": "Which URL?",
      "default": "http://localhost:8080",
      "type": "promptString"
    }
  ]
}

アクティブなファイルでカスタムChromeを開く

{
  "label": "Open active file in Chrome",
  "type": "process",
  "command": "chrome.exe",
  "windows": {
    "command": "${config:chrome.executable}"
  },
  "args": ["--user-data-dir=${config:chrome.profileDir}", "${file}"],
  "problemMatcher": []
},

ノート

• 必要に応じて、windowsプロパティを他のOSに置き換えます
• ${config:chrome.executable}たとえば、カスタムクロムの場所に置き換えます"C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
• ${config:chrome.profileDir}custome chromeプロファイルディレクトリに置き換えます。例： "C:/My/Data/chrome/profile"またはそれを残します
• 必要に応じて、上記のような変数を保持できます。これを行うには、settings.jsonユーザーまたはワークスペースに次のエントリを追加し、必要に応じてパスを調整します。

"chrome.executable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
"chrome.profileDir": "C:/My/Data/chrome/profile"

• これらの変数は、たとえばlaunch.jsonデバッグ目的で再利用できます。"runtimeExecutable": "${config:chrome.executable}"