CSS, HTML, JavaScript, Tools & Generators

ATOM Packages

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 always 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 / Open in Browsers. There are number of packages that make testing the page in the browser quicker.
  • Col0r-Picker: command-shift-c (mac) or control-alt-c (win/linux) brings up a color picker
  • Atom-Live-Server: for testing dynamically generated pages
  • Atom-Beautify: for tidying up html, css, javascript, php, etc.
  • Auto-Update-Packages: does what you think it would do
  • Wrap in Tag: this replicates Sublime Text’s wrap in tag command. Which is really useful.
  • Linter: linters provide error messages. ( You will need to install language-specific linters in addition to this “base” linter )
  • Linkter-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.