ArticleIntroductionText

Created by Microsoft in 2015, VS Code has become very popular since its initial release. Stack Overflow ranked it as the number one IDE of choice among developers in a 2021 survey. Here are some quick hints to help utilize it to the max.

Text

<p>If you have ever used github1s.com for a quick repository preview, you might be interested in using VS Code for the web, now built into GitHub. To open, simply press dot while on the repository page. Alternatively, you might swap <code>github.com/user/repository</code>&nbsp;for&nbsp;<code>github.dev/user/repository.</code></p>

<h2>Super High-Performance Bracket Pair Colorization</h2>

<p>
  The August 2021 release of Visual Studio Code brought high-performance bracket
  pair colorization. If you are using the famous&nbsp;<a
    href="https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2"
    rel="noopener noreferrer nofollow"
    target="_blank"
    >Bracket Pair Colorizer extension by CoenraadS</a
  >, you might consider replacing it for a superior programming experience.
</p>
<p>In order to do so, you need to go through the following steps:</p>
<ol>
  <li>Uninstall Bracket Pair Colorizer (2)</li>
  <li>Reload VS Code window (cmd+shift+P+”reload window”+enter)</li>
  <li>
    Open VS Code settings in JSON format (cmd+shift+P+“settings json”+enter)
  </li>
  <li>Add the following to your configuration:</li>
</ol>


CodeBlock

<p>You may also want to bring (optional) a familiar color scheme from Bracket Pair Colorizer by adding:</p>

<p>If you would like to customize the colors for a given theme only (e.g. if the above colors do not provide sufficient contrast), you might do so by including a key with theme name in&nbsp;<code>workbench.colorCustomizations</code>&nbsp;object:</p>


  Other neat features of the aforementioned VS Code release that you might want
  to opt in include:


<h3>Inline Suggestions in Autocomplete</h3>

<div>To enable it, extend your settings object with</div>

Image

Visual Studio Code - effect of applying inline autocomplete suggestions

ImageDescription

Effect of applying inline autocomplete suggestions

<h3>Inlay Hints for JavaScript and TypeScript</h3>

<p>
  Enabling this feature will show inline type annotation of the parameter names.
</p>
<p>You can enable this feature by adding:</p>


<p>to your settings with one of the below values:</p><ul><li>“none”</li><li>“literals” — only show inlay hints for literals (string, number, Boolean).</li><li>“all” — show inlay hints for all arguments.</li></ul>

Visual Studio Code - effect of applying parameter name inlay hints

Effect of applying parameter name inlay hints

<p>This feature will display the type of variables with no explicit type annotation — inferred from context.</p>

Visual Studio Code - effect of applying variable type inlay hints

Effect of applying variable type inlay hints

<div>This feature will show the type of class properties that don’t have an explicit type annotation.</div>

Visual Studio Code - effect of applying property type inlay hints

Effect of applying property type inlay hints

Visual Studio Code - effect of applying parameter type inlay hints

Effect of applying parameter type inlay hints

Visual Studio Code - effect of applying return type inlay hints

Effect of applying return type inlay hints

<div>If you’d like to test all of the above type annotations, extend your settings with the following. Keep in mind though, code can easily get a bit cluttered, so mix and match to your liking.</div><div><br></div><div>for TypeScript:</div>

<p>Additional highlighting was added to improve the visibility of the scope of a current bracket pair.</p><p>Bracket pair guides are enabled by setting `editor.guides.bracketPairs: true`. There is also a possibility to set this property to `active` so that the guides are only visible when the cursor is inside the code block.</p><p>The new setting editor.guides.bracketPairsHorizontal controls if and when to render horizontal guides (defaults to active).</p>

Visual Studio Code - bracket pair guides in action

<h2>Enhance Your Visual Studio Skills</h2>

<p>These are just some of the nice touches that might help you improve your experience using Visual Studio Code.</p><p>You can read more about VS Code for the web here: </p><ul><li><a href="https://code.visualstudio.com/docs/editor/vscode-web" rel="noopener noreferrer" target="_blank">Visual Studio Code for the Web</a></li></ul><p>If you’re interested in how the super-performant bracket pair colorization was implemented you can check out the article here:</p><ul><li><a href="https://code.visualstudio.com/blogs/2021/09/29/bracket-pair-colorization" rel="noopener noreferrer" target="_blank">Bracket pair colorization 10,000x faster</a></li></ul><p>I hope you find these tips useful and can use them in your everyday work.</p>

DotsDivider

<p><em>Mirumee guides clients through their digital transformation by providing a wide range of services from design and architecture, through business process automation to machine learning. We tailor services to the needs of organizations as diverse as governments and disruptive innovators on the ‘Forbes 30 Under 30’ list.</em></p><p><em>Learn more about who we are and what we do. Have a look through the open positions </em><a href="https://mirumee.com/careers/?utm_campaign=article&amp;utm_medium=internal_link&amp;utm_source=art_visual_studio_quick_bits" rel="noopener noreferrer" target="_blank"><em>here</em></a><em> and become a part of our team.</em></p>

m-zine

Author

Jan Chodorowski

Articles

Visual Studio Code — Quick Bits

Author

Articles

Jan Chodorowski

Visual Studio Code — Quick Bits

Let’s engineer great products and systems together