A lot of good text editors, like Sublime Text and Atom, have the ability to easily install packages that will extend their core functionality.
Sometimes, people will make packages to replicate functionality found in other editors. For example, I am a longtime Sublime Text user. However, since Atom is free, I’ve started using it so students don’t feel compelled to buy Sublime Text. But there are a few features of Sublime that I miss in Atom. Fortunately, a number of packages allow me to add those features.
To install a package in Atom, do the following:
- Bring up the Command Palette (command-shift-p on Mac, control-shift-p on Windows or Linux)
- Type install and then select Install Packages And Themes
- Search for the package you want to install
- When you find one, press the INSTALL button
Here are some of the packages I typically install:
- Emmet: a brilliant, and essential, HTML/CSS macro utility.
And here’s the official Emmet documentation and the excellent cheatsheet.
Emmet practice exercise 1 | answer key | Emmet practice exercise 2 - Open in Browser. Does what you think it would.
- MiniMap: gives a really useful document outline. Like the Photoshop Navigator palette. Shamelessly copied from Sublime Text.
- Atom-Wrap-In-Tag: option/alt – shift – w to wrap selection in code. Press spacebar to add attributes
- Atom-CSS-Comb: CSS Code Formatting/Sequencing. Very useful. Control-Option/Alt-c to trigger or right-click
- Atom-Beautify: control-option/alt-b to clean up code in editor. Get it. Use it.
- Highlight Selected: command-control-h to selected all instances of a selected word.
- Hey-Pane: expand active tab. Has innovative “follow” feature.
- Col0r-Picker: command-shift-c (mac) or control-alt-c (win/linux) brings up a color picker
- Atom-Live-Server: for testing pages in the browser without reloading.
- Auto-Update-Packages: does what you think it would do
- Linter: linters provide error messages. ( You will need to install language-specific linters in addition to this “base” linter )
- Linter-htmlhint: this provides HTML error messages on save (look at the bottom of the editor. Click for error panel.)
- Linter-CSSLint: this provides CSS error messages on save (look at the bottom of the editor. Click for error panel.)
- Linter-jshint: for JavaScript hinting on save (look at the bottom of the editor. Click for error panel.)
- Pigments: A CSS color viewer. It adds a background color to all your color declarations. It even understands SASS variables and color-changing functions.
That’s just a few of the available useful packages.
Note, also, that most packages also have settings that can be configured from the Preferences / Settings menu.