VS Code-Live Serverの紹介、インストール、および使用

Vs Code Introduction

基本概念

ライブサーバー ：リアルタイムの読み込み機能を備えた小さなサーバー。html/ css / javascriptをクラックするために使用できますが、最終的なサイトの展開には使用できません。つまり、ライブサーバーをプロジェクトのリアルタイムサーバーとして使用して、開発したWebページまたはプロジェクトの効果をリアルタイムで表示できます。

利点

1：ワンクリックインストール、自動更新、ローカルサーバー環境のセットアップ。

2：gulp構築と比較して、自動更新を実現し、ローカルサーバー環境をセットアップするには、自動更新プラグインgulp-livereloadをインストールし、ローカルサーバープラグインgulp-serverをセットアップする必要があります。 ライブサーバー それはほとんど1つのステップで完了します。インストールするだけ ライブサーバー 、自動更新とローカルサーバー環境のセットアップの問題を解決できます。

動作原理

ライブサーバー これは、作業ディレクトリとそのサブディレクトリ用の単純なノードアプリケーションです。また、ファイルの変更を監視し、これが発生すると、Webソケット接続を介してブラウザにメッセージを送信し、リロードするように指示します。クライアントがこれをサポートするために、サーバーは要求された各htmlファイルにJavaScriptコードの小さな断片を挿入します。このスクリプトは、Webソケット接続を確立し、リロード要求をリッスンします。参照されているスタイルシートをDOMから検索し、ブラウザーをトリガーしてそれらを再度取得して解析することにより、ページ全体をリロードしなくてもCSSファイルを更新できます。

chomeコンソールを開き、JavaScriptコードの小さな部分を見つけます

インストール

1つ、 VSコード 拡張機能で検索 ライブサーバー そしてインストール

2.コマンドパネルを開き、次のように入力します。設定、[設定]をクリックします

三、検索 ライブサーバー 構成項目、左側の変更が必要な構成項目を右側のユーザー設定にコピーして変更します

ライブサーバー 構成

{ 'liveServer.settings.port': 8080, //Set the port number of the local service 'liveServer.settings.root': '/', //Set the root directory, that is, open files will be found in this directory 'liveServer.settings.CustomBrowser': 'chrome', //Set the browser opened by default 'liveServer.settings.AdvanceCustomBrowserCmdLine': 'chrome --incognito --remote-debugging-port=9222', 'liveServer.settings.NoBrowser': false, 'liveServer.settings.ignoredFiles': [//Set ignored files '.vscode/**', '**/*.scss', '**/*.sass' ] }

使用する

設定後、vscodeを再起動し、参照するファイルを選択し、右クリックしてサービスを開始します

その他の開封方法

1.クリックできるウィンドウの下部に[ライブ配信]があります。クリックすると、HTMLファイルがブラウザで自動的に開きます

2.ショートカットキー

(alt+L, O)サービスを開く

(alt+L, C)サービスを終了

3. F1を押して、入力フィールドに入力します

Live Server: Open Live Serverサーバーを起動するにはサービスを開きます。

またはLive Server: Close Live Serverサーバーを停止するには、サービスを閉じます