Syntax highlighting, aka colorization, is one of Visual Studio’s essential features; it uses colors and styles to help guide our brains when reading code. Following this Developer Community suggestion, we decided to work on improving the JavaScript and TypeScript experience!

Starting from 17.6 we improved existing colorization and expanded it to new areas including control keywords, strings in tags, escape characters, JSDocs, and more.

This post walks you through these changes and how you can configure and personalize your own!

OverviewSyntax highlighting is a Visual Studio feature that differentiate various parts of the code according to their meaning, such as keywords, variables, and comments. This makes your code easier to read and understand by visually distinguishing the elements of the source code.

To increase the efficiency of your code maintenance, we have remapped the TypeScript and JavaScript source code into new Display items. With this change, Visual Studio is now able to apply more granular styles and higher personalization. You can read more about Display items here.

ExamplesLook at these screenshots from before and after this change:

  • Control keywords are mapped to the Keyword – Control display item.

  • Types are mapped to the Type display item. You can also distinguish between HTML tags and React components!

  • Variables are mapped to the User Members – Locals display item. You can distinguish them better inside JSX as well, check {count} for example!

  • Escape characters are mapped to the String – Escape Character display item, making them distinguishable when within a string.

  • Parameter names are mapped to the User Members – Parameters display item. Values are assigned with their correct classification as well!

  • Methods are mapped to the User Members – Methods display item.

  • JSDoc tags are mapped to the Keyword display item.

Personalize the syntax highlightingAll the different parts of the source code are mapped to a Display item that defines the style of the editor. Visual Studio provides an effortless way to personalize them.

To access these settings, go to Tools > Options > Environment > Fonts and Colors and select Text Editor from the Show settings for dropdown. Select the Display item and set the Item foreground, Item background, Font, and Size to the options you want.

For example, if you want variables to be White, you can choose the display name User Members – Locals and change the Item foreground to White:

Let us know what you think!We hope you like the new experience. If you found an issue or would like to suggest a change, follow this link to Visual Studio Feedback and fill out a feedback ticket. We will be happy to hear about it!

The post Improving the Syntax Highlighting of JavaScript in Visual Studio appeared first on Visual Studio Blog.

See All 224 Episodes of "Visual Studio Blog"