Choose A Text Editor That Is Easy To Learn And Stick To It.

In 2015, I read some great advice on the Recurse centre’s user guide:

Choose a text editor that is easy to learn and stick to it. If you’re not sure which one to choose, Sublime Text is powerful, intuitive, and available on Mac, Windows and Linux.

I picked Atom.

At the time, every single online tutorial I could find used Sublime so I switched for a while, thinking I made a mistake.

Atom had this cool new integration with Github that would highlight lines of code in different colours depending on whether or not you had committed changes yet.

I was sold.

But then Atom could be slow at times so I thought about switching back to Sublime.

Eventually I was spending more time trying pick the perfect set of tools than I was coding. It wasn’t just the time I spent trying things out, it was also all the time I wasted wondering if I made the right decision or not.

Avoid the mistake that I (and many others) have made. Just pick one and stick to it.

Here are some Atom packages that I use and recommend.

A package is a little extension that you can install to adds a new feature to your editor. To install a package you go to Preferences (in your menubar), a setting screen should open up in the editor, click on the ‘Install’ tab on the left and then search for any of the following:

prettier
Formats your CSS and JS so that all your code is readable. Especially useful when working in teams. Instead of trying to agree on a formatting style you all just install Prettier. Go to the settings and configure it to format on save. Done.

pigments
This one is great when styling, it highlights colour codes in the actual colour so that they are easy to spot.

autoprefixer
Go to the settings and configure it to run on save. When you are writing CSS it will add all the available vendor prefixes for you when you save. This way things will look consistent across browsers without you having the remember all the prefixes. There is no reason not to install this.

hyperclick
This package makes it easy to navigate projects that use lots of small modules. instead of having to dig around your code base you just hold down ALT key and click on a module and it will jump to the file. to get it to work in atom you also need to install js-hyperclick.

autocomplete-paths
Completes path names for you when you are typing them out.

language-babel
I write a lot of react code and react has this strange syntax called jsx that most editors don’t understand by default. This package helps Atom understand jsx so that it can highlight it correctly.

Emmet
Emmet is an amazing tool that lets you crazy fast code. It takes a little while to learn but it is well worth the time investment. If I wanted an unordered list with 5 list items each with a class of .blue I could just write ul>li.blue*5 and it expands into exactly what I need.

As you start to write more code more make sure you add a linter to your package list. If you are a complete beginner I don’t recommend setting up a linter. It can be overwhelming to set up and the advice it offers can cause more confusion that clarity. However, once you feel like you’re getting the hang of things make sure you start using one. A linter will improve the quality of your code and help you catch bugs before they cause problems. I use ESLint because it’s excellent and because it integrates beautifully with the Prettier package.

You can download Atom here.
You can download Sublime here.

Here is a link to the coding advice I mentioned at the begining.