Visual Studio Codeをインストールする
それではテキストエディタの「Visual Studio Code（以下VSCode）」をインストールしましょう。まずは下の公式サイトからインストールファイルをダウンロードしましょう。
僕はWindows10、11を選択したよ。
１．自分の使用環境に合わせたボタンをクリックして、インストーラーをダウンロードしましょう。
２．ファイルは基本ダウンロードフォルダに保存されます。インストーラーをダブルクリックしてインストールを開始します。
３．セットアップが開始しましたら、同意するにチェックを入れて次へをクリック。
４．何も変更せず次へをクリック。
５．何も変更せず次へをクリック。
６．インストールをクリック。
７．インストールが開始されます。
８．デスクトップ上にアイコンを作成するに任意でチェックを入れて次へをクリック。
９．完了ボタンをクリックすると、VSCodeが起動します。
出来ました！
それでは次はVSCodeの初期設定をしていきましょう。
拡張機能で使いやすくする
VSCodeはそのまま使用しても非常に使いやすいエディタです。しかし「拡張機能」と呼ばれるアプリの様なものをインストールすることで、自分好みにカスタムすることができます。まずは日本語化用の拡張機能を設定してみましょう。
日本語化【Japanese Language Pack for VS Code】
１．VSCodeを起動すると最初は英語のメニューになっています。日本語化するために「Japanese Language Pack for VS Code」という拡張機能をインストールします。初回起動時の画面は個人の環境によって違うかもしれませんが、特に気にしなくて大丈夫です。
２．①左側の縦に並んでいるアイコンの一番下をクリック。②検索窓に「japanese」と入力。③インストールボタンをクリック
３．インストールが完了したら拡張機能の説明欄にあるように、キーボードのCtrl + Shift + Pを押します。すると上の検索窓に選択肢が出てくるのでConfigure Display Languageをクリック。
４．日本語をクリック。
５．Restartをクリック。
６．日本語化が完了しました。
拡張機能のインストールの仕方はどれも大体こんな感じです。他にもWebデザインにおすすめの拡張機能を少し紹介いたします。
Highlight Matching Tag
HTMLは基本的に「開始タグ」「終了タグ」という２つの「タグ」というもので文章を囲って記述します。その際に、どのタグがペアになっているのかを分かりやすく表示する拡張機能です。
<p>むかしむかしあるところにおじいさんとおばあさんがすんでいました。</p>
zenkaku
HTMLやCSSは基本的に「半角英数字」で記述します。そのためコードの途中に「全角のスペース」が入っているとエラーを起こすことがあります。この拡張機能をインストールすると「全角スペース」をグレーで表示してくれるので分かりやすくなります。
他にも色々ありますので、VSCodeに慣れたら「こんな拡張機能はないかな？」と調べてみてください。でもWebデザインの勉強にはVSCode標準機能でほぼ大丈夫かと思います。