こんにちは。職業「戸倉彩」です。
VS Codeでプログラミングをしている際に、ブラケットペアをもう少し分かりやすく表示させて作業効率化がはかれたら良いなと感じたことはありませんか。今回は、VS Codeでブラケットペアの範囲を可視化する方法の紹介です。
<h2 id="vs-code-1.62-%E6%96%B0%E6%A9%9F%E8%83%BD---%E6%94%B9%E8%89%AF%E3%81%95%E3%82%8C%E3%81%9F%E3%83%96%E3%83%A9%E3%82%B1%E3%83%83%E3%83%88%E3%83%9A%E3%82%A2%E3%82%AC%E3%82%A4%E3%83%89">
<a class="header-anchor-link" href="#vs-code-1.62-%E6%96%B0%E6%A9%9F%E8%83%BD---%E6%94%B9%E8%89%AF%E3%81%95%E3%82%8C%E3%81%9F%E3%83%96%E3%83%A9%E3%82%B1%E3%83%83%E3%83%88%E3%83%9A%E3%82%A2%E3%82%AC%E3%82%A4%E3%83%89" aria-hidden="true"></a> VS Code 1.62 新機能 - 改良されたブラケットペアガイド</h2>
VS Codeバージョン1.62の変更点の一つとして、ブラケットペアをガイドする機能が改良されました。
<blockquote>
参考情報: <a href="https://code.visualstudio.com/updates/v1_62" target="_blank" rel="nofollow noopener noreferrer">VS Code 1.62 リリースノート (October 2021)</a> 
Editor - Improved bracket pair guides 
<img src="https://res.cloudinary.com/zenn/image/fetch/s--IxZaty1d--/https://code.visualstudio.com/assets/updates/1_62/bracket-pair-guides.gif" alt loading="lazy" class="md-img">
</blockquote>
<h2 id="%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95">
<a class="header-anchor-link" href="#%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95" aria-hidden="true"></a> 設定方法</h2>
<ol>
<li>VS Codeを起動する</li>
<li>画面左下の「管理」アイコン(歯車アイコン)をクリックする</li>
<li>
[設定] ページ内の検索ボックスで [editor.guides.bracketPairs] を検索する</li>
<li>
Editor &gt; Guides: Bracket Pairs 項目がデフォルトではオフ [false] になっているので、ドロップダウンメニューで下記のいづれかに変更する。
<ul>
<li>
active: アクティブなブラケットペアに対してのみ有効にする</li>
<li>
true: ブラケットペアガイドを有効にする 
<img src="https://res.cloudinary.com/zenn/image/fetch/s--pBpjIWQX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/d273d0638fe333a503873f48.png%3Fsha%3De9bd68be4f0c62179cc5964f2d645405090d4e7d" alt loading="lazy" class="md-img">
</li>
</ul>
</li>
</ol>
今回は以上です 🙌
📱 Twitter <a href="https://twitter.com/ayatokura" target="_blank" rel="nofollow noopener noreferrer">@ayatokura</a> で、最新情報も配信していますので、よろしければフォローも是非お願いします。

VS Codeでブラケットペアの範囲を可視化する方法

VS Code 1.62 新機能 - 改良されたブラケットペアガイド

Discussion