vscode で Web ページをプレビューする方法

藏色散人
リリース: 2020-01-14 11:05:01
オリジナル
9964 人が閲覧しました

vscode で Web ページをプレビューする方法

vscode で Web ページをプレビューするにはどうすればよいですか?

VSCode 設定 Web ページのコードのリアルタイム プレビュー

推奨チュートリアル: vscode チュートリアル

1. 設定description

1. VSCode は非常に優れた開発ソフトウェアです。DW よりも小さく、特にフロントエンドのテストに適しています。そのため、通常、Web ページを開発するときは、コードを作成し、保存し、ブラウザで更新します。効果を確認して、繰り返します。これら 3 つの手順で多くの時間が無駄になっていることがわかりました。

2. 実際、VSCode で Web サーバーを構成できます。コードを変更した後は、コード ブラウザーを保存してリアルタイムでプレビューするだけです。

2. 操作手順

1 .VScode を開き、座標ツールバーの最後のツールバーをクリックしてプラグインのインストールに入ります。

vscode で Web ページをプレビューする方法

2. 左側のツールバーが表示されていない場合は、表示された場合は、[ビュー] で [拡張機能] を見つけてプラグインのインストールを入力することもできます

vscode で Web ページをプレビューする方法

## 3. 検索ボックスに「Live Server」と入力し、検索結果で次を見つけて選択します。

vscode で Web ページをプレビューする方法## 4. インストールが完了したら、ソフトウェア プラグインを再起動して有効にする必要があります。

5. 再起動後、新しいプラグインを作成します。ワークスペース (フォルダを vscode に直接ドラッグすることもできます)、テスト用に HTML ファイルをここに作成します、別のライブ サーバーを作成するように注意してください HTML ファイルを IDE にドラッグしてライブ サーバーを使用することはできません。この HTML ファイルをワークスペース (フォルダー) が作成されました。新規作成が完了すると、ステータス バーに [ライブ配信] が表示されます。クリックすると自動的にブラウザーが開き、

が表示されます。 ヒント: 前に HTML プロジェクトがある場合は、プロジェクトのルート フォルダーを VScode に直接追加すると、ワークスペースに自動的に追加されます

vscode で Web ページをプレビューする方法 6. ステータス バーがない場合は、ファイルを右クリックして選択することもできます。ライブサーバーで開く

vscode で Web ページをプレビューする方法 7. 次に、コードを変更するだけです。変更したコードを保存するには Ctrl S を押す必要があります。ブラウザは自動的に更新されます...

以上がvscode で Web ページをプレビューする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!