Visual Studio CodeはMicrosoft社が提供している無償のコードエディタです。
対応している言語の広さと拡張機能の多さから、現役エンジニアの間でも人気のエディタだそうな。
わたしもAtomからVisual Studio Codeに乗り換えたので、今回はこんな悩みを解決します。
- VScodeのインストール方法が知りたい
- 日本語にする方法が知りたい
- 最初の設定ってなにがあるの?
- 最低限入れておくべき拡張機能は?

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

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

ねこでもできるにゃ?
- VScodeを使う最初の1歩を踏み出せる
- 拡張機能でわかりやすくなる
- コーディング練習がはかどる
- ねこでもできる(多分)
Visual Studio Codeのインストール方法
公式サイトにアクセスする
「今すぐダウンロード」をクリック
右の「Mac」をクリック
ダウンロードが開始される
アプリケーションへ入れる
ドラッグ&ドロップで「アプリケーション」へ追加してください。
起動する
これで下準備はOKです。
アプリケーションからダブルクリックで起動します。
初めはこのように英語なので、次の章で日本語にする方法も解説しています。
拡張機能の追加方法
Visual Studio Codeには拡張機能がたくさん用意されています。
拡張機能というのは、そのエディタを使いやすいようにカスタマイズできる機能のことです。
人それぞれオススメはあると思うので、「必要最低限これだけあれば作業しやすいですよ〜」というものだけ紹介します。
まずは次の3つをインストールしてみてください。
左列のアイコンをクリック
拡張機能の追加は左列の以下のアイコンをクリックします。
おすすめ拡張機能3つ
日本語にする
Japanese Language Pack for Visual Studio Code
「japanese」をコピペして検索すると、一番上に出てきますので「Install」をクリック。
一度⌘+Qで終了させて再起動すると、日本語になります。
アイコンでリストを見やすくする
vscode-icons
vscode-iconsの使用前と使用後はこんなかんじ。
見やすさが格段に違うので、初めに入れておきましょう。
コードに色をつけて見やすくする
こちらは2種類あるので、それぞれ自分に合う方を選んでください。
GitHub Theme
私はこちらを使用しています。
GitHubと同じ配色になるので、職場でGitHub使用する機会がある人や、将来的に慣れておきたい人はこちらがおすすめ。
Material Theme
こちらはGitHub Themeが登場するまでよく使われていたテーマです。
こちらは配色パターンが10種類ほどあるので、配色にこだわりたい人におすすめ。
こんなのとか、
こんなのとか。少し色合いが違ってきれいですよね。
まとめ:Visual Studio Codeの導入方法for Mac
この記事をまとめます。
インストール方法まとめ
- 公式サイトをクリック
- 「今すぐダウンロード」をクリック
- 「Mac」をクリックしてダウンロード
- アプリケーションへ追加して起動
初めに導入しておきたい拡張機能まとめ
- Japanese Language Pack
- vscode-icons
- GitHub Theme
さっそく準備ができたらコーディングの練習に使ってみましょう〜!