The best TypeScript IDEs

TypeScript is a widely popular language that powers large web frameworks like Angular to small personal projects. But, before working on any TypeScript project, developers must choose an integrated development environment (IDE) to use, and they’re certainly not short on choice.

There are many IDEs available, each with a different feature set and design ethos. In this article, we’ll compare some of the most popular IDEs based on the following criteria:

• Ease of use
• Extensibility (availability of plugins)
• Performance
• Debugging ability

These IDEs include:

• Visual Studio Code
• WebStorm
• Visual Studio 2019/2022

To help guide us on this journey, we’ll use this sample TypeScript project.

One last thing to cover: what IDE you choose to use heavily depends on your personal preferences and what you like about a development environment.

You’d be surprised how heated the “my IDE is better than your IDE” arguments can get; at the end of the day, choose something that works for you, and remember you can switch at any time.

Visual Studio Code

The most obvious IDE to talk about in this setting is Visual Studio Code (hereafter referred to as VS Code). Used by over 24 million developers, VS Code enjoys quite a healthy following, mainly because it runs almost anywhere and has reasonable hardware requirements.

The platforms it supports are Windows, Linux, and macOS.

Visual Studio Code ease of use

The way that VS Code works is intuitive to pretty much any developer who opens it. The large text editing window enables viewable code and the folder structure on the left lets you navigate around your project with ease.

We made a custom demo for .
No really. Click here to check it out.

Click here to see the full demo with network requests

You can also easily switch between branches via the bottom left of the window and change languages between HTML, TypeScript, and CSS via the language switcher on the bottom right.

Because VS Code and TypeScript were created by Microsoft, the editor support for TypeScript is predictably strong.

Visual Studio Code extensibility

In terms of extensibility, there are over 30,000 extensions available for VS Code, so there’s a good chance you’ll find exactly what you’re after in terms of extensions.

Visual Studio Code performance

VS Code performs well on pretty much any workstation and even functions on low-powered devices like a Raspberry Pi. On my Ryzen 3700X workstation with 32GB of RAM, VS Code loads our sample project in only a few seconds:

Another thing we see in the above animation is a contextual suggestion of what extensions to install to help manage projects. In this case, it’s the ESLint and Azure Databases extensions.

ESLint gives developers feedback on whether their code is compliant with best practices, and Azure Databases helps manage the database that the sample project uses.

On the topic of extensions, sometimes the quality of the extensions can vary substantially. If you install a lot of extensions, or just use some poorly optimized ones, the performance of VS Code can really begin to suffer.

In this case, it can be difficult to work out what extension is causing the slow performance, which can become frustrating.

With our project open, Visual Studio Code uses only 258MB, making it a good choice for people with workstations with fewer resources.

Visual Studio Code debugging ability

With VS Code, we can easily set breakpoints for a TypeScript application and see the values of variables while our application pauses on a breakpoint. Everything you could ever want or need to troubleshoot a TypeScript application is here.

One major caveat to this is the inability within VS Code to tear tabs off and place them elsewhere on your screen.

When you troubleshoot an app that is fairly large in size and trace function calls through multiple files, the ability to easily split up the open files on your screen is something that is not easily done without.

The issue tracking this problem has been open since 2016 and shows no signs of changing soon. For me, the inability to do this within VS Code is a dealbreaker, and I couldn’t use it for a larger project.

VS Code pros and cons

So, in summary for VS Code, the pros for using the IDE is that it:

• Runs almost anywhere
• Has great performance
• Has a huge user base with lots of extensions and configuration options

VS Code’s cons include:

• It can’t tear tabs off into new windows
• Extensions can greatly decrease performance

WebStorm

Another editor that is popular in the TypeScript space is WebStorm by JetBrains. WebStorm is more like a conventional IDE in that it includes a lot more functionality out of the box than VS Code, but also has more substantial performance requirements to match this.

We can see this almost immediately because WebStorm visualizes the README.md file correctly, whereas VS Code leaves it in the original format.

The platforms WebStorm supports are Windows, macOS, and Linux.

WebStorm ease of use

Because WebStorm includes so many features, it’s easy to get lost in it or have a hard time familiarizing yourself with the editor. After about a week of use, you’ll know where most of the major functions reside.

The included support for everything you need for a TypeScript project is excellent, and whether you have a small TypeScript project or a gigantic Angular project, WebStorm can handle either with relative ease.

WebStorm also uses the TypeScript Language Service to perform runtime checks on your TypeScript code, so issues are spotted early on. An example of this TypeScript support can be seen in how WebStorm advertises the name of parameters that you use on functions.

Sometimes, it can be hard to know what the intent of a constructor signature is, especially when you start with a certain library or framework that uses TypeScript.

However, WebStorm tells you the name of the constructor parameter that you’re using, which is really helpful when you can’t remember what the parameter does, like so:

Most of the projects you work on in TypeScript will likely include a package.json for the other packages that are installed in your project via npm. WebStorm includes the option to show the run options that are available in this package.json by simply right-clicking on the file and selecting Show npm scripts.

This shows us all the npm scripts that are configured for this project, so we can easily run any of the package.json scripts.

The ability to execute npm scripts directly from your IDE speeds up your development workflow because you don’t need to keep writing npm run in your terminal.

Finally, and it’s not directly related to TypeScript, but WebStorm also provides strong tooling support for frameworks that use TypeScript, such as Angular. It’s slightly outside of the scope of this article, but worth bearing in mind if you use a framework like Angular.

WebStorm extensibility

There are only 2916 plugins available for WebStorm, but, because so much of the functionality that you use is already part of WebStorm, there’s definitely less reliance on third-party plugins.

I use WebStorm for a fairly large Angular project and I haven’t needed to install any third-party libraries or plugins.

