[ VSCode ] コードエディタを準備する方法 (Mac)

ホームページを制作するにも、Webアプリケーションを開発する際にもプログラミング(コードの入力)をしていきますが、その際、コードを入力していくために必要になるのが、「コードエディタ」と呼ばれるものになります。

今回は、そんなコードエディタの一つであるVisual Studio Codeの準備方法についてみていきましょう！

プログラミングをする際にコードを入力するものをコードエディタといいます。

Visual Studio Codeは、エンジニア間では、VSCodeと言われており、マイクロソフトによって開発されたコードエディタです。

以下は、ハイライト機能の例ですが、コードごとに色がついていることがわかると思います！

インストールをする際の手順は以下の通りになります。

ブラウザが開たら、VSCodeと検索をしましょう。
検索結果で一番上に出て来るのが、公式ページですので、クリックします。

※ 次のリンクからでも公式ページにアクセス可能です。

Visual Studio Code – コード エディター | Microsoft Azure

ほぼすべての言語に対応し、任意の OS で動作する強力なコード エディター、Visual Studio Code を使用して、Azure で編集、デバッグ、デプロイを行います。

azure.microsoft.com

上記のように公式ページが開けたら、今すぐダウンロードをクリックすると、ダウンロードページに遷移します。

ここでは、利用しているOS(WindowsやMacなど)に応じて、選択するものが違うので間違えないように！

私は、Macを使っているので一番右を選択しますが、Windowsの方は、一番左を選択しましょう。

選択すると以下のように表示されますので、保存先にデスクトップを選択して、保存ボタンを押しましょう。

以下のように起動が確認出来たらOKです！

起動して、わかると思いますが、デフォルトで設定されている言語は、英語なんですね汗
勿論、日本語へ変更も可能ですので、次の項目でその方法を確認していきましょう。

VSCodeの左端にサイドバーがあると思います。
上から5つ並んでいると思いますが、最後の四角が4つ書いてあるものを選択します。
これは何かというと拡張機能をインストールする場所ですので、覚えておきましょう。

上のような画面になったら検索できる場所があるので、「Japan」と入力しましょう。

すると検索結果に「 Japanese Language Pack for VS Code 」が出てきますので、installボタンをクリックし、インストールしましょう！

インストールが完了すると、以下のような画面が右下あたりに出てきますが、この拡張機能を使うためにはVScodeを再起動する必要があることを言われているだけですので、「ReStart」をクリックし、再起動しましょう。

再起動が終わると、以下のように日本語になっていることが確認出来ます。
これで、VSCodeの準備も完了ですが、学習内容や作業内容に応じて拡張機能を準備し、カスタマイズしていきましょう。