Skip to content

Instantly share code, notes, and snippets.

@Skylarity

Skylarity/atom.md

Last active November 30, 2016 01:36
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save Skylarity/a0ae277f448e01f9c897c9b08fcd692f to your computer and use it in GitHub Desktop.
Save Skylarity/a0ae277f448e01f9c897c9b08fcd692f to your computer and use it in GitHub Desktop.
Download ZIP
Helpful tips for using the Atom editor.
Raw
atom.md

Atom

Atom can be found at atom.io.

Helpful Settings

  • Project Home — Used to set default project directory
  • Scroll Past End
  • Show Indent Guide
  • Show Invisibles
  • Soft Tabs (Uncheck)
  • Show Line Numbers
  • Preferred Line Length
  • Soft Wrap
    • Soft Wrap At Preferred Line Length — Wraps text at the preferred line length.
  • Tab Length

Keyboard Shortcuts

  • Cmd/Ctrl + Shift + P — Command Palette
    • The command palette uses a technique called Fuzzy Searching to find any command available for use
    • You can take advantage of the fuzzy by typing just the first letters of the words in the command you want to use, thereby saving a lot of typing
  • Cmd/Ctrl + Left Click — Wherever you click, another cursor will be placed. This allows you to make the same change in several places in the file at the same time. It also makes you feel like a hacker.
  • Cmd + Ctrl + Arrow (Mac), or Ctrl + Arrow (Windows & Linux) — This will let you move a line up or down for easy code rearrangement.

Tips

  • Change syntax highlighting by clicking on the language button in the bottom right corner (defaults to Plain Text). By default Atom will try to autodetect the language based off of the file extension. This is useful if you are in a new file that hasn't been saved with a filename yet.
  • Use the Pane Splitting to view multiple files at once.
    • Press Cmd/Ctrl + Shift + P to bring up the command palette
    • Type psrm (for Pane Split Right and Move Active Item)
    • Hit Enter
    • This will move the tab you are in to the right pane (You can also move left, up, and down)
  • Atom has Markdown previewing built-in.
    • Bring up the command palette (Cmd/Ctrl + Shift + P)
    • Type markdown
    • Hit enter when Markdown Preview: Toggle is selected
    • You can toggle the preview on and off in this way
  • Make any text upper or lower case with the Text Editor: Lower Case and Text Editor: Upper Case commands.
  • Use Cmd/Ctrl + D to select the next instance of selected text.
  • Use Cmd/Ctrl + U to unselect the most recently selected instance of selected text.
  • When searching your file (Cmd/Ctrl + F) you can match case and use Regular Expressions by using the buttons next to the search text field.
  • You can automatically indent unformatted code by going to Edit > Lines > Auto Indent, or by using the command palette to run Editor: Auto Indent.

Themes

Access themes by going to Settings (Cmd/Ctrl + ,), selecting the Themes tab, and selecting a ui theme and syntax theme from the dropdown menus. Atom comes with several themes preinstalled, but you can get more by going to the Install tab, selecting themes by the search bar, and searching. Atom also loads a selection of featured themes if you select themes. Don't forget that you can click on the gear next to the ui theme to change theme settings!

My personal favorite theme is atom-material-ui for the ui, with atom-material-syntax for the syntax (confusing names, I know). atom-material-ui has a ton of different settings you can change, including custom accent colors, ui scaling, and a bunch more. (Believe it or not, they're not paying me to write this.)

Plugins

Helpful Plugins

  • activate-power-mode — Explosions? Explosions.
  • emmet — A super helpful code-expanding tool. Documentation can be found here.
  • file-icons — Expands the default file icon set and adds color coding for better visual separation.
  • minimap — Adds a code minimap! Can be useful for not getting lost in large files.
  • pigments — Displays colors in the file by changing the background color of the declaration (e.g. #508cff would have a blue background). This lets you immediately see what colors you're working with. The minimap-pigments plugin adds this functionality to the minimap plugin.

Git Plus

Git plus is an awesome tool that lets you use git commands from within Atom. Press Cmd/Ctrl + Shift + H to bring up the Git Plus command palette (which behaves exactly like the Atom command palette).

The command I find myself using most often is acp, for Add all, Commit, and Push.

Linter

A linter is a tool that flags invalid code like a spell-checker would. PhpStorm has a built-in linter, that's the thing that gives you red squiggly lines and warnings.

To lint in Atom, you need >= 2 plugins. The first plugin you need is linter, this provides a framework for language-specific linters. The next plugin(s) you need is your language-specific linter. For JavaScript, for example, I use linter-jshint. All of the plugins from AtomLinter are great linting plugins.

Sync Settings

sync-settings is a plugin that can be used to sync your Atom settings, themes, plugins, etc. to different computers. Chances are you'll be running Atom in multiple locations, and it's a pain to keep everything in sync manually.

Follow the setup section of the documentation for full instructions on how to use sync-settings.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment