Visual Studio Codeのインストールとセットアップ

news,Webサイト制作,ホームページ中級講座,ホームページ基礎講座

Visual Studio Codeとは、Microsoft Azureが開発している様々なOS(Windows/Mac)上で動くコードエディターです。そもそもエディターというのは何でしょう?エディタは、本サイトでも使っているHTML/CSS/JavaScriptなどを記述できる敷いて言えば「メモ帳」です。メモ帳がプログラムやコードを記述しやすいように様々な機能を持ち合わせているといったイメージです。

今回の動画は、そのVisual Studio CodeをWindowsにインストールし、HTML/CSSのコーディング練習がスムーズに行えるような設定を行っていきます。

Visual Studio Codeのセットアップ

Microsoft Azureのサイトにアクセスし、今すぐダウンロードをクリックします。

各OSに合わせてダウンロード開始

今回の動画はWindouwsをインストールしています。

インストール後の初期設定

インストールが完了しましたら、HTML/CSSの入力練習を行うために最小限の拡張機能をインストールしておきます。拡張機能というのは、Visual Studio Codeにあとから追加できるプラグイン(追加プログラム)のことです。Visual Studio Codeは非常に多くの便利な拡張機能を追加できますが、最初は、いろいろ追加するよりもVisual Studio Code本体の使い方を覚えてから便利機能を追加していきましょう。

日本語化のJapanese Language Pack

インストール後、デスクトップ上にあるVisual Studio Codeのアイコンから起動した画面は英語モードです。

日本語化にするために拡張機能(エクステンションのボタン)を追加します。

左の拡張機能のボタンをクリックし、Japanese Language Packと入力します。

Japanese Language PackをInstall します。

インストール後、Visual Studio Codeを再起動すると開いた画面は日本語化になっています。

作成したHTMLファイルをプレビュー

Visual Studio Code内で作成したHTMLファイルをプレビューするための拡張機能をインストールします。

プレビューするためのLive Server

HTMLファイルをプレビューするためにリロードボタンをクリックして再読み込みしなくても表示が常に入力後の状態で表示してくれる「LiveServer」というプラグインをインストールします。

このプラグインが入ったあとは、作成したファイルの上で右クリックすると「Open with Live Server」というメニューが入りますので、ここをクリックしてプレビューします。

フォルダを作成し、ファイルを作成

続きは動画でご確認ください!