Development

22 minute read

16 Best IDE for Web Development in 2020

Nick Mertens

Nick Mertens

Things move fast, especially in the web development world. And there’s nothing more essential than a web development IDE, or Integrated Development Environment, which is a fancy way of saying “code editor with extra features.” 

And, as with everything else in web development, there are plenty of options! So, which is the best IDE for web development?

Interested in programming?

Learn all about it in our comprehensive (and free) ebook!

Top 16 web development IDEs in 2020

We’ll have a look at IDEs that are great for many languages and projects and are all-round great candidates. These tend to focus more on front-end development but are useful for almost any project. 

We’ll also look at more targeted IDEs, for example, those aimed at C# and .NET, Java, Python, etc. While they aren’t as widely useful, they provide a lot of powerful features for those languages and frameworks that really speed up your workflow.

If you don’t have a powerful computer or would like the flexibility of working wherever you are, we also cover some cloud IDEs that might be what you’re looking for. Finally, there are a few honorable mentions of editors that probably don’t quite fit the IDE label but are often mentioned in the company of free online IDEs.

Some of them are also open source, meaning you could contribute to them to add and improve features yourself and see the source code. No matter what you’re looking for, you’re bound to find one you like. Let’s get started!



General-purpose & front-end development

The following IDEs are suitable for most types of programming, including basic text editing. Because front-end development generally uses scripting and markup languages (think HTML, JavaScript, TypeScript, and CSS) which don't need to be compiled, these editors are more often associated with front-end development.

1. Visual Studio Code

IDE for Web Development

   

Developed by Microsoft

Probably the biggest player right now in the code editor space, Visual Studio Code is open source, developed by Microsoft (and, of course, all of its open-source contributors). 

Despite its name, it’s quite different from Visual Studio (Microsoft’s premium editor, primarily aimed at .NET development). It’s very flexible and works with most, if not all, popular programming languages. 

There are also plenty of extensions available to download for free, which extend its functionality even further. You can even write your own and since it uses web technology, it’s all just JavaScript.

It also integrates well with Visual Studio Code Online. This is a service hosted by Microsoft that lets you run Visual Studio Code on a server, which can do all the heavy lifting for you. 

Microsoft also offers a service called Live Share, which lets you invite another developer to work on your project with you remotely. You can see each other’s cursors and edit the same files at the same time.

Features

  • Very customizable
  • Built-in version control
  • Debugging support 
  • Works well with most popular programming languages
  • Marketplace with extensions
  • Live Share for easy remote collaboration

Pros

  • Free
  • Open-source
  • Cross-platform
  • Flexible and extensible 
  • Popular so it's easy to find help or extensions

Cons

  • Requires extra setup for certain projects and languages
  • Built on Chrome so uses a lot of memory

Cost

Free

2. Atom

IDE for Web Development

   

Backed by GitHub

Before the rise of Visual Studio Code, Atom was often what the IDE developers would reach for. Using similar technology, Atom is built with web technologies using Electron and is easily extensible and customizable. Plus, it's open-source and backed by GitHub, a big name in open-source software. It's maybe not as popular anymore but it's still a great and stable editor.

Features

  • Very customizable
  • Works well with most popular programming languages
  • Lots of extensions available

Pros

  • Free
  • Open-source
  • Cross-platform
  • Flexible and extensible 
  • Popular so it's easy to find help or extensions

Cons

  • Requires extra setup for certain projects and languages
  • Built on Chrome so uses a lot of memory

Cost

Free

3. WebStorm

IDE for Web Development

   

Built by JetBrains

JetBrains (the name behind ReSharper, TeamCity, IntelliJ IDEA, and more), built WebStorm specifically for JavaScript development — front-end and Node.js. 

While a monthly or yearly subscription is required, it provides you with a lot of advanced features. These include coding assistance in the vein of ReSharper — a game changer if you've never used it — for popular frameworks like React, Angular, and Node.js.

