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

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

目次

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を「拡張機能」というものを入れることで、より便利に使う事が出来ます。
今回は3つ紹介します。

Japanese Language Pack for Visual Studio Code
日本語化する
Live Server
リアルタイムプレビュー機能の追加
zenkaku
全角の空白を可視化

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

①左のメニューから拡張機能のアイコンを選択します。
②検索ボックスに拡張機能の名前を入れて検索します。(アプリの名前を全て入れなくても出てきます)
③検索結果が一覧で出ますので任意のものを選択、内容を確認し、インストールボタンを押します。
④「Japanese Language Pack」はインストールが完了すると、画面右下に再起動するためのボタンが出てきます。
日本語化するための拡張機能ですが、Visual Studio Codeを再起動しないと日本語が反映されませんので、画面右下に出てきたボタン「Restart」をクリックして再起動します。

※もし右下に「Restart」のボタンが出てこない時は、一度 Visual Studio Code を終了し、再び起動してください。

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

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

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

STEP5:設定をする

Visual Studio Codeは改めて設定をしなくても充分使えます。
ただ細かく設定する事で自分好みに使いやすくしていけます。

今回は半角スペースを可視化するための設定をしてみましょう。

設定アイコンから、設定を選択します。
検索で「空白」と入力し、「Render Whitespace」の項目を「all」にします。
こうすることで半角のスペースは「・」が付くようになり、分かりやすくなります。

設定出来ることは本当に沢山あります。
コーディングに慣れてきて「もっとこうだったら便利だな」と思った時は調べてみましょう。
設定で解決できるとこも沢山あります。

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

この記事を書いた人

目次
閉じる