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」にします。
こうすることで半角のスペースは「・」が付くようになり、分かりやすくなります。

設定できることはたくさんあります。
コーディングに慣れてきて「もっとこうだったら便利だな」と思った時は調べてみましょう。
設定で解決できることもたくさんありますので都度調べてみましょう。

また、不要な拡張機能をむやみに入れないようにもしましょう。

Advertising

Photoshop以外も契約したいけど、高くて躊躇していませんか?
Adobe Creative Cloudを一番安く購入する方法 →1年:39,980円の詳細を見る


世界最大級のオンライン学習サイトUdemy  ※UdemyはよくSALEをしていますので、ひんぱんにチェックして、Webデザイン講座の動画をお得にGETしてくださいね♡2000〜3000円くらいで買えることも。


ロイヤリティフリーの写真素材【PIXTA】 ※画像素材は定額制プランのあるサイトを選ぶのがオススメです。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる