括弧の開始と終了が色でわかる！ Bracket Pair Colorizer 2

JavaScriptやTypeScriptなどプログラミング言語によっては括弧の終了がどれなのか分かりにくくなることが多々あると思います。

そんなときは、Bracket Pair Colorizerをインストールすると色でわかるようになります。

Bracket Pair Colorizer とは

Bracket Pair Colorizer は、括弧の開始と終了が色でわかるようになる Visual Studio Code の拡張機能です。

以下のように、ネストが深くなるにつれて色が変わっていきます。

インストール方法

Visual Studio Code の拡張機能で「Bracket Pair Colorizer 2」と検索してインストールをクリックします。

サンプル

Version1 と Version2 の違い

Bracket Pair Colorizer は 1 と 2 の２種類があります。

これらの違いは、Bracket Pair Colorizer 2 の拡張機能のページに以下のように説明されています。

Differences between v1 and v2? v2 Uses the same bracket parsing engine as VSCode, greatly increasing speed and accuracy. A new version was released because settings were cleaned up, breaking backwards compatibility.

v1とv2の違いは？ v2はVSCodeと同じ解析エンジンを使用しています。この解析エンジンは精度とスピードがかなり改善されています。 新しいバージョンは、設定のクリーンアップと下位互換性の解除のためにリリースされました。

注意事項

Bracket Pair Colorizer は2021年11月現在メンテナンスされていないようです。

Highlight Matching Tag や Blockman などの類似拡張機能をチェックしてみてください。

Visual Studio Codeは機能ありすぎ！

Visual Studio Codeはオープンソースのコードエディタです。

コードエディタと言いつつも、デバッグもできますし簡易Webサーバも立てられますし、ソースコード中のTODOを検索してツリー表示することもできます。

インストール可能な拡張機能の数は30,000以上と言われており、とても便利な機能が数多くあります。

そのため、Visual Studio Codeを使いこなすには、それなりの情報収集が必要です。

「Visual Studio Code実践ガイド」は、

• Visual Studio Codeの基本的な使い方
• TypeScriptやPythonなど、実際の開発を通した Visual Studio Code機能の紹介
• Visual Studio Code拡張機能の開発方法の紹介

などが収録されており、Visual Studio Codeの機能を体系的に理解するのに最適な書籍です。

電子書籍化されていますので、まずは kindleなどで試し読みしてみてはいかがでしょうか。