web-dev-qa-db-ja.com

Visual Studioのコードを使用してブラウザでHTMLコードを表示する方法

新しいMicrosoft Visual Studioコードを使用してブラウザでHTMLコードを表示する方法

Notepad ++では、ブラウザで実行することができます。どのようにしてVisual Studio Codeで同じことができますか？

visual-studio-code
206
user4863890

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

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

ステップ数

  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を押すと、これは常にその特定のファイルを開きます。

    また、 "args"の値として["${file}"]を使用して、その時点で開いているファイルを開くようにthisを設定することもできます。 $は{...}の外側にあるため、["{$file}"]は正しくありません。

  3. ファイルを保存してください。

  4. HTMLファイル（この例では "text.html"）に戻り、を押します。 ctrl + shift + b Webブラウザで自分のページを表示します。

enter image description here

186
yushulx

@InvisibleDev - これを使ってこれをMac上で動作させる。

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

あなたがクロムを既に開いているならば、それはあなたのhtmlファイルを新しいタブで起動するでしょう。

69
Sammydo_55

VS Codeには Live Server Extention があり、ステータスバーからワンクリックで起動できます。

機能のいくつか：

  • ステータスバーからワンクリックで起動
  • ライブリロード
  • Chromeデバッグ用添付ファイルのサポート

enter image description here

60
Jose Cherian

あなたがライブリロードをしたいのなら、あなたはあなたのファイル変更を監視してページをリロードするgulp-webserverを使うことができます、こうすればあなたはあなたのページで毎回F5を押す必要はありません：

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

  • コマンドプロンプト（cmd）を開いて入力する

    npm install --save-dev gulp-webserver

  • VS Codeに Ctrl + Shift + P を入力し、 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を押します。

あなたのウェブサーバーはあなたのデフォルトブラウザであなたのページを開くでしょう。 HTMLページまたはCSSページに加えた変更は自動的に再ロードされます。

これは 'gulp-webserver' をインスタンスポートに設定する方法、そしてどのページをロードするかについての情報です。

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

32
Vlad Bezden

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

vscodeのバージョン：1.10.2

enter image description here

21
Roel

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

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

これは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"
}

デフォルトのブラウザでWebサーバ上で実行する場合：npm install http-server -g

{
    "label": "Run on webserver",
    "type": "Shell",
    "command": "http-server",
    "args": [
        "${file}",
        "-p",
        "8080",
        "-c-1",
        "-o"
    ],
    "problemMatcher": []
}

端末をCtrl + Cを押してサーバーをシャットダウンします

12
noontz

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

これは、 lite-server と呼ばれるローカルWebサーバーを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

これはlite-server（package.jsonで定義されています）をインストールします。これはあなたのデフォルトブラウザにindex.htmlをロードし、アプリケーションファイルが変更されると自動的にそれを更新します。

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

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

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

npm start

ちょっと待って、index.htmlがロードされ、あなたのローカルウェブサーバーによって提供されるあなたのデフォルトブラウザに表示されます！

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

また、VS Codeが自動保存するように設定されている場合（メニューの[ファイル] - [自動保存]）、入力中にブラウザに変更が表示されます。

注：

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

それでおしまい。今すぐコーディングセッションの前にnpm startと入力するだけでいいのです。

もともと投稿された heremsdnブログに。クレジットはAuthor：@Laurent Duveauに入ります

8
stom

あなたがちょうどMac上にいるならば、このtasks.jsonファイル：

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

...拡張子が ".html"であると仮定して、現在のファイルをSafariで開くために必要なのはこれだけです。

上記のようにtasks.jsonを作成し、それを呼び出します。 ⌘+shift+b。

Chromeで開きたい場合は、

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

アプリが既に開いている場合に新しいタブを開くのと同じように、これで必要なことができます。

5
Sez

私のランナースクリプトはこんな感じです：

{
    "version": "0.1.0",

    "command": "Explorer",

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

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

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

2
Sahar Ben-Shushan

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を押します。

2
Jose Carlos

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

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

HTMLの場合は、コマンドパレットを開いた後のF5がデバッガを開くはずです。

出典： リンク

2
Andreas DM

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

  1. つかいます Command + shift + p コマンドパレットを開きます。

enter image description here

  1. Configure Task Runnerと入力します。これを初めて実行すると、[Other]が選択されている場合は、VS Codeからスクロールダウンメニューが表示されます。以前にこれを行ったことがある場合は、VS Codeから直接直接tasks.jsonに送信されます。

  2. Tasks.jsonファイルに入ったら。表示されたスクリプトを削除して、次のスクリプトに置き換えます。

{
    "version": "0.1.0",
    "command": "Chrome",
    "osx": {
        "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
    },
    "args": ["${file}"]
}
  1. HTMLファイルに戻り、を押します。 Command + Shift + b Chromeであなたのページを見るため。
2
Joe Mellin

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

2
Manish Sharma

これは、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の引数には何も入力していません。

編集：また、あなたは必要ありません-incognitoも-private-window ...それは私が私的なウィンドウでそれを見るのが好きです

2
Abdel-Rahman Muhammed

これは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}"
      ]
    }
  ]
}
1
Eliandro

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

0
PersyJack

最近、 www.lynda.com のビジュアルスタジオコードチュートリアルでこの機能に出会いました。

Ctrlキーを押しながらKキーを押した後にMキーを押すと、[言語モードの選択]が表示され（または、その文字の前にHTMLと表示されている右下隅をクリック）

今Ctrl + Kを押した後にVを押すと、タブの近くにあなたのHTMLが開きます。

ただいま！

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

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

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

とにかくかっこいいです。ハッピーvscoding :)

0
Mrk

おそらくほとんどの人は上記の答えから解決策を見つけることができますが、私にとってはどれもうまくいかなかったと思う（vscode v1.34）私は自分の経験を共有すると思った。少なくとも1人が役に立つと思うなら、無駄な投稿ではなくクールですamiirte？

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

構成はほぼ単一のプロパティを保存するのと同じです-そのプロパティは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タブに開き、手間がかからないことです。

簡単です。

0
mad.meesh