プログラミング向けのテキストエディタ&IDE（統合開発環境）の中で最もオススメなVisual Studio Code。
そのVisual Studio Codeで僕が導入している一押しの拡張機能と設定です。

目次

Visual Studio Codeとは

まずは概要をかねてざっくり解説。

マイクロソフト製の多機能テキストエディタです。
OSを問わず、拡張機能次第で様々な言語、環境で使えます。

公式

ちなみに僕は仕事、プライベートともVisual Studio Codeのお世話になっってます。

このブログを書くためのMarkdownからHTML、CSS、JavaScript、Python、PHP、Goなど
広く使っています。

（ゲームやスマホアプリ制作とかはまだまだIDEのほうが良さそうです。）

拡張機能

拡張機能も各言語の取り扱いのためのものと、Visual Studio Code自体を使いやすくするものとあります。
基本的に言語用のものはMicrosoft公式の実際に扱う言語用拡張機能を入れればとりあえず大丈夫でしょう。(もしMicrosoft製がなければ上位のものをいれるとかしてみる)

それ以外のVisual Studio Code自体を使いやすくする拡張機能を書いていきます。
導入したい場合は拡張機能タブから検索してください。

Auto Close Tag

HTMLやXMLの閉じタグを自動で挿入。

Auto Rename Tag

HTMLやXMLのタグのペアの名前を一括で変更。

Blacket Pair Colorizer

カッコ(){}[]のペアが同じ色で色付けされます。

Code Runner

右クリックメニューにRun Codeを追加してプログラムを手早く実行。

Harurow Util

選択範囲のケース変換。
（大文字・小文字、スネークケース・キャメルケース）

indent-rainbow

インデントの深さごとに色付け。

Japanese Word Handler

Ctrl + → などでの区切りが日本語でもいい感じに区切ってくれるようになります。

Live Server

HTMLのリアルタイム表示。

Material Icon Theme

アイコンテーマです。
対応形式が豊富で可愛く見やすい。

One Dark Pro

落ち着いた色味のダーク系テーマです。
別のテキストエディタのAtomからの移植らしいです。

Settings Sync

拡張機能や設定をGithubを使って共有できます。
複数台間で常に同じ設定が使えたり、バックアップにもなって便利。

ちょっと設定が面倒ですがいろいろ解説もあるので調べてやってみてください。

zenkaku

全角スペースを目立たせます。

ユーザー設定

アップデートでGUIで記述できるようになりましたが、従来どおりjsonで記述する方法になれたほうが便利です。

Ctrl + Shift + P でコマンドパレットを開いて"setting"で検索。
"基本設定 ユーザー設定を開く"でGUIの設定画面が表示されます。

右上の{}マークでjson形式の設定が開きます。

おすすめプログラミングフォント

源ノ角ゴシック Code JP
日本語も扱えてプログラミングしやすいフォントです。

かつてはRictyというフォントが定番でしたが
導入の楽さもあって今は源ノ角ゴシック Code JPが一番のおすすめです。

settings.json

{
    // エディター部分の設定
    "editor.accessibilitySupport": "off",
    // エディターのフォントの種類とサイズ
    "editor.fontFamily": "源ノ角ゴシック Code JP",
    "editor.fontSize": 14,
    "editor.formatOnPaste": true, // 貼り付け時にフォーマットもしてくれる
    "editor.formatOnSave": true, // 保存時にフォーマットもしてくれる
    "editor.minimap.enabled": true, // エディター上にミニマップを表示
    "editor.minimap.showSlider": "always", // 表示している場所をミニマップでハイライトする
    "editor.multiCursorModifier": "ctrlCmd", // マルチカーソル機能をCtrlで使う
    "editor.renderWhitespace": "boundary", // 連続する、または文字間にない半角スペースを目立たせる
    "editor.snippetSuggestions": "top", // コードスニペットを候補の先頭に表示

    // Emmet(簡単にhtmlが書ける記法)の設定
    "emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly", // HTMLとCSSだけにEmmetを適用する
    "emmet.showSuggestionsAsSnippets": true, // Emmetの候補を表示させる
    "emmet.triggerExpansionOnTab": true, // TabでEmmetを展開できるようにする
    "emmet.variables": { // 作成されるhtmlのlangを日本語にする
        "lang": "ja"
    },

    "explorer.confirmDragAndDrop": false, // エクスプローラーでドラッグアンドドロップで移動できるようにしない
    "files.autoGuessEncoding": false, // ファイルの文字コードを自動で判断しない
    "files.autoSave": "off", // ファイルの自動保存しない
    "git.ignoreMissingGitWarning": true, // Gitが見つからなくてもメッセージを出さないようにする

    // アイコンテーマの調整
    "material-icon-theme.files.associations": {
        "*.py": "Python",
        "admin.py": "Django",
        "apps.py": "Django",
        "manage.py": "Django",
        "models.py": "Django",
        "settings.py": "Django",
        "tests.py": "Django",
        "urls.py": "Django",
        "views.py": "Django",
        "wsgi.py": "Django"
    },

    // Settings Syncの設定
    "sync.askGistName": false,
    "sync.autoDownload": true, // 起動時などに自動ダウンロード
    "sync.autoUpload": true, // 変更時などに自動アップロード
    "sync.forceDownload": false,
    "sync.gist": "********************************",
    "sync.host": "",
    "sync.pathPrefix": "",
    "sync.quietSync": false,
    // 拡張機能もシンクさせる
    "sync.removeExtensions": true,
    "sync.syncExtensions": true,

    // ターミナル部分の設定
    // フォントの種類とサイズ
    "terminal.integrated.fontFamily": "monospace",
    "terminal.integrated.fontSize": 18,
    // コマンドプロンプトではなくPowerShellを使うようにする
    "terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",

    // ワークベンチの設定
    "workbench.colorTheme": "One Dark Pro", // テーマの指定
    "workbench.iconTheme": "material-icon-theme", // アイコンテーマの指定
    "workbench.startupEditor": "none", // 起動時になにも読み込まないようにする（デフォルトはようこそページ）
}

もし他におすすめ拡張機能や設定がありましたら以下のコメント欄に書いていただけると嬉しいです。 では