環境構築 VSCode

VS CodeでHTML + JavaScript + CSS開発環境構築

VS Code Live Previewの紹介

公開日: 2023-02-28
更新日: 2023-03-05

  Table of Contents

Live Previewの設定

Live Preview, Microsoftは, VS Code内でローカルサーバーを立ち上げ, HTMLファイルのPreviewをVS Code内部で可能にするExtensionです.

インストール方法

  1. Ctrl + PでVS COde Quick Openを開く
  2. ext install ms-vscode.live-serverを入力

ショートカット設定

デフォルトではPreviewに対して, ショートカットキーがアサインされていません. また, 一度Previewを開いたあとに確認後Previewを閉じたとしてもローカル Live Serverは動き続けているので, Live ServerをStopするショートカットキーもアサインしたいところです.

そこで, markdown環境との親和性を考えて以下のようなキーを割り当てます:

Ctrl + Shift + v HTMLファイルPreview
Ctrl + Shift + alt +v ローカル Live ServerをStop

ショートカット設定

keybindings.jsonを開いたあとに下の設定を貼り付け保存する

1
2
3
4
5
6
7
8
9
10
11
12
13

    //-----------------------------------------------------------
    //  HTML Settings
    //-----------------------------------------------------------
    {
        "key": "ctrl+shift+v",
        "command": "livePreview.start",
        "when": "editorTextFocus && editorLangId == 'html'"
    },
    {
        "key": "ctrl+shift+alt+v",
        "command": "livePreview.end",
        "when": "editorTextFocus && editorLangId == 'html'"
    },

References

VS Code Extension

Share Buttons
 Share on:
Feature Tags
Leave a Comment
(注意：GitHub Accountが必要となります）
CONTENTS