I have curated a list of my top 5 favourite IDEs/Code Editors for web development. This list is my personal opinion. If you have another IDE/Code Editor you think should be on the list or higher/lower on the list, I would love to know in the comments. Firstly, I would like to address the difference between an IDE and a Code Editor.
What is an IDE/Code Editor?
IDE stands for Integrated Development Environment. IDEs usually come with more features (e.g. debugging, extensions, built-in terminal, and more). Think of an IDE as a code editor with superpowers.
A code editor is simply a place to write code. Usually, a code editor will only come with syntax highlighting and a few other minor features. As a code editor is lightweight and doesn't have too many features, I would definitely recommend it for a beginner or someone who doesn't want to install any heavyweight programs.
With that out of the way, let's dive right into my top 5 IDEs/Code Editors for web development.
5. Vim
My 5th favourite IDE/code editor for web development is Vim. Vim has the steepest learning curve on the list even though it is a code editor. This is because Vim has an endless amount of keyboard shortcuts to make you more productive while coding. At first, it can seem as though Vim is just a waste of time to learn but after you master the commands and keyboard shortcuts Vim has, it is the most productive editor on this list. I would highly recommend Vim for any developer looking to increase their coding productivity and is willing to spend a week or so learning how to use Vim. This is a great tutorial for getting started: https://youtu.be/IiwGbcd8S7I.
4. Sublime Text
At number four on this list is Sublime Text. Sublime Text is an extremely lightweight code editor which is blazing fast. Sublime Text has a beautiful user interface and little to no learning curve. Just download Sublime and you are up and running. Sublime Text is a great choice for any developer looking to get started with programming or a developer who wants a lightweight and fast editor.
3. Atom
My 3rd favourite IDE/editor is Atom. Atom is: "A hackable text editor for the 21st Century". This means that almost everything in Atom is customizable. One of my favourite things about Atom is its ecosystem. There are countless extensions/packages (e.g. themes, debugger, terminal) that you can get to increase your productivity when using Atom. Also, GitHub created Atom which means that it has flawless support for Git and GitHub. Atom would be a great choice for a developer looking for a customizable editor, all things you expect from an IDE, and flawless Git/GitHub support.
2. WebStorm
WebStorm is the most powerful IDE on this list. It has a built-in terminal, debugger, seamless tool integration, perfect unit testing, integration with VCS, and more. Why isn't number 1 you ask? WebStorm is a paid IDE ($129 USD per year). Since WebStorm is unaffordable for a lot of people, it's not first on this list. This doesn't mean that there is no use for WebStorm though! Try the 30-day free trial to see if you think it's worth the money. I would recommend WebStorm for any professional developers or anyone who is willing to spend the money.
1. VSCode
This one is no surprise. At number 1, we have VSCode. Like Atom, VSCode has all the features you would expect from an IDE and more. My favourite thing about VSCode is the extensions. There are tens of thousands of open-source, community-made extensions which you will love. VSCode is also very customizable and hackable. Also, if you love Vim, there is a Vim extension in VSCode where you have all the Vim commands inside a powerful IDE like VSCode. VSCode is also 100% free and open source! I would recommend VSCode to any developer!
This has been my top 5 IDEs/code editors for web development. If you have another IDE/Code Editor you think should be on the list or higher/lower on the list, I would love to know in the comments.
Recently I have hit 1500 followers on DEV! Thanks for all your support! Because of that, I have started my own newsletter where I will be posting some more web development, Python, and Rust content. Feel free to subscribe to my newsletter if you would like to receive that type of content! Thanks for reading!
Henry
Top comments (30)
Great post!
I agree that VS Code is probably the best one in the market. I feel the same view as you and prolly others too.
I even made a youtube video of this on my youtube channel. youtu.be/lnvtldTRdL0
Awesome video!
thanks dude. Awesome post of yours. 👍
I haven't seen a lot of people today using Sublime or Atom, since most of them migrated to VS Code. Also, another one that it's very popular is Emacs, thanks to its great community and amazing plugins that, in a lot of cases, are much better than VS Code or Vim.
Emacs is a great tool, I was debating between it and Vim! Thanks for reading.
Yeah I like vscode but it becomes heavy & slow after installing few packages, and thoug it has electron as
backend but still the same.
sublime won't have much extensions as vscode but it's lighter when compared to vscode.
True! I like to use Sublime for smaller projects because I don't really need lots of extensions, debugging, etc and I use VSCode for bigger projects. Thanks for reading!
When I got a web development work at 2017, there was already VS Code.
I didn't know at that time. I tried to use an Editor 'Atom' because one of my coworkers used it. but It was really complicated to use for me. So I searched the internet for easy to use editors. and I found VS Code.
It was super easy to use. I didn't use many features of that tool though.
But someday I wanna change my editor to Atom. Because... That seems.... hack lit. Isn't it..?
True! VSCode might seem more intuitive to use then Atom but I would definitely recommend giving Atom another try if you want a purely hackable editor.
I use Sublime Text only if I need to do something not big, might be some quick fixes because it is light-weight and very fast.
But
VS Code has to be on #1 because of so many plugins and extensions it offers.
It is what I use most of the time.
You can check out this article for referencing VSCode 😃-->
Master VS Code + Resources!
Hardik Chopra ・ Dec 24 '20 ・ 3 min read
Great article! Thanks for reading!
Nice list.
In my case, NeoVIM is the one I used for everything :). Even for JS.
NeoVim is great! Thanks for reading!
Vim should be mandatory for all human beings on planet Earth, just like wearing face masks
That's a strong opinion. I personally use VSCode with the Vim extension. Vim is super useful!
I cant ZZ in VSCode with the vim extension, so i removed it. Its meant to be used in the terminal
Came here to say vim and was disappointed that it's already on the list s 😭
Its deservedly on the list! Thanks for reading!
It's a nice list, but really only one of those counts as an IDE. The rest are (advanced) editors.
Appreciate your input. Thanks for reading!
VSCode will be hard to beat Microsoft did a good job with this one.
Agreed! And it’s free!
Vim is nice, but it lacks all the great stuff like org-mode from Emacs - so personally, I use Spacemacs, which combines the best of both worlds! :)
Cool!
Solid list of code editors. VS Code is certainly the go-to for so many devs.
Certainly! Thanks for reading!
WebStorm is free if you're a student, as is the case with every other Jetbrains IDE.
Heard of OniVim? onivim.io/
I haven't but it looks cool, will definitely have a further look into it. Thanks for the suggestion!
I'm surprised not to see intellij ultimate on this list.