{"id":242472,"date":"2023-04-21T09:00:34","date_gmt":"2023-04-21T16:00:34","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/visualstudio\/?p=242472"},"modified":"2023-04-21T11:21:05","modified_gmt":"2023-04-21T18:21:05","slug":"improving-the-syntax-highlighting-of-javascript-in-visual-studio","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/improving-the-syntax-highlighting-of-javascript-in-visual-studio\/","title":{"rendered":"Improving the Syntax Highlighting of JavaScript in Visual Studio"},"content":{"rendered":"

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<\/a>, we decided to work on improving the JavaScript and TypeScript experience!<\/p>\n

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.<\/p>\n

This post walks you through these changes and how you can configure and personalize your own!<\/p>\n

\"Banner<\/p>\n

 <\/p>\n

Overview<\/h2>\n

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.<\/p>\n

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

 <\/p>\n

Examples<\/h2>\n

Look at these screenshots from before and after this change:<\/p>\n