What code editor should I use?

One of the first questions that comes up when starting the journey towards learning to code is

“What program do I use to write JavaScript with?”

The shortest answer is “any text editor”– though this might not be the most helpful.

For 99% of the code I write, I use Neovim.

But I don’t recommend starting with it!

// begin rant:

At one of my old jobs, they required people to learn Vim at the same time as learning to write code. I think that qualifies as cruel and unusual punishment. There’s enough stuff to remember code-wise without having to bring modal editing into the picture.

// end rant

My Recommendation: VSCode.

Visual Studio Code, or VSCode for short, is a free code editor built by Microsoft (but don’t worry, it works for Mac too).

VSCode is friendly enough for new developers, and includes the ability to add a variety of extensions that add some nice features as well.

You can download Visual Studio Code from https://code.visualstudio.com.

Add the “Open with code” command

The official website has more info on installing and configuring VSCode, but I want to add a couple things.

I use zsh (oh-my-zsh) on a Mac, and in addition to running the code command from VSCode’s command pallette to install the ability to use the terminal to open a directory inside of Visual Studio, I have the following line in my .zshrc file:

code () { VSCODE_CWD="$PWD" open -n -b "com.microsoft.VSCode" --args $* ;}

Update Settings

Navigating to Code > Preferences > Settings allows you to update settings to those you prefer Code to use. Duh.

I suggest updating these:

  • Tab Size to 2 instead of 4.
  • Add **/node_modules to the “Files: Exclude” list by clicking the “Add Pattern” button. This may or may not mean anything to you right now, but it’s a safe bet.

Plugins to Install

There are a ton of extensions and plugins in a marketplace you can search from within VSCode. Here are some that provide a good starting point.

Either click the square “Extensions” button on the left side of the window, or hit shift-command-X on your keyboard to open the tab. Then search for:

  • Bracket Pair Colorizer 2 by CoenraadS. Highlights brackets that match eachother, which makes debugging your code a lot easier!
  • Live Server by Ritwick Day. This extension enables your web browser to reload itself and show you your updated file every time you save it. Now you don’t have to hit the refresh button while you work.

I also install Vim Emulation by vscodevim, but again, “vim stuff” is a whole different thing that I’m not going to get into right now.

Check out my other articles, or sign up for my newsletter:

No spam. Just code stuff, unsolicited music recommendations, etc.