【VSCode】おすすめ拡張機能一覧 | ユウヤの技術ブログ

拡張機能一覧（汎用系）

Japanese Language Pack for Visual Studio Code

VSCode内の文字を日本語に対応させるための拡張機能です。英語が少しつらいと感じる方は入れてみるといいと思います。

1. コマンド + shift + P でコマンドパレットを開く
2. Configure Display Language と入力
3. ja を選択

indent-rainbow

インデントに色をつけてくれます。

TODO Highlight

デフォルトでは、TODO:とFIXMEしかありませんが、以下のようにすることで新しい文字列を追加したり、色を変えたりできます。

    "todohighlight.keywords": [
        {
            "text": "TODO:",
            "backgroundColor": "#ff00ff"
        },
        {
            "text": "HACK:",
            "backgroundColor": "blue"
        }
    ]

Rainbow CSV

拡張子.csvの中身に配色をしてくれます。とても見やすくなるのでぜひこの際に入れてみてください！

zenkaku

全角の部分をハイライトしてくれます。

1. コマンド + shift + P
2. zenkakuと入力
3. Enable zenkaku を選択

Bracket Pair Colorizer2

見た目は↓のようになります。

以下は僕の設定です。

    "bracket-pair-colorizer-2.colors": [
        "#ff3366",
        "#ff3366",
        "#ff3366"
    ]

simple icons

拡張機能一覧（構文解析・補完）

Auto Close Tag + Auto Rename Tag

Auto Complete Tagというパッケージがあるので、これをインストールすれば両方インストールできます。

Auto Close Tag　→　HTMLの閉じタグを自動化
Auto Rename Tag　→　片方のタグを編集する際対応するタグも自動修正

HTMLHint

　HTMLHintをインストールすると、HTMLの構文解析を自動で行ってくれます。インストールするだけで機能するので、特に設定は必要ありません。

僕がやっているVSCodeの設定

※随時追加予定。

言語ごとにインデント設定

1. setting.jsonを開く
2. 以下を参考に記述

{
    // デフォルトの設定
    "editor.tabSize": 4,

    // 言語ごとの設定
    "[javascript]": {
        "editor.tabSize": 2,
        "editor.insertSpaces": true
    },
    "[python]": {
        "editor.tabSize": 4,
        "editor.insertSpaces": true
    },
    "[shellscript]": {
        "editor.tabSize": 4,
        "editor.insertSpaces": true
    }
}

上記のように記述することで、タブを押した際のインデント幅を変更したり、設定したりできます。

言語名のところですが、command + shift + Pでコマンドパレットを開き、Preferences: Configure Language Specific Settingsと入力すると言語の名称が一覧で表示されるので参考にします。

例えば、Shell Scriptとあったら、[shellscript]と書きます。

設定前に作成したファイルに関しては、変更が適用される訳ではないので、手動で変更する必要があります。右下の（スペース: 4）みたいに買いてあるところをクリックして変更できます。

詳しくは、公式ドキュメントを参考にしてみてください！

プロジェクトごとにバーに配色する

1. プロジェクトルートに.vscode/ディレクトリを作成
2. .vscode/settings.jsonを作成
3. 以下のように記述

{
  "workbench.colorCustomizations": {
      "titleBar.activeBackground": "#dcbc06",
      "titleBar.activeForeground": "#000000",
      "activityBar.background": "#FFD700",
      "activityBar.foreground": "#000000"
  }
}

参考サイト

・Docker
・Vetur
・Python

Python 3入門+応用+アメリカのシリコンバレー流コードスタイルを学ぶオンライン講座