IT技術の痒い所に手が届く

詳細

×閉じる

VSCodeの使い方

フォルダーを開いて、ライブサーバーを使う

VSCodeは、色々な使い方があります。

ここでは、Webページ(htmlとJavaScript)作成時の
基本的な使い方をみておきましょう。

フォルダーを開く

VSCodeは、フォルダー単位で作業しましょう。

[ファイル]→[フォルダーを開く]。

VSCodeの設定

ワークスペースもありますが、
私は、フォルダ単位が使いやすいと思います。

エクスプローラーボタンは、適宜、表示・非表示を切り替えると便利です。

VSCodeのエクスプローラー

上記は、私のフォルダ。
各自、メニューや右クリックから、ファイルを作成しましょう。

htmlファイルを作成

(フォルダを何か適当に指定して) htmlファイルを作成します。

フォルダに右クリック→[新しいファイル]。

VSCodeの新しいファイル

試しにa.htmlを作ってみます。

VSCodeのJSON

空のa.htmlが出来ましたね。

VSCodeの空ファイル

htmlと入力すると、アシストが出ます。
html:5を選びましょう。

VSCodeでhtmlからアシスト表示

lang="ja"<p>HelloWorld</p>と編集してみます。

VSCodeでHelloWorld

上記は一例です。適当にhtmlファイルを作成しましょう。

サーバーでプレビュー

拡張機能でインストールしたLive Server で、プレビューします。

画面の右クリックから、Open with Live Server

Open with Live Server

ブラウザが起動して、画面が表示されますね。

Open with Live Serverのブラウザ起動

この後、VSCodeでhtmlを編集するたびに、
リアルタイムで画面を確認できるようになります。

Copyright(c) 2005-2021 SearchMan Sato . All Rights Reserved.