Improving the Syntax Highlighting of JavaScript in Visual Studio

Armando Aguirre

April 21st, 20236 5

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!

Banner displaying a side by side meaningless source code

 

Overview

Syntax 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.

 

Examples

Look at these screenshots from before and after this change:

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

Before and after comparison of the new syntax highlight of control keywords

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

Before and after comparison of the new syntax highlight of types

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

Before and after comparison of the new syntax highlight of variables

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

Before and after comparison of the new syntax highlight of escape characters

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

Before and after comparison of the new syntax highlight of parameter names

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

Before and after comparison of the new syntax highlight of methods

  • JSDoc tags are mapped to the Keyword display item.

Before and after comparison of the new syntax highlight of JSDoc reserved words

 

Personalize the syntax highlighting

All 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:

Options window displaying an example of how to customize the variables color

 

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!

Armando Aguirre Software Engineer, TypeScript and JavaScript Team