On this article, we’ll dig in to 12 of the most effective Atom packages for internet builders. Atom has loads of competitors — together with Visible Studio Code and Elegant Textual content — however it nonetheless holds its personal as a preferred and competent internet growth instrument.
Why Use the Atom Editor?
- 1 Why Use the Atom Editor?
- 2 Atom Packages and Themes
- 3 Set up Atom Packages
- 4 Putting in Atom packages from the command line
- 5 1. File Icons
- 6 2. Mission Supervisor
- 7 3. Sync Settings
- 8 4. Todo Present
- 9 5. Minimap
- 10 6. Spotlight Chosen
- 11 7. Auto Shut HTML
- 12 8. Pigments
- 13 9. Linter
- 14 10. Auto Detect Indentation
- 15 11. Teletype
- 16 12. Extra Atom Packages
- 17 After-hours Add-ons
VS Code might have gained the hearts and minds of internet builders over the previous few years, however GitHub’s Atom editor stays one of many higher and extra succesful code editors in the marketplace. Causes to love it so much embody:
- installers can be found for Home windows, Mac and Linux
- it’s been regularly up to date over the previous decade
- pace has improved following some criticism of preliminary releases
- it’s nonetheless free to obtain and use with out restrictions or nag screens
Microsoft acquired GitHub in 2018, so the corporate now has two good Electron-based code editors. Atom’s long-term future might be in query, however growth continues. In case you’re on the lookout for a brand new code editor — maybe after Adobe deserted Brackets — Atom ought to be towards the highest of your checklist.
Atom Packages and Themes
Atom has at all times publicized itself as a “hackable textual content editor for the twenty first Century”. The bottom set up has comparatively few options, however you’ll be able to lengthen it with add-ons generally known as packages.
Set up Atom Packages
Including Atom packages is sort of easy, as Atom comes with a built-in bundle supervisor. (Many builders are drawn to Atom partly as a result of it’s really easy to put in Atom packages.)
Open the Atom editor, click on on the Edit menu within the prime navigation bar, then choose Preferences. A brand new Settings tab will open. Click on on the + Set up menu merchandise and a search discipline will seem on the fitting. It will assist you to seek for new Atom packages by identify. While you’ve positioned the Atom bundle you need, hit the Set up button.
Clicking on the Packages menu merchandise will present you which of them Atom packages are presently put in. Something you’ve put in your self will seem below Neighborhood Packages menu merchandise. You’ll discover there’s additionally a Core Packages menu merchandise. This lists these packages put in by default. You may disable these in order for you, however it’s higher not to take action, as this can have an effect on the fundamental performance of the editor.
Putting in Atom packages from the command line
Atom additionally ships with a command-line instrument referred to as
apm (which stands for Atom Package deal Supervisor). You can too use this instrument to put in packages straight from the terminal.
The syntax is as follows:
apm set up <package-name>.
You may configure
apm through the use of the
apm config command-line choice or by manually enhancing the
~/.atom/.apmrc file. Typing
apm assist will provide you with an thought of what else it may do.
And with that stated, listed here are twelve of the most effective Atom packages — plus a number of bonus choices — which make Atom into an excellent higher code editor…
1. File Icons
Atom’s default file and folder icons are finest described as “practical”. An icon set equivalent to
file-icons improves the editor’s look and makes it simpler to find information of a selected kind.
Search “icon” within the + Set up pane to find dozens of different choices.
2. Mission Supervisor
Atom offers easy folder-based mission administration. It’s adequate in case you’re switching between a few initiatives, however
project-manager is right for something extra refined. It provides command palette choices and an editable JSON file the place you’ll be able to outline initiatives and with their very own customized settings equivalent to colours, tab preferences, and so forth.
3. Sync Settings
In case you’re working Atom on multiple system, it’s helpful to synchronize the settings, key bindings, and snippets throughout installations. You may manually synchronize by cloning information within the Config folder (Settings, then Open Config Folder), however
sync-settings offers a neater automated choice. Settings are saved to a Gist, however different Atom packages allow you to decide on a native folder or Git repository.
4. Todo Present
You’ve began Atom, opened a folder, then … what subsequent? The
todo-show Atom bundle reveals feedback scattered by your mission containing key phrases equivalent to
CHANGED, however you can even add your individual common expressions.
- Get the Atom Todo Present bundle right here: todo-show
minimap is without doubt one of the hottest Atom packages, with greater than seven million downloads. It shows a condensed view of your code on the right-hand facet of the code editor window, which is a superb assist for fast navigation. This characteristic enters your unconscious; you gained’t assume you’re utilizing it, however you’ll miss it when it’s not there.
Get the Atom Minimap bundle right here: minimap
6. Spotlight Chosen
When you choose a key phrase or variable in VS Code, Elegant Textual content, or Notepad++, it highlights all different cases.
highlight-selected brings that characteristic to Atom and is even higher when mixed with
7. Auto Shut HTML
Because the identify suggests, this bundle will robotically add a closing HTML tag if you full the opening tag. This can be a easy bundle, however I’m unable to manage with out auto-closing HTML tags!
autoclose-html doubles your markup creation velocity. It really works out of the field, however the bundle additionally lets you outline which tags ought to full inline (equivalent to
<li></li>) and which ought to create newline blocks (equivalent to
<article> ... </article> or
<ol> ... <ol>).
Most editors have CSS colour previewers, however few match the
pigments bundle for Atom. It parses colours, CSS customized properties, pre-processor variables, and even executes color-changing capabilities equivalent to
darken(). It scans your supply information to construct a palette of colours so you’ll be able to reference them anyplace.
- Get the Pigments Atom bundle right here: pigments
Additionally, the Colour Picker bundle is for anybody who’d fairly choose colours than keep in mind their names or hex values.
You may run linters from the command line, however it’s not as fast or efficient as reside, in-editor code validation. Linter is without doubt one of the finest. It’s quick, and fewer intrusive than some rivals.
Word that Linter is the core Atom bundle that gives an API for dozens of programming languages. Some, equivalent to HTML and CSS, require no additional software program. Others, equivalent to
eslint, require the Node module and configuration settings (full directions are supplied).
Linting your code will significantly enhance your code high quality, so I encourage you to offer it a strive.
10. Auto Detect Indentation
Coders won’t ever agree whether or not to make use of tabs or areas. Even once they do, they could want them in two, 4, or eight character flavors. I normally go for no matter annoys the most individuals (three-character arduous tabs?) however
auto-detect-indentation works out what the mission requires so that you want by no means fear about it.
Alternatively, you’ll be able to drive everybody’s code to match your most popular fashion utilizing Atom Beautify:
In case you’ve ever used Stay Share for VS Code, you’ll perceive the way it’s revolutionized pair programming. The extension permits two folks to remotely edit code in the identical workspace on the identical time.
teletype is the equal bundle for Atom. It’s a beta service, however appears to be like good and appears dependable.
- Get the Atom Teletype bundle right here: teletype
12. Extra Atom Packages
We’ve coated what are, for my part, among the finest Atom packages. We’ll end with some particular mentions that didn’t make it to the highest checklist however are nonetheless actually helpful and value taking a look at.
Emmet (beforehand generally known as Zen Code) can increase CSS-like expressions into HTML tags: emmet
In case you’re creating REST internet companies, Atom’s REST Shopper offers a fast HTTP testing instrument. It’s no match for highly effective alternate options equivalent to Postman, however is nice for fast and soiled testing: rest-client
Lastly, there’s no must manually test for updates.
auto-update-packagesverifies your packages each six hours and does the give you the results you want: auto-update-packages
Have I missed your favourite Atom add-on?