【Mac】「Visual Studio Code」をインストールする方法を解説！

【Mac】「Visual Studio Code」をインストールする方法

ここまで「Visual Studio Code/VS Code」の基本情報を紹介しました。「Visual Studio Code/VS Code」は、WindowsだけでなくMacでも利用できる便利なテキストエディタなので、MacでWebデザインやプログラムをするなら、ぜひ活用しましょう。

これから「Visual Studio Code/VS Code」のダウンロード/インストール方法を紹介します。

【手順①】「Visual Studio Code」をダウンロード
●Visual Studio Code/VS Codeダウンロードページは→こちら

上記のリンクにアクセスしたら、「Mac」を選択しクリックします(画像=『オトナライフ』より 引用)

「Visual Studio Code」のダウンロードが終了すると、画面の右上に「ダウンロード」アイコンが表示されるのでクリックします(画像=『オトナライフ』より 引用)

【手順②】Macに「Visual Studio Code」をインストール

「Visual Studio Code」のダウンロードファイルが表示されるのでクリックします(画像=『オトナライフ』より 引用)

「Visual Studio Code」のインストールが終了すると「Visual Studio Code」を開く許可を求めるポップアップが表示されるので「開く」をクリックします(画像=『オトナライフ』より 引用)

「Visual Studio Code」が立ち上がります(画像=『オトナライフ』より 引用)

【手順③】Dockに配置
「Visual Studio Code/VS Code」のダウンロード/インストールが終了したら、次のステップは「Visual Studio Code/VS Code」の使いやすい環境を設定することです。

「Visual Studio Code/VS Code」を仕事で使用する場合は、Macを起動させたらすぐに「Visual Studio Code/VS Code」をクリックして開けるように設定しておくと大変便利です。

おすすめしたい設定は、「Visual Studio Code/VS Code」をDockに配置することです。Dockとはデスクトップ画面の下部に表示されているアプリのショートカットツールのことです。

「Visual Studio Code/VS Code」をDockに配置すれば、Macを起動させてデスクトップ画面を表示させればすぐに「Visual Studio Code/VS Code」を見つけられるので素早く起動できます。

「Visual Studio Code/VS Code」をDockに配置する方法を紹介します。

デスクトップ画面下部のDockに「Finder」があるので選択しクリックします(画像=『オトナライフ』より 引用)

「Finder」画面の左メニューの中にある「ダウンロード」を選択しクリックします。画面右側に「Visual Studio Code」があるので、左メニューの中にある「アプリケーション」までドラッグ＆ドロップします(画像=『オトナライフ』より 引用)

「Finder」画面の左メニューにある「アプリケーション」を選択しクリックします。「Visual Studio Code」があるので、デスクトップ画面のDockまでドラッグ＆ドロップします(画像=『オトナライフ』より 引用)

Dockに「Visual Studio Code」が配置されました(画像=『オトナライフ』より 引用)

【手順④】拡張機能をインストール/設定
続いて「Visual Studio Code」を利用する際に役立つ、拡張機能のインストールと設定方法を紹介します。この記事では「Japanese Language Pack for Visual Studio Code」を取り上げて設定方法を説明します。

Dockにある「Visual Studio Code」を起動させたら、画面の左メニューの中にある「拡張機能」アイコンをクリックします(画像=『オトナライフ』より 引用)

検索ボックスに「Japanese Language Pack for Visual Studio Code」と入力すると候補一覧が表示されるので、「Japanese Language Pack for Visual Studio Code」を探し「Install」をクリックします(画像=『オトナライフ』より 引用)

インストールが終了すると再起動を促すポップアップが表示されるので「Restart」をクリックします(画像=『オトナライフ』より 引用)

※サムネイル画像は（Image:「Visual Studio Code」公式サイトより引用）

文・オトナライフ編集部／提供元・オトナライフ

【関連記事】
・ドコモの「ahamo」がユーザー総取り！ プラン乗り換え意向調査で見えた驚愕の真実
・【Amazon】注文した商品が届かないときの対処法を解説！
・COSTCO（コストコ）の会員はどれが一番お得？　種類によっては損する可能性も
・コンビニで自動車税のキャッシュレス払い（クレカ・QRコード決済）はどの方法が一番お得？
・PayPay（ペイペイ）に微妙に余っている残高を使い切るにはどうすればいいの!?