Learn how to configure Atom for web and provide the best environment for JavaScript, HTML, and CSS development, after all, a code editor can increase or break your productivity.
From beginners to senior developers, Atom is the best code editor. You can customize it as much as you want for any environment through its native settings or external community packages.
I have no bias to talk about Atom because I particularly have been through several editors. I used to like Sublime Text and I worked with it for about 4 years until I started using Atom and saw that it's much better, especially for web development.
Setting up Atom for web development
Natively, Atom is already an excellent editor for web development. It comes with the main languages already installed, but we can improve it even more by adding some external packages.
If you work with specific frameworks such as React or Angular, I recommend you search for packages for JSX syntax, for example, in addition to the packages I'll cover in this article.
How to install external packages
A package or plugin is a software component external to Atom that can improve some existing functionality or bring new functionality to the editor.
A package can be installed with just a few clicks, just follow the steps below:
- On Atom, press Ctrl + , (or Cmd + , on Mac OS) to open the configuration menu.
- Click on "+ Install".
- In the "Search packages" field, type the package name.
- Click "Install", the package will be installed and will appear in the "Packages" tab.
Or if you prefer, you can use the shell command apm install package-name.
List of packages for JavaScript, HTML, and CSS
We have arrived at the main point of this article. Below I list all the packages recommended for configuring Atom for web development and I talk a little bit about the functionality of each one.
Utilities
JavaScript
HTML
CSS
file-icons
Instead of just being guided by the name of the file and extension, how about seeing the file icon? Adding a more visual touch to your file tree makes your life a lot easier.
atom-beautify
Automatically format your code with Atom Beautify. It works for several languages and can be used with the command Packages > Atom Beautify > Beautify.
todo-show
Shows all the To-dos left in your code, so if you forget something, you can easily remember and find it. To find ALL in your project, go to Packages > Todo-Show > Find in Project.
linter
Linter helps you analyze your code to identify programming errors. This package is the basis for other language-specific packages, such as linter-eslint.
prettier-atom
Format JavaScript code automatically via save (need to configure) or by running the "Prettier: Format" command. Or use the shortcut: Ctrl + Alt + F (Windows) / Ctrl + Option + F (Mac).
script
Run JavaScript code directly on Atom. It also works for other languages. It is not very useful if a file depends on others, but to debug a single .js file, it's pretty useful.
linter-jshint
Linter plugin for JavaScript that works with .js files or inside script tags. It's necessary to install the linter package first.
atom-html-preview
Allows you to view the changes you are making to an HTML file in real-time. Very useful, so you don't have to switch windows all the time.
Use Ctrl + Shift + H to open or close the HTML view.
emmet
Excellent package for HTML autocomplete, CSS, and abbreviations. I recommend you to take a deeper look into this package (there are several tutorials on Youtube) and you will discover some pretty nice shortcuts. The way it works is simple, just type a command and press tab. e.g. html[tab] (generates an HTML boilerplate) or ul.list>li*3[tab] (generates a full ul list).
less-than-slash
Automatically close any HTML tag by typing only the minor sign and a forward slash </.
linter-htmlhint
Linter Plugin for HTML. It's necessary to install linter too.
atom-css-comb
Helps you format CSS, LESS or SCSS by sorting the properties in a way that makes sense. To use it, select the desired CSS snippet, right click and click "CSS comb".
color-picker
Very useful package to quickly change colors, not only in CSS, but any other language. To use it, select the color, right click on it and click "Color Picker", or use the shortcut Ctrl + Shift + C (or Cmd + Shift + C on Mac).
linter-csslint
Linter Plugin for CSS. It's necessary to install linter too.
About themes
The themes are used to stylize the syntax and look of the editor. This is a very personal matter, but you need to choose a theme that is functional and at the same time, visually pleasing.
In Atom, themes are installed in the same way as packages and are separated into two categories: UI Theme and Syntax Theme, being used to stylize the editor interface and code respectively.
The theme I use is already embedded in the program and is the One Dark theme. I use it for both UI and syntax.
Why is Atom better?
- It's free: None of those BS popups asking you to buy every time you save.
- Open source: With a highly active community developing packages, discovering bugs, and sending out pull requests, Atom has a huge competitive advantage over its competitors.
- Built-in package manager: It's extremely easy to install, configure or remove external packages in Atom. This is one of the features that I like the most and that differs a lot from other code editors.
- Has built-in Git and Github: Before I started using it, I only used the terminal to control my repositories. But the integration with Git was done in such a good way that it became more productive to manage my repositories through the interface.
Related stuff
If you are interested, I leave here two other articles I wrote about Atom on this website:
Ricardo Metring
Full stack web developer and co-founder at Criar.io.
I've worked for over 10 years with software development. I'm constantly curious and learning.