Visual Studio CodeをMacにインストールする手順を、初心者向けに詳細に解説します

Microsoftが提供するVisual Studio Code(通称 VS Code)というHTMLやCSSを書くためのアプリケーションをMacにインストールする手順をご紹介します。
大まかな流れとしては「アプリをダウンロードする」→「Macにインストールする」→「いつでも使いやすいようにDockに置く」→「拡張機能をインストールする」の4ステップです。

目次

STEP1:Visual Studio Codeをダウンロードする

Macのアプリケーション「Google chrome」を開いて、「VS Code」とGoogle検索しましょう。
Visual Studio Codeのサイトhttps://azure.microsoft.com/ja-jp/products/visual-studio-code/が出てくるので、クリックしてウェブサイトに行きます。


ウェブサイトを開いてすぐにある、ダウンロードの青いボタンをクリックしてください。

画面が切り替わりましたら、Macを選択してダウンロードします。

画面が切り替わりダウンロードが始まり、Google Chromeの左下にダウンロード中の表示が出ます。
ダウンロードが終わるとこのような表示になります。


Visual Studio Codeのダウンロードはこれで完了です。

STEP2:Visual Studio CodeをMacにインストールする

ダウンロードしたVisual Studio Codeはどこに行ったのかというと、
「Finder」アプリを開くと左のバーにある「ダウンロード」フォルダの中にあります。

「ダウンロード」の中にあるVSCode-darwin-universal.zipファイルをダブルクリックしてzipファイルを解凍します。
するとファイルのすぐ上にVisual Studio Codeのアプリが出てきます。
アプリはドラッグアンドドロップなどで「アプリケーション」フォルダに移動させ管理します。

600

STEP3:Visual Studio CodeをDockに配置する

アプリケーションのフォルダを開き、Visual Studio CodeのアプリをDockにドラッグアンドドロップ。これでいつも使える準備が整いました!

STEP4:拡張機能をインストールする

Visual Studio Codeを「拡張機能」というものを入れることで、より便利に使う事が出来ます。
今回は2つ紹介します。

Japanese Language Pack for Visual Studio Code
日本語化する
Live Server
リアルタイムプレビュー機能の追加

Visual Studio Codeを起動して、拡張機能を追加していきます。
まずは「Japanese Language Pack」をインストールしてみましょう。

左のメニューから拡張機能のアイコンを選択します。

検索ボックスが出てきますので、任意の拡張機能の名前を入れて検索します。
検索結果が一覧で出ますので任意のものを選択、すると右側の画面が選択した拡張機能の詳細に変わります。

内容を確認し、インストールボタンを押します。(一覧の方にあるインストールボタンでもOKです)
「Japanese Language Pack」はインストールが完了すると、画面右下に再起動するためのボタンが出てきます。
日本語化するための拡張機能ですが、Visual Studio Codeを再起動しないと日本語が反映されませんので、画面右下に出てきたボタン「Restart」をクリックして再起動します。

※もし右下に「Restart」のボタンが出てこない時は、メニューなどから一度 Visual Studio Code を終了し、再び起動してください。(またはショートカットキー commond + Q で終了する事も出来ます)

再起動後、日本語になっていれば完了です。

同じ手順で、「Live Server」もインストールしてみましょう。

他にも便利な拡張機能は沢山あります。
検索して色々使ってみてください。
ただし、使わないのにそのままインストールしたままにしておくのはやめましょう。
Visual Studio Code が重くなる原因にもなります。

よかったらシェアしてね!

この記事を書いた人

目次
閉じる