Installing and Setting up Atom
March 4th, 2021
So what IS Atom?
Atom is the code editor that was originally created by
Github is owned by
Microsoft is maintaining
And yes, it IS being maintained. There are a
lot of people
Atom repository on
starring the repository, and actually
using the editor.
Atom, please go to the Atom.io website to
When you have landed on the site, click on
the yellow download button to install. Once you
have installed it, you can launch it
by typing “Atom” in
Spotlight Search on your
then pressing the
Installing Atom Packages
In order to install
Atom packages, go to the
Atom tab itself
Preferences. it will take you to
area that looks like this:
+install and you will be taken to a list of available
packages you can install in
Atom. And imagine, there is
note package similar to (but much better than)
Adobe Brackets Notes extension! I have included it in
the list of must-have packages for
Atom in the next section.
Must-Have Atom extensions
atom-css-comb: CSScomb is a coding style formatter for CSS (LESS|SASS|SCSS). You can easily write your own configuration to make your style sheets beautiful and consistent.
atom-live-server: Launch a http server with live reload capability.
atom-notes: Embedded Notational Velocity-like features for Atom.
color-picker: Right click and select Color Picker, or hit CMD-SHIFT-C/CTRL-ALT-C to open it. Currently reads HEX, HEXa, RGB, RGBa, HSL, HSLa, HSV, HSVa, VEC3 and VEC4 colors – and is able to convert between the formats. It also inspects Sass and LESS color variables. Just open the Color Picker with the cursor at a variable and it’ll look up the definition for you. From there, you can click the definition and go directly to where it’s defined.
css-grid-snippets: CSS Grid Layout Snippets.
css-snippets: CSS, SCSS, Sass, and Less Snippets.
html-tag-auto-complete: A simple auto completion of html tags with class and/or id.
html-template-generator: HTML template generator for Atom text editor.
html-to-css: Generate CSS classes from HTML structure.
ide-css: Atom-IDE for CSS, LESS and SCSS language.
ide-html: Atom-IDE for HTML, Go Template, Mustache and other Templates.
language-atom-notes: Syntax Highlighting for Atom Notes.
linter: Linter is a base linter provider for the hackable Atom Editor. Additionally, you need to install a specific linter for your language. You will find a full list on atomlinter.github.io. It provides a top-level API to its consumer so that they can visualize errors and other types of messages with ease.
linter-csslint: Lint CSS on the fly, using csslint. It will be used with files that have the “CSS” or “HTML” syntax.
linter-spell: Multilingual grammar-specific spell checking using Ispell-interface such as Aspell or Hunspell..
linter-ui-default: Default UI for the Linter package.
platformio-ide-terminal: A terminal package for Atom, complete with themes, API and more for PlatformIO IDE. Fork of terminal-plus.
atom . shell command
Last of all, after you have installed all your
packages, if you use
Terminal in your daily workflow, don’t
forget to install the
atom . shell command. This permits you
to open your
Terminal. Then, once you have done that, you
can use the
platform side terminal integrated
To open your integrated
Terminal from inside your
(it’s the same shortcut in
VS Code), just press the
Control key on
Mac, followed by the
back tick key (located below the
in the same key, and this key is located right below the
Installing a shell command in Atom
To install a
shell command in
Atom, select the
Atom, and select
“install Shell Commands”. When you
have done that,
Atom will let you know that the
commands have been
Created by Maria D. Campbell who lives and works in New York City building and teaching useful things. You should follow her on Twitter.