Fix VSCode Syntax Highlighting with TypeScript 3.7+
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.
When I was writing this post, I used VS Code v1.40.1 and Node.js v12.13.0.
Go to your project root directory and run this.
npm install firstname.lastname@example.org
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
✍️Use Your TypeScript Version
In your VS Code, Go to
View > Command Palette and type
Select TypeScript Version.
Use the installed version, 3.7.2.
🔨Install VS Code Extensions
In your VS Code, go to
View > Extensions and install
🎉️Syntax Highlighting Fixed
Compare this code syntax highlighting with the one in No Configuration Yet section.
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.