With VS Code, for example, you must install tooling support for TypeScript and other functionalities like npm. Visual Studio 2019/2022 comes with TypeScript support but lacks npm support out of the box.

Because third-party developers maintain these extensions, the quality of implementation can vary. But with Webstorm, the TypeScript functionality ships with WebStorm, meaning it’s a first-party component and the quality and functionality are part of the core product.

Because all my required functionality is part of the core WebStorm offering, it means that I can be confident of the quality and support of the tooling (as opposed to an open source plugin on GitHub that could be abandoned at any time).

WebStorm performance

Because WebStorm is more like a traditional IDE, it requires better hardware components to run well. While it uses more memory and can take longer to start up, once it’s open, the performance can be quite good.

With our project loaded, the memory footprint is nearly a gigabyte (982.7MB in total, according to Task Manager).

Compared to VS Code’s paltry memory footprint, this means that VS Code uses much less memory than WebStorm. Of course, WebStorm has a lot more functionality and is more advanced than VS Code, so this could explain the difference in memory usage.

Despite this substantial increase in memory use, WebStorm remains quick to open and use. On first launch, WebStorm indexes your TypeScript project, so searching through your project and carrying out refactoring is a fast experience.

As shown below, WebStorm opens a project in only a couple of seconds on my computer.

As you’re more likely to use the built-in WebStorm functionality and not depend on potentially slow plugins, WebStorm itself runs at a fairly consistent pace.

WebStorm debugging ability

All of the debugging functionality that you could want is in WebStorm. You can set breakpoints per usual as well as conditional breakpoints.

WebStorm ships with great support for TypeScript, so you get the support from the start without installing any extensions to the core app.

This also extends itself to integration for WebPack configuration files and packages.json, which helps any development workflow.

Furthermore, you can tear off the tabs in the editor, so you can easily track through multiple files at a time to find a particular issue or bug that you’re chasing. It also has great built-in support for Git, so you can easily visualize who made a change on a certain line.

Personally, I really like WebStorm. It’s not free, but it saves me a lot of time writing and debugging my TypeScript apps, and it has a 30-day free trial.

WebStorm pros and cons

In summary, WebStorm’s pros include:

• A great built-in feature set
• Good performance
• Can tear off the tabs to make new windows

While its one con is that WebStorm is not entirely free, it is free for open source projects or academic usage.

Visual Studio 2019/2022

WebStorm and VS Code are definitely the biggest contenders in this space, but a lot of Windows developers who have Visual Studio 2019 or 2022 find it easy to work on their TypeScript projects in the IDE they already know and love.

Note that this is specifically about Visual Studio for Windows. Visual Studio also exists for Mac but it is a completely different product with significantly fewer features than its Windows counterpart.

Visual Studio ease of use

Visual Studio has been around for a long time and it benefits from a considerable amount of developers who know how it works. It was created primarily for .NET development, so while it supports TypeScript, the functionality is not on the same level as VS Code or WebStorm.

Visual Studio extensibility

Visual Studio also provides a large number of extensions for developers, and you’ll certainly need to use them because, for example, Visual Studio isn’t natively aware of things like npm tasks, so you’ll need to use an extension to do that for you.

Out of the box, it’s not really designed for pure TypeScript projects, but some starter projects use Angular (which uses TypeScript), so it probably has enough to get you by for smaller projects.

Visual Studio performance

While Visual Studio is not sluggish, it’s not as fast as VS Code or WebStorm. If you were working on a hybrid application that used .NET for the API or website, and TypeScript for the client app, then Visual Studio is an acceptable compromise.

We start to get an idea of this performance by opening our sample app, and Visual Studio is easily the slowest to open the project out of our other options.

Visual Studio is also not aware of our packages.json, leaving us to install an extension that can run our npm tasks. We also don’t get the contextual hints for function invocation like we get in WebStorm, so it’s a little bit less precise.

Visual Studio also comes in somewhere in the middle in terms of memory usage, occupying almost 300MB with our sample project loaded:

Visual Studio is best suited to projects that use TypeScript but also use other technologies. For example, if you have a TypeScript project that uses a .NET Web API backend, you can stay in one editor to manage both sides of your project.

Visual Studio 2022 also improves upon the TypeScript support, and will likely continue to get better in the future. However, it’s probably not the best choice if you are solely writing a TypeScript web app.

Visual Studio debugging ability

After some initial setup, you can set breakpoints and inspect your code as it runs in Visual Studio, however, the support isn’t as good as WebStorm or VS Code.

Visual Studio pros and cons

With our understanding of Visual Studio, let’s look at its pros:

• Already known by many Windows developers
• Can tear off the tabs to make new windows
• Free (with some limitations)

However, the cons may outweigh the pros:

• Not as fast as VS Code or WebStorm
• The base product isn’t aware of npm tasks and requires plugins to get it to work

Conclusion

We’re not light on choices when it comes to deciding what IDE to use for TypeScript projects. In short, if you are just starting out and can’t afford a full WebStorm license, you should use VS Code.

But, if you’re working on larger projects and can afford a license, you should definitely use WebStorm.

And finally, even if you already have Visual Studio, you’ll be better suited to using another IDE for your TypeScript parts. In my case, I usually have Visual Studio open for my .NET API work, and WebStorm open for my Angular work. In that configuration, I find it works really well.

But, ultimately, whatever you use will be up to you. So, choose an IDE and enjoy the development! 👨‍💻👩‍💻

Writing a lot of TypeScript? Watch the recording of our recent TypeScript meetup to learn about writing more readable code.

TypeScript brings type safety to JavaScript. There can be a tension between type safety and readable code. Watch the recording for a deep dive on some new features of TypeScript 4.4.