Comparing the best TypeScript IDEs

Editor’s note: This article was last updated 16 September 2022 to include new features released in Visual Studio 2022.

TypeScript is a widely popular language that is used to power everything ranging from large web frameworks like Angular to small personal projects. But, before working on any TypeScript project, developers must choose from the many available integrated development environments (IDEs).

There are many IDEs available for TypeScript, each with a different feature set and design ethos. In this article, we’ll compare some of the most popular IDEs based on ease of use, extensibility and availability of plugins, performance, and debugging ability. These IDEs include Visual Studio Code, WebStorm, and Visual Studio 2022.

To help guide us through this comparison, we’ll use this sample TypeScript project.

Keep in mind that whatever IDE you choose will depend heavily on your personal preferences and what features you like in 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, you should choose something that works for you, and remember you can switch at any time.

Table of contents

• Visual Studio Code
  • Ease of use
  • Extensibility
  • Performance
  • Debugging ability
  • VS Code pros and cons
• WebStorm
  • Ease of use
  • Extensibility
  • Performance
  • Debugging ability
  • WebStorm pros and cons
• Visual Studio 2019/2022
  • Ease of use
  • Extensibility
  • Performance
  • Debugging ability
  • Visual Studio pros and cons

Visual Studio Code

Visual Studio Code (VS Code) is probably the most obvious IDE to talk about. Used by over 24 million developers, VS Code enjoys quite a healthy following, mainly because it runs almost anywhere and has reasonable hardware requirements. VS Code supports Windows, Linux, and macOS platforms.

Ease of use

VS Code’s UI is intuitive to pretty much any developer who opens it. The large text editing window enables code that is easy to view, and the folder structure on the left lets you navigate around your project with ease:

You can also easily switch between branches via the bottom left of the window, and you can 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’s support for TypeScript is predictably strong.

Extensibility

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

Performance

VS Code performs well on basically any workstation, even functioning 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 to note in the animation above is a contextual suggestion of what extensions to install to help manage your project. 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.

Sometimes, the quality of the extensions can vary substantially. If you install a lot of extensions, or use poorly optimized ones, VS Code’s performance can really begin to suffer. It can be difficult to determine which extension is causing the slow performance, which can quickly become frustrating.

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

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.

However, 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, tracing function calls through multiple files is not easy to do without the ability to split up the open files on your screen.

The issue tracking for this problem has been open since 2016 and shows no signs of changing soon. For me personally, 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

In summary, the pros of using VS Code as an IDE include:

• Runs almost anywhere
• Great performance
• Has a huge user base with lots of extensions and configuration options
• Open source and free to use

However, 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 more functionality out of the box than VS Code. However, it 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:

WebStorm supports Windows, macOS, and Linux platforms.

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. However, after about a week of use, you’ll know where most of the major functions reside.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

WebStorm includes support for everything you need for a TypeScript project. 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 you can spot issues early on. An example of this TypeScript support is 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 that you work on in TypeScript will likely include a package.json file 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, WebStorm also provides strong tooling support for frameworks that use TypeScript, like Angular. It’s slightly outside the scope of this article, but it’s worth bearing in mind if you use a framework like Angular.

Extensibility

There are only 3,402 plugins available for WebStorm at the time of writing, but because so much of the functionality that you’ll need is already part of WebStorm, there’s definitely less reliance on third-party plugins. I’ve used 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. Both the 2019 and 2022 versions of Visual Studio come with TypeScript support but lack npm support out of the box.

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

All of my required functionality is part of the core WebStorm offering, therefore, 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.

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.

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 the 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.

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

Debugging ability

Put quite simply, WebStorm has all of the debugging functionality that you could ever want. You can set breakpoints as 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, helping 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 saves me a lot of time writing and debugging my TypeScript apps. While it’s not free, 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

I’d say that WebStorm’s single downside is the cost. However, 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 many Windows developers who have either Visual Studio 2019 or 2022 find it easy to work on their TypeScript projects in the IDE they already know and love.

Please note that this information is specifically about Visual Studio for Windows. While Visual Studio also exists for Mac, it is a completely different product with significantly fewer features than its Windows counterpart.

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.

Extensibility

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

Out of the box, Visual Studio isn’t 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.

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. You’ll notice that 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 file, meaning we have 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.

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

Visual Studio is best suited for projects that use TypeScript but also 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. And, with the recent update in Visual Studio 2022, you can integrate these easily.

Visual Studio‘s support for TypeScript will likely continue to improve in the future. However, it’s probably not the best choice if you are solely writing a TypeScript web app.

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

When it comes to deciding what IDE to use for TypeScript projects, we’re not short on choices. 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 the TypeScript parts of your project. 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! I hope you enjoyed this article, and be sure to leave a comment if you have any questions. Happy coding!

LogRocket: Full visibility into your web and mobile apps

LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page and mobile apps.

Try it for free.