Features

  • Coding assistance for popular JavaScript frameworks
  • Built-in version control
  • Debugging support
  • Integrated unit testing tools 
  • User interfaces for common command-line tools
  • Support for plugins

Pros

  • Lots of tools that make development easier
  • Customizable 
  • Similar to other JetBrains IDEs, common experience
  • Cross-platform

Cons

  • Subscription needed for most use cases

Cost

  • Free for students and open source projects
  • Monthly subscription (price varies between individuals and teams)

4. Brackets

IDE for Web Development

   

Developed by Adobe Systems

Brackets is a lightweight open-source editor focused mostly on HTML, CSS, and JavaScript. It provides some quality-of-life tools to manage these files more easily — like editing a CSS class directly from the HTML that uses it and live preview similar to the old days of Adobe Dreamweaver.

Features

  • Live preview of HTML
  • Inline editors to edit code referenced somewhere else
  • Built-in support for SCSS and LESS

Pros

  • Free
  • Open-source
  • Cross-platform
  • Extensions available

Cons

  • More basic than most other IDEs in this list

Cost

Free


Best IDE for web development


Back-end

Next up are those IDEs that are a bit more specialized and targeted at back-end languages like C#, Java, Python, and Go (with built-in tools to manage things like compiling, package management, and unit testing).

5. Visual Studio

IDE for Web Development

   

Developed by Microsoft

If you're working with .NET and C#, you will know about Visual Studio (not to be confused with Visual Studio Code). 

Being Microsoft's main IDE offering, Visual Studio is one of the biggest names in the IDE space. It's been around for many years and is thus filled with many useful tools for many different areas of web development. 

Its main purpose is for .NET development with C# but also supports many other programming languages. Keep in mind that .NET Core (Microsoft’s open-source continuation of the .NET Framework) is supported cross-platform so you don’t necessarily need an IDE like Visual Studio.

One drawback is that Visual Studio is only available on Windows. This may not be an issue for you but it’s unfortunate that you are locked into one platform. Recently Visual Studio for Mac was released, though it’s technically a rebranding of Xamarin Studio. It shares some of the same features but is much less fully featured.

Features

  • Coding assistance and auto-completion in the form of IntelliSense
  • Great support for C# and .NET
  • Support for front-end languages like HTML, CSS, JavaScript and TypeScript
  • Support for many other programming languages and frameworks like Python, C++, C, Xamarin, and Unity
  • Built-in version control
  • Built-in package managers like NuGet and NPM
  • Extensions available to download
  • Debugging support
  • Integrated unit testing tools 
  • User interfaces for common command-line tools
  • Database tools

Pros

  • Free for individuals and non-commercial or open-source work
  • Main IDE for C# and .NET development
  • Many stable and powerful tools to support development
  • All-in-one solution so you don’t need to switch applications

Cons

  • Windows only (see note above about Visual Studio for Mac)
  • Very large application
  • Subscription needed when part of a commercial organization

Cost

  • Free Community edition for individuals or for non-commercial/open-source purposes in organizations
  • Paid subscription for Professional and Enterprise editions

6. Rider

IDE for Web Development

   

Developed by JetBrains

Another JetBrains application, Rider is built specifically for C# and .NET, based on the IntelliJ platform. As they are also the developers of ReSharper — one of the most popular extensions for Visual Studio — it comes included in Rider which is a major plus, making it a good alternative to Visual Studio.

Features

  • Great support for C# and .NET
  • Support for front-end languages like HTML, CSS, JavaScript and TypeScript
  • Support for mono-based frameworks like Unity and Xamarin
  • ReSharper coding assistance built-in
  • Built-in decompiler to inspect code from libraries you’ve pulled in
  • Database tools
  • Support for plugins

Pros

  • ReSharper
  • Lots of tools that make development easier
  • Customizable 
  • Similar to other JetBrains IDEs, common experience
  • Cross-platform

Cons

  • Subscription needed for most use cases

Cost

  • Free for students and open-source projects
  • Monthly subscription (price varies between individuals and teams)

7. IntelliJ IDEA

IDE for Web Development

   

Developed by JetBrains

The platform that the other JetBrains (which used to be called IntelliJ) solutions are built on top of, IntelliJ IDEA was one of the first available IDEs for Java with code refactoring and navigation built-in.

As with the other platforms, IntelliJ IDEA comes with a large amount of coding assistance to help you be more productive, as well as tools that you might need when working on web or software development. Like SQL, Git, and build tool support.

The IntelliJ Platform is what IntelliJ IDEA is built on, along with Android Studio and JetBrains’ other IDEs. It is open-source, available under the Apache 2.0 license which lets you build royalty-free commercial and non-commercial products on it.

Features

  • Debugging support
  • Integrated unit testing tools 
  • User interfaces for common command-line tools
  • Database tools
  • Support for plugins
  • Built-in version control

Pros

  • Lots of tools that make development easier
  • Customizable 
  • Similar to other JetBrains IDEs, common experience
  • Cross-platform
  • Built on open-source platform

Cons

  • Subscription needed for most use cases

Cost

  • Free for students and open source projects
  • Monthly subscription (price varies between individuals and teams)

8. Eclipse

IDE for Web Development

   

Developed by the Eclipse Foundation

Eclipse has been around since 2001 and is another IDE primarily aimed at Java development and is free and open-source. This means you can contribute to the codebase and improve it yourself. It is often noted that it’s on the slower side. However, it’s a great alternative if you prefer a Java-specific IDE that’s free and open-source.

Features

  • Great support for Java
  • Also supports other programming languages
  • Plug-ins available
  • Debugging support
  • Integrated unit testing tools 
  • User interfaces for common command-line tools
  • Built-in version control

Pros

  • Free
  • Open-source
  • Cross-platform
  • Been around for a long time

Cons

  • Need to install plug-ins to get the most out of it
  • On the slow side

Cost

Free

9. NetBeans

IDE for Web Development

   

Apache Software Foundation

Another open-source Java IDE, NetBeans was first created in 1997 so has been around for a long time, though it only became open-source in 2000. In 2016 it got donated to the Apache Software Foundation as it was competing with another Java IDE owned by the same company.

Features

  • Great support for Java
  • Plug-ins available
  • Debugging support
  • Integrated unit testing tools 
  • Tools for refactoring code
  • Built-in version control

Pros

  • Free
  • Open-source
  • Cross-platform
  • Been around for a long time

Cons

  • Not as great for big projects

Cost

Free

10. PyCharm

IDE for Web Development

   

Built by JetBrains

PyCharm is JetBrains’ Python IDE boasting their usual array of coding assistance along the lines of ReSharper for Visual Studio. Python’s popularity has been rising the last few years due to its many applications so this is a great option to look at.

Features

  • Great support for Python and virtual environments
  • Support for data science tools like Anaconda, IPython Notebook, NumPy, etc.
  • Debugging support
  • Integrated unit testing tools 
  • User interfaces for common command-line tools
  • Database tools
  • Support for plugins

Pros

  • Lots of tools that make development easier
  • Customizable 
  • Similar to other JetBrains IDEs, common experience
  • Cross-platform

Cons

  • Subscription needed for most use cases

Cost

  • Free for students and open-source projects
  • Monthly subscription (price varies between individuals and teams)

11. GoLand

IDE for Web Development

   

Developed by JetBrains

This is one of the only IDEs targeted specifically at the Go programming language. JetBrains’ GoLand is another IDE developed on the IntelliJ platform and comes with the coding assistance we’ve come to know and love (even throughout this article).

However, if you already have a subscription for IntelliJ IDEA, you can probably get away with using that instead with their official Go plugin.

Features

  • Advanced coding assistance
  • Debugging support
  • Integrated unit testing tools 
  • User interfaces for common command-line tools
  • Database tools
  • Support for plugins

Pros

  • Lots of tools that make development easier
  • Customizable 
  • Similar to other JetBrains IDEs, common experience
  • Cross-platform

Cons

  • Subscription needed for most use cases

Cost

  • Free for students and open-source projects
  • Monthly subscription (price varies between individuals and teams)

Best IDE for web development


Cloud

Desktop applications are great, but sometimes you need the flexibility of IDEs in the cloud so you can let the server do the heavy lifting. You don’t need a powerful computer to access these,  just a compatible browser. And as long as you have an internet connection, you’re good to go.

12. Visual Studio Codespaces

IDE for Web Development

   

Built by Microsoft

You might know this as Visual Studio Online. Visual Studio Codespaces is Microsoft’s cloud offering for Visual Studio and Visual Studio Code.

It features Visual Studio Code — run from your browser, connected to a remote server, either in Azure (Microsoft’s cloud offering) or another computer — with Visual Studio Codespaces set up as a remote workspace.

If you’d rather not use a browser, you can also connect using Visual Studio Code on your own computer, while still letting the remote server do all the heavy lifting for you. 

Alternatively, you can use Visual Studio (note: not “Code”), although this is still in private preview at the time of writing this article.

If you use the cloud-hosted option (meaning you’re using a server hosted in Azure) you will have to pay for the usage of that server. Cost will vary depending on your use case and is probably something you’ll have to investigate for yourself. If you set up your own environment to connect to, it’s completely free (other than the running costs of that environment, of course).

Features

  • Visual Studio Code in your browser
  • Works with Visual Studio Code
  • Works with Visual Studio (though still in private preview)
  • LiveShare built-in for collaboration
  • Integrated debugging and coding assistance
  • Terminal available for command-line tools

Pros

  • You can use familiar tools (Visual Studio, Visual Studio Code)
  • Personalization (dotfiles, themes, and certain extensions) carry over between environments
  • Only the essential processing is done on the server, saving you bandwidth
  • Very easy to get started
  • Free if you host an environment yourself

Cons

  • You pay for the resources you use

Cost

  • Free if self-hosted
  • You pay for the resources you use on Azure

13. Glitch

IDE for Web Development

   

Developed by Glitch

Glitch is a little different from the other apps in this section. While it’s an IDE, it’s also a platform for creating simple web apps and prototypes and for being creative with code. If you’re looking to teach someone how to code (or learn yourself) or looking to setup a hackathon for your team, Glitch is the way to go.

Every project on Glitch is open by default and can be “remixed”, meaning a copy is made of that project in your account and you can start hacking away at it without affecting the original. 

When you create a new project, Glitch gives you the option of creating a static website (static HTML, CSS, and JS files). Or a full-stack JavaScript application built on Express, with the option of adding a database, meaning you can control the back-end code too.

Features

  • Browser-based code editor
  • Easy collaboration, allows multiple people to edit the same file at the same time
  • Host your projects online
  • Static websites
  • Node.js applications with Express
  • Supports JavaScript, HTML and CSS
  • Terminal available for command-line tools

Pros

  • Free
  • Easy to host a website
  • Great for simple web apps and prototypes
  • Scratches that creative itch
  • Everything is in the browser
  • Great for team collaboration

Cons

  • Node.js is your only option for the back-end
  • Not very customizable
  • Not great for big projects
  • There are some technical restrictions on the free version (e.g. apps sleep after a few minutes if not used, turned off after a few hours, limited disk space and memory, etc.)

Cost

Free or paid for extra quality-of-life features

14. CodeSandbox

IDE for Web Development

   

Developed by CodeSandbox

CodeSandbox is one of the best IDEs to choose if you want to work on a front-end project — especially React — as it comes with official templates for a lot of the major front-end frameworks and libraries (such as React, Vue, and Angular). So you can skip the setup and start hacking. 

It also comes with some excellent integrations that improve the developer experience, like inline unit test results and built-in DevTools.

Features

  • Powered by Visual Studio Code in the browser
  • NPM support
  • Hot module reloading
  • Integrates with GitHub
  • Deploy directly to Netlify or Vercel
  • Easy collaboration, allows multiple people to edit the same file at the same time
  • Inline chat and classroom mode
  • Terminal access for command-line tools
  • Integrated DevTools (including React DevTools)
  • Integrated with Jest for unit tests, shows results next to your code

Pros

  • Feels like a desktop IDE as it uses Visual Studio Code in the browser
  • Great for front-end projects, especially React
  • Good for team collaboration

Cons

  • JavaScript and TypeScript only
  • Not great for back-end development

Cost

Free or paid for extra features

15. AWS Cloud9

IDE for Web Development

   

Owned by Amazon

As you can probably guess by the name, AWS Cloud9 is owned by Amazon (who acquired it in 2016) and runs on AWS (Amazon Web Services), accessible from your browser.

Features

  • Supports popular programming languages including JavaScript, Python, PHP, etc.
  • You can share your development environment with your team
  • Easy collaboration, allows multiple people to edit the same file at the same time
  • Integrated debugging and coding assistance
  • Connects to any Linux server with SSH support
  • Terminal available for command-line tools with direct AWS access

Pros

  • Great option if you want to use AWS to host your project
  • Good for team collaboration
  • Quick to get started on a project

Cons

  • You pay for the resources you use

Cost

Paid (based on usage)

16. Codeanywhere

IDE for Web Development

   

Built by Codeanywhere, Inc

Whether you want to work in the cloud or connect to your own servers, Codeanywhere has got you covered. They support over 100 programming languages with the usual syntax highlighting and auto-completion with live collaboration. You can also host your applications from Codeanywhere’s containers and see private previews of the app you’re editing.

Features

  • Support for a large number of popular programming languages
  • Easy collaboration, allows multiple people to edit the same file at the same time
  • Support for containers and allows you to host websites directly from them
  • Coding assistance tools
  • Private preview URLs
  • Terminal access for command-line tools

Pros

  • Good for team collaboration
  • Quick to get started on a project
  • Supports cloud storage and your own servers

Cons

  • Subscription needed

Cost

Paid (multiple tiers available) with free trial


best ide for web development

Honorable mentions

These didn't quite make the cut or aren't technically IDEs, but are still worth mentioning:

CodePen

While not quite a cloud IDE, CodePen is great for sharing and testing out snippets of front-end code, with support for HTML, CSS and CSS preprocessors, and JavaScript. Like Glitch, it’s easy to copy and extend other snippets and build on existing code.

Vim

No list of text and code editors is complete without mentioning Vim and its other popular flavors like NeoVim. It’s been around for ages and has a steep learning curve, but many people swear by its flexibility and the power of its keyboard shortcuts. Just remember, if you find yourself in Vim and need to save and quit, press these keys:

<ESC>:wq<Return>

Or to quit without saving: 

<ESC>:q!<Return>

Emacs

I would be remiss if I didn't mention Emacs along with Vim. Like Vim, Emacs has been around a long time. It is very customizable with powerful keyboard shortcuts, along with a steep learning curve to get productive with it.

4coder

If you like Emacs, 4coder might be right up your alley. It’s a modern text editor loosely based on Emacs with a large focus on performance and portability, as well as customization. 

It’s not free but it’s a one-off payment of US$24 and also has a free demo. Just be aware, it’s still in beta at the time of writing this.


Conclusion

It's pretty clear that we're spoilt for choice nowadays when it comes to the best IDE for web development. 

However, some will be better suited to you based on the kinds of projects you are working on. And also based on whether you need something for a particular language or framework, or something more general purpose.

Hopefully, the list above gives you enough information to pick a couple of IDEs to check out and play around to see which suits you best. For what it's worth, my personal favorites from the list above are Visual Studio Code, Rider, and Glitch.

If you're still figuring out what development journey you want to take, make sure to check out our development courses to sharpen your coding skills.

Level up your skills

Start learning essential coding skills with GoSkills courses today

Start free trial
Nick Mertens

Nick Mertens

Nick is a web developer, focusing on front end development and UX, as well as dabbling in any new technologies or frameworks that catch his eye. In his free time, he enjoys playing video games, listening to metal, and being an all-round geek.

No comments

LoginSign up