Skip to content

Instantly share code, notes, and snippets.

@w3cj
Last active May 28, 2017 21:35
Show Gist options
  • Save w3cj/c3d04be8df0fc6049c660a503125e9e6 to your computer and use it in GitHub Desktop.
Save w3cj/c3d04be8df0fc6049c660a503125e9e6 to your computer and use it in GitHub Desktop.

Own your Editor:

A guide to Essential Atom Plugins


Don't work for your editor...


Make your editor work for you!


Plugin Types

  • Coding Helpers and Autocompletes
  • Linting/Style
  • Workflow
  • Library and Framework Support

Coding Helpers and Autocompletes


Turbo JavaScript

A collection of commands and ES6-ready snippets for optimizing Javascript and Typescript development productivity.

Turbo JavaScript


Double Tag

Edit both the start and end HTML tags at the same time.

Double Tag


Auto Close HTML Tags

Will automatically add closing tags when you complete the opening tag.

Auto Close HTML Tags


Autocomplete HTML Entities

An Atom autocomplete-plus 2.0 provider for HTML entities.

Autocomplete HTML Entities


Autocomplete Paths

Adds path autocompletion (searches filenames and folders to provide suggestions) to autocomplete+

Autocomplete Paths


Autocomplete Modules

Autocomplete for require/import statements. Searches node_modules directory to provide suggestions.

Autocomplete Modules


TernJS

JavaScript code intelligence for atom with Tern. Adds support for ES5, ES6 (JavaScript 2015), Node.js, jQuery, Angular and more. Extendable via plugins. Uses suggestion provider by autocomplete-plus.

TernJS


Linting/Style


Beautify

Beautify HTML (including Handlebars), CSS (including Sass and Less), JavaScript, and much more in Atom.

Beautify


Workflow


Advanced Open File

Cmd-Alt-O

Advanced Open File is a package for helping Atom users to open files and folders easily. It can also create new files and folders if they don't exist.

Advanced Open File


CDNJS

Quickly embed url's from the large collection of client side libraries available at cdnjs.com

Simply bring up the command window (ctrl+shift+p) and type cdnjs to run the GetUrl method

CDNJS


Highlight Selected

Double click on a word to highlight it throughout the open file.

Highlight Selected


Library and Framework Support


AngularJS Autocomplete/Snippets

Adds syntax highlighting and snippets to AngularJS in Atom.

AngularJS Autocomplete/Snippets


Bootstrap 3 Autocomplete/Snippets

Provides Bootstrap 3 classes and HTML tags with autocompletion features.

Bootstrap 3 Autocomplete/Snippets


Bonus!

Themes/Styles


Brahalla Syntax

A dark colored syntax theme for Atom with bright, custom highlighting for Java (Spring), Python, and C. Based on Seti-Syntax.

Brahalla Syntax


Nucleus Dark UI

Nucleus is an adaptable UI theme for Atom with your favorite syntax coloring at its core! This gives the UI a coherent feel, with whatever syntax theme you like to use.

Nucleus Dark UI


File Icons

Adds file specific icons to atom for improved visual grepping. Works with Tree View and Fuzzy Finder and Tabs.

File Icons


Bonus Bonus

Essential OS X Keyboard Shortcuts


Tips on Finding Plugins

  • Pay attention to install count
  • Visit the github page
  • Check last updated date
  • Check contributor activity

Don't work for your editor...


Make your editor work for you!


Own your Editor:

A guide to Essential Atom Plugins


Install all of these plugins with 1 command:

apm install turbo-javascript double-tag autoclose-html autocomplete-html-entities autocomplete-paths autocomplete-modules atom-ternjs atom-beautify advanced-open-file cdnjs highlight-selected atom-bootstrap3 brahalla-syntax nucleus-dark-ui file-icons
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment