The Startup
Published in

The Startup

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

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.

--

--

--

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +756K followers.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jeong Woo Chang

Jeong Woo Chang

Software Engineer

More from Medium

ESLint + Prettier + Typescript and React in 2022

No React-Create-App Script

Setting up an opinionated starter NestJS Starter TypeScript Project with must-have libraries

ReSvelte- A Svelte Developer Tool and Component Tree Visualizer (VS Code Extension)