Fix VSCode Syntax Highlighting with TypeScript 3.7+

Photo by Vincentiu Solomon on Unsplash

In TypeScript 3.7, there are some interesting new features like optional chaning and nullish coalescing. When I tried to install and configure to try using new features, there were some syntax highlight breaking and my VS Code was not able to detect the new features correctly. Now I know how to resolve them and I would like to share them.

📃Prerequisite

• Visual Studio Code
• Node.js

When I was writing this post, I used VS Code v1.40.1 and Node.js v12.13.0.

🎷Install TypeScript

Go to your project root directory and run this.

npm install typescript@3.7.2

The latest TypeScript version is 3.7.2 now. If you want to try out the latest stable version, you can omit the @ with version specification at the end.

🤬No Configuration Yet

Optional chaining is not recognized correctly and it breaks syntax highlighting

✍️Use Your TypeScript Version

In your VS Code, Go to View > Command Palette and type TypeScript.

VS Code Command Palette

Choose Select TypeScript Version.

Choosing a TypeScript version to use via Command Palette

Use the installed version, 3.7.2.

🔨Install VS Code Extensions

In your VS Code, go to View > Extensions and install Latest TypeScript and JavaScript Grammar.

This extension allows VS Code to pick up the latest TypeScript syntax

🎉️Syntax Highlighting Fixed

Compare this code syntax highlighting with the one in No Configuration Yet section.

Beautiful VS Code Syntax Highlighting with TypeScript 3.7+

VS Code recognizes the new optional chaining syntax correctly and also there are no more red squiggles.

VS Code is required to use the correct TypeScript for compiling and needed the latest TypeScript grammar extension to recognize the new syntax appropriately.