VS Codeでコードがさらに見やすくなる！ネストされたブロックを強調表示するVS Codeの機能拡張「Blockman」

Post on:2023年2月27日

Blockmanの特徴

Blockmanは、コードのネストされたブロックを強調表示するためのVS Code拡張機能です。

サポートしている言語は、JavaScript, JSX, TypeScript, TSX, C, C#, C++, Java, Ruby, PHP, R, Go (Golang), Dart, Rust, Swift, PowerShell, SQL, HTML, CSS, LESS, SCSS, Python, Yaml など。

Blockmanを使用すると、下記のようにネストされたブロックが枠で強調表示されます。

左: Blockman使用前、右: Blockman使用後

ブロックの有効化・無効化は簡単に切り替えることができ、特定のファイル形式だけ無効にするという使い方もできます。

Blockmanのインストール

Blockmanは通常のVS Codeの機能拡張と同じ、マーケットプレイスからインストールします。

Blockman -Visual Studio Marketplace

「Install」をクリックすると、VS Codeで開くか？とダイアログが表示されるので「開く」をクリックして、VS Codeで開いて「インストール」をクリックします。

「インストール」ボタンをクリック

Blockmanの使い方

VS CodeでBlockmanを使用するには、settings.jsonに下記を記述します。
※すでに記述済みのものがある場合は、重複になるので削除します。

// settings.json (User/Global config, not Workspace config)
// To open this file in VS Code, press F1, type 'settings json' and choose 'Preferences: Open Settings (JSON)'
{
    // ...
    "editor.inlayHints.enabled": "off",
    "editor.guides.indentation": false, // new API for indent guides. The old one is: "editor.renderIndentGuides": false,
    "editor.guides.bracketPairs": false, // advanced indent guides (But only for brackets) (This does not turn off editor.bracketPairColorization)
    "editor.wordWrap": "off",
    "diffEditor.wordWrap": "off",

    "workbench.colorCustomizations": {
        // ...
        "editor.lineHighlightBorder": "#9fced11f",
        "editor.lineHighlightBackground": "#1073cf2d"
    }
}