DEV Community

loading...
Cover image for Top 5 IDEs/Code Editors for Web Development

Top 5 IDEs/Code Editors for Web Development

hb profile image Henry Boisdequin ใƒป4 min read

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

Alt Text

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

Alt 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

Alt Text

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

Alt Text

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

Alt Text

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

๐Ÿ“ฐ Newsletter
๐Ÿฑ GitHub
๐Ÿฆ Twitter

Discussion (30)

pic
Editor guide
Collapse
angelomiranda profile image
angelo.miranda

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

Collapse
hb profile image
Henry Boisdequin Author

Awesome video!

Collapse
angelomiranda profile image
angelo.miranda

thanks dude. Awesome post of yours. ๐Ÿ‘

Collapse
baldore profile image
Camilo Orrego

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.

Collapse
hb profile image
Henry Boisdequin Author

Emacs is a great tool, I was debating between it and Vim! Thanks for reading.

Collapse
cmuralisree profile image
Chittoji Murali Sree Krishna

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.

Collapse
hb profile image
Henry Boisdequin Author

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!

Collapse
hanco profile image
Hanco

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

Collapse
hb profile image
Henry Boisdequin Author

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.

Collapse
hardikchopra242 profile image
Hardik Chopra

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 ๐Ÿ˜ƒ-->

Collapse
hb profile image
Henry Boisdequin Author

Great article! Thanks for reading!

Collapse
levivm profile image
Levi Velรกzquez

Nice list.

In my case, NeoVIM is the one I used for everything :). Even for JS.

Collapse
hb profile image
Henry Boisdequin Author

NeoVim is great! Thanks for reading!

Collapse
33nano profile image
๐Ÿ‡ตโ€‹โ€‹โ€‹โ€‹โ€‹๐Ÿ‡ฐโ€‹โ€‹โ€‹โ€‹โ€‹๐Ÿ‡ณโ€‹โ€‹โ€‹โ€‹โ€‹

Vim should be mandatory for all human beings on planet Earth, just like wearing face masks

Collapse
hb profile image
Henry Boisdequin Author

That's a strong opinion. I personally use VSCode with the Vim extension. Vim is super useful!

Collapse
33nano profile image
๐Ÿ‡ตโ€‹โ€‹โ€‹โ€‹โ€‹๐Ÿ‡ฐโ€‹โ€‹โ€‹โ€‹โ€‹๐Ÿ‡ณโ€‹โ€‹โ€‹โ€‹โ€‹

I cant ZZ in VSCode with the vim extension, so i removed it. Its meant to be used in the terminal

Collapse
darkwiiplayer profile image
DarkWiiPlayer

Came here to say vim and was disappointed that it's already on the list s ๐Ÿ˜ญ

Collapse
hb profile image
Henry Boisdequin Author

Its deservedly on the list! Thanks for reading!

Collapse
alainvanhout profile image
Alain Van Hout

It's a nice list, but really only one of those counts as an IDE. The rest are (advanced) editors.

Collapse
hb profile image
Henry Boisdequin Author

Appreciate your input. Thanks for reading!

Collapse
andrewbaisden profile image
Andrew Baisden

VSCode will be hard to beat Microsoft did a good job with this one.

Collapse
hb profile image
Henry Boisdequin Author

Agreed! And itโ€™s free!

Collapse
zilti profile image
Daniel Ziltener

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! :)

Collapse
hb profile image
Collapse
realtoughcandy profile image
RealToughCandy.io

Solid list of code editors. VS Code is certainly the go-to for so many devs.

Collapse
hb profile image
Henry Boisdequin Author

Certainly! Thanks for reading!

Collapse
rvxlab profile image
RVxLab

WebStorm is free if you're a student, as is the case with every other Jetbrains IDE.

Collapse
tillsanders profile image
Till Sanders

Heard of OniVim? onivim.io/

Collapse
hb profile image
Henry Boisdequin Author

I haven't but it looks cool, will definitely have a further look into it. Thanks for the suggestion!

Collapse
polaroidkidd profile image
Daniel Einars

I'm surprised not to see intellij ultimate on this list.