これは便利、VS Codeの設定を変更しよう!v.1.60のアップデートで、ブラケットのカラー化にネイティブ対応

VS Codeがどんどん便利になっていきますね。
先日のv.1.60のアップデートで、ブラケットのカラー化に対応しました!

VS Codeの設定を変更するだけで、開始と終了のブラケットをセットで同じカラーにします。今までは機能拡張を入れないとできなかったことが、ネイティブ対応したのは朗報です。

VS Code 1.60のアップデートで、ブラケットのカラー化にネイティブ対応

上: 今まで、下: v.1.60でブラケットがカラー化

VS Code v.1.60のアップデートは、下記の通りです。

サイトのキャプチャ

Visual Studio Code: August 2021 (version 1.60)

  • 自動言語検出 - VS Codeにペーストする際にプログラミング言語を検出します。
  • ビルトイン高速ブラケットカラー化 - 大規模ファイルでも高速にブラケットのマッチングとカラー化。
  • 設定エディタのシンタックスハイライト - 設定のコードブロックでリッチなシンタックスハイライトに対応。
  • ターミナルでグリフのレンダリング - ボックス描画とブロック要素文字の表示が改善。
  • デバッグウォッチ値の設定 - デバッグセッション中にウォッチ値を変更します。
  • ノートブックの改善 - Markdownリンクのナビゲーション、大きな出力のレンダリングを高速化。
  • JavaScript/TypeScriptのインレイヒント - パラメータ名やタイプなどのインラインヒントを提供。
  • ロックされたエディタグループのプレビュー - エディタグループをロックすることで、好みのエディタレイアウトを維持。
  • Python拡張テストの更新-テストの検出、ナビゲーション、ステータスのサポートが向上。
  • Web拡張機能のオーサーガイド - ブラウザでVS Codeの拡張機能を更新する方法を学べます。

上記の中から、ブラケットのカラー化に注目です!

ブラケットのカラー化はBracket Pair Colorizer 2という機能拡張が有名ですが、パフォーマンス面で問題がありました。そこで、VS Codeにネイティブに実装されました。

どんな感じかというと、今まではブラケットは開始も終了も同じカラーで、開始と終了のペアを探すのも大変でした。

今までのブラケット

今まで

VS Code v.1.60にアップデートすると、設定を変更するだけで、開始と終了のブラケットをセットで同じカラー(最大6種類)にします。使用しているテーマに沿った色味になります。

v.1.60でブラケットがカラー化

v.1.60でブラケットがカラー化

設定変更は、簡単です。
設定(歯車アイコン)をクリックします。

VS Codeの設定画面

VS Codeの設定画面

「設定の検索」に、「editor.bracketPairColorization.enabled」を入力し、チェックボタンをオンにします。

VS Codeの設定画面

チェックボタンをオンに

これで、ブラケットのカラー化が完了です。
いくつまで対応しているか確認してみました。

ブラケットのカラー化

6種類のカラーでカラー化

今回使用したテーマファイルは、最近お気に入りの「ドラキュラ」です。
背景は落ち着いたダークで、テキストの鮮やかなカラーがはっきりとしていて見やすいです。

サイトのキャプチャ

Dracula Theme

VS Codeでは、便利な機能拡張がたくさんあります!
例えば、タグを変更する時に対応するもう一つのタグも変更してくれる機能拡張とかもあります。

VSCodeの機能拡張

2021年、VS Codeのおすすめ機能拡張のまとめ、HTMLやCSSやJavaScriptなどのコードを書く時に便利

sponsors

top of page

©2021 coliss