【導入方法と最低限の拡張機能まとめ】Visual Studio Code【Mac】

Visual Studio CodeはMicrosoft社が提供している無償のコードエディタです。

対応している言語の広さと拡張機能の多さから、現役エンジニアの間でも人気のエディタだそうな。

わたしもAtomからVisual Studio Codeに乗り換えたので、今回はこんな悩みを解決します。

にゃにゃみ

インストールって難しいイメージ…

だーみお

画像で説明するから簡単だよ

にゃにゃみ

ねこでもできるにゃ？

Visual Studio Codeのインストール方法

公式サイトにアクセスする

「今すぐダウンロード」をクリック

右の「Mac」をクリック

ダウンロードが開始される

アプリケーションへ入れる

ドラッグ&ドロップで「アプリケーション」へ追加してください。

起動する

これで下準備はOKです。

アプリケーションからダブルクリックで起動します。

初めはこのように英語なので、次の章で日本語にする方法も解説しています。

拡張機能の追加方法

Visual Studio Codeには拡張機能がたくさん用意されています。

拡張機能というのは、そのエディタを使いやすいようにカスタマイズできる機能のことです。

人それぞれオススメはあると思うので、「必要最低限これだけあれば作業しやすいですよ〜」というものだけ紹介します。

まずは次の３つをインストールしてみてください。

左列のアイコンをクリック

拡張機能の追加は左列の以下のアイコンをクリックします。

おすすめ拡張機能３つ

日本語にする

Japanese Language Pack for Visual Studio Code

「japanese」をコピペして検索すると、一番上に出てきますので「Install」をクリック。

一度⌘＋Qで終了させて再起動すると、日本語になります。

アイコンでリストを見やすくする

vscode-icons

vscode-iconsの使用前と使用後はこんなかんじ。

見やすさが格段に違うので、初めに入れておきましょう。

コードに色をつけて見やすくする

こちらは２種類あるので、それぞれ自分に合う方を選んでください。

GitHub Theme

私はこちらを使用しています。

GitHubと同じ配色になるので、職場でGitHub使用する機会がある人や、将来的に慣れておきたい人はこちらがおすすめ。

Material Theme

こちらはGitHub Themeが登場するまでよく使われていたテーマです。

こちらは配色パターンが１０種類ほどあるので、配色にこだわりたい人におすすめ。

こんなのとか、

こんなのとか。少し色合いが違ってきれいですよね。

まとめ：Visual Studio Codeの導入方法for Mac

この記事をまとめます。

インストール方法まとめ

初めに導入しておきたい拡張機能まとめ

さっそく準備ができたらコーディングの練習に使ってみましょう〜！