おすすめの VSCode の設定と拡張機能

設定

諸設定は、VSCode の左下の歯車マーク -> Settings
さらにその画面から、右上の Open Settings (JSON) のアイコンから setting.json を直接編集できる。

テーマ、syntax highlight のカスタマイズ

配色テーマは拡張機能としてたくさん転がっているが、好みのテーマ、特に syntax highlight がどうしても気に入るものがなかったので setting.jsonを直接編集して syntax highlight をカスタマイズしている。当時参考にした記事を忘れてしまったが、以下の記事の手順と同様に行った。

参考： VSCordのsetting.jsonで自分好みにカスタマイズ。 - Qiita

私の今の設定 (syntax highlight) はこんな感じ

settings.json

{
    "editor.tokenColorCustomizations": {
        "[Visual Studio 2017 Dark - C++]": {
            "textMateRules": [
                {
                    "scope": ["variable.parameter"],
                    "settings": {
                        "foreground": "#969696",
                        "fontStyle": "italic"
                    }
                },
                {
                    "scope": ["variable.other"],
                    "settings": {
                        "foreground": "#b4cede"
                    }
                },
                {
                    "scope" : ["variable.other.property"],
                    "settings": {
                        "foreground": "#b8dfd8"
                    }
                },
                {
                    "scope": ["entity.name.function"],
                    "settings": {
                        "foreground": "#eab9b9"
                    }
                },
                {
                    "scope": ["entity.name.function.member", "entity.name.method"],
                    "settings": {
                        "foreground": "#e6c5a5"
                    }
                },
            ]
        }
    }
}

既存配色テーマの変更については省略。
また、後述するが、色の編集には拡張機能の「Color Picker」が便利。

ペア括弧ガイド機能

配色、ハイライトと併せて、括弧と括弧のガイド機能の配色等をカスタマイズしている。(indent-rainbowが気に入らなかったため、模索していたら見つけた。)

参考： VS Code 1.62 の新機能 - ペア括弧ガイド機能の改善 - Qiita

私の今の設定

setting.json

{
    "editor.guides.bracketPairs": true,
    "editor.guides.bracketPairsHorizontal": false,
    "workbench.colorCustomizations": {
        "[Visual Studio 2017 Dark - C++]": {
            "editorBracketPairGuide.background1": "#ffd90080",
            "editorBracketPairGuide.background2": "#fe951c80",
            "editorBracketPairGuide.background3": "#da70d680",
            "editorBracketPairGuide.background4": "#179eff80",
            "editorBracketPairGuide.background5": "#03cdcd80",
            "editorBracketPairGuide.background6": "#7bee0080",
            "editorBracketPairGuide.activeBackground1": "#ffd900",
            "editorBracketPairGuide.activeBackground2": "#fe951c",
            "editorBracketPairGuide.activeBackground3": "#da70d6",
            "editorBracketPairGuide.activeBackground4": "#179eff",
            "editorBracketPairGuide.activeBackground5": "#05d7d7",
            "editorBracketPairGuide.activeBackground6": "#7bee00",
            "editorBracketHighlight.foreground1": "#ffd900",
            "editorBracketHighlight.foreground2": "#fe951c",
            "editorBracketHighlight.foreground3": "#da70d6",
            "editorBracketHighlight.foreground4": "#179eff",
            "editorBracketHighlight.foreground5": "#03cdcd",
            "editorBracketHighlight.foreground6": "#7bee00"
        }
    }
}

拡張機能

私が普段使っているものでおすすめのものを列挙。

Git, GitHub

• Git Graph
  視覚的にブランチとコミットを見ることができて、マージなどのコミット操作もGUIで出来るのが嬉しい。Gitユーザーには必須レベル。
• GitHub Pull Requests
• Project Manager
  登録したディレクトリ、または登録したGitベースフォルダにクローンしたリポジトリを、現在のウィンドウまたは別のウィンドウで、ワンクリックで開くことができる。Gitを使わなくても便利なので必須レベル。

言語全般

• Code Spell Checker
  スペルチェッカー。うるさいときもあるけど、これがあると安心できる。
• TODO List
  コメントで TODO としてメモすると左のタブで列挙して表示してくれる。
• Trailing Spaces
  行末の余計なスペースをハイライトしてくれる。
• Doxygen Documentation Generator
  Doxygen の説明は省略。必須レベル。

Markdown

• Markdown All in One
  Ctrl+B で太字にする、とかそういうやつ。
• Markdown Word Count
  シーケンスを無視してワードカウントしてくれる。words レベルだと句読点等はカウントしないので、和文の編集には setting.json にて "characters": true しておくのがおすすめ。プレーンテキストファイルでも使える。

その他

• Rainbow CSV
  CSV を列で色分けしてくれる。
• Color Picker
  CSV や XML、JSON などで色の編集をするときに便利。
• Auto Rename Tag
  HTML とかで便利なやつ。