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

そもそもエディターというのは何？

エディター（editor）とは、コンピュータ上でテキストファイルを編集するためのソフトウェアのことです。エディターは、プログラミング言語やマークアップ言語など、あらゆる種類のテキストファイルを編集するために使用されます。

エディターには、基本的な機能としてテキストの入力、削除、コピー、ペースト、ファイルの開閉などがあります。また、高度な機能として、シンタックスハイライト、自動インデント、自動補完、検索・置換、バージョン管理システムとの連携などがあります。

エディターは、テキストファイルを直接編集するため、コンピュータプログラムの開発やWebページの作成、文書の作成など、幅広い用途に利用されています。また、エディターには、テキストエディター以外にも、グラフィックスや動画、音声などのファイルを編集するためのエディターもあります。

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

Visual Studio Codeのセットアップ

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

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

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

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

インストールが完了しましたら、HTML/CSSの入力練習を行うために最小限の拡張機能をインストールしておきます。拡張機能というのは、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」というメニューが入りますので、ここをクリックしてプレビューします。

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

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

WEB制作においてのおすすめプラグイン