Skip to content

Instantly share code, notes, and snippets.

@iscott

iscott/atom_packages.md

Created May 17, 2018 17:18
Show Gist options
  • Save iscott/941ac1bc1fd5e8372e7301df99ca4c5c to your computer and use it in GitHub Desktop.
Save iscott/941ac1bc1fd5e8372e7301df99ca4c5c to your computer and use it in GitHub Desktop.
Download ZIP
My Recommended Atom Packages and Theme to make Atom a Fully-Featured Editor
Raw
atom_packages.md

Atom Packages & Notes

This document will recommend some of my favorite packages (plugins, add-ons, whatever you want to call them...they're awesome) for the Atom text editor. These give atom many of the features of a full IDE (Integrated Development Environment).

Atom Website

To browse & install packages, (in the menu bar) go to Atom >> Preferences >> Install and search for your desired package. Click install. That's it!

There are links to the package documentation from the Atom site. You can also view instructions on how to use each package from the packages menu Atom >> Preferences >> Packages

Recommended Packages

  • emmet - Gives extended functionality to the autocomplete feature, allows you to tab-complete. (Example: With Emmet installed, type h1 then the tab key. You should have a properly opened and closed h1 tag. )

  • open-in-browsers - This will allow you to open your current file by clicking your preferred browser in the shortcut bar on the bottom of the Atom Editor window.

  • open-recent - Open recent files in the current window, and recent folders (optionally) in a new window.

  • pigments - Fills in the color behind the hex code in your CSS/inline styles. Handy for reference!

    • Optional add-on: minimap-pigments - shows the color highlights in the minimap in addition to the editor.

  • minimap - Shows a mini version of your entire document on the right side instead of a scrollbar. Like in sublime :).

  • color-picker - Allows you to choose colors from a color wheel, will automatically enter the correct hex code into your document.

  • highlight-selected - Highlights all instances of the current word selected when double clicking.

  • white-cursor - Makes the I-bar cursor white in editor so you can see it more easily on a dark background.

  • Sublime-Style-Column-Selection - Enable Sublime style multi-line 'Column Selection'. Just hold 'alt' while you select, or select using your middle mouse button.

  • Swackets - Color codes and matches open and closing brackets in your code!

Optional - Theme

Themes change the look and feel of the Atom editor. Completely optional, but if you want to use our recommended theme, go to Atom >> Preferences >> Install, change the search to Themes (right of the search box), and search for your desired Theme. Click install.

  • seti-ui - A dark colored UI theme for Atom with custom file icons.
    • Once installed, go to Atom >> Preferences >> Themes and choose Seti for the UI Theme
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment