LoginSignup
59
50

More than 3 years have passed since last update.

VSCodeで拡張機能「Live Server」を使う

Last updated at Posted at 2019-07-01

拡張機能「Live Server」って?

VS Codeに簡易ローカルサーバを立てることができる拡張機能。
また、ファイルを更新すると自動的にブラウザを更新する。

インストール

Visual StudioのMarketplace(LiveServer)、もしくはVS Codeの拡張機能メニューからLive Serverを検索しInstallする。

使い方

VS Code右下に表示される「Go Live」をクリックすると、ブラウザで http://127.0.0.1:5500/ が実行される。
スクリーンショット 2019-07-01 13.49.46.png
あとはスクリプトをがりがり書くだけ。

設定

Settings Docs より。

  • liveServer.settings.port
    • デフォルトは5500
  • liveServer.settings.root
    • 例、/sub_folder1/sub_folder2
    • デフォルトは / (ワークスペースのルート)
  • liveServer.settings.CustomBrowser
    • chromechrome:PrivateModefirefoxirefox:PrivateModemicrosoft-edgeblisk
    • デフォルトは null (システムのデフォルトブラウザ)
59
50
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
59
50