Atom

https://www.sitepoint.com/12-favorite-atom-tips-and-shortcuts-to-improve-your-workflow/

http://flight-manual.atom.io/ - The only book you ever need
http://flight-manual.atom.io/using-atom/sections/basic-customization/ - continue from here.
http://www.sitepoint.com/write-atom-packages-using-vanilla-javascript/
http://www.sitepoint.com/how-to-write-a-syntax-highlighting-package-for-atom/
https://www.sitepoint.com/7-atom-add-ons-for-running-code-and-previewing-changes/
https://www.youtube.com/watch?v=hPC6keUUiTA - My Code Editor: Atom, Setup & Packages

https://atom.io/docs
https://discuss.atom.io
https://github.com/atom

What is Atom?

It is a hackable text editor for the 21st century.

Why should we use Atom?

There are a lot of text editors out there; why should you spend your time learning about and using Atom? Editors like Sublime and TextMate offer convenience but only limited extensibility. On the other end of the spectrum, Emacs and Vim offer extreme flexibility, but they aren't very approachable and can only be customized with special-purpose scripting languages.

We think we can do better. Our goal is a zero-compromise combination of hackability and usability: an editor that will be welcoming to an elementary school student on their first day learning to code, but also a tool they won't outgrow as they develop into seasoned hackers. As we've used Atom to build Atom, what began as an experiment has gradually matured into a tool we can't live without. On the surface, Atom is the modern desktop text editor you've come to expect. Pop the hood, however, and you'll discover a system begging to be hacked on. http://flight-manual.atom.io/getting-started/sections/why-atom/

Why is Atom not a web-based editor?

Web browsers are great for browsing web pages, but writing code is a specialized activity that warrants dedicated tools. More importantly, the browser severely restricts access to the local system for security reasons, and for us, a text editor that couldn't write files or run local subprocesses was a non-starter.

What is the core of Atom?

Atom is a specialized variant of Chromium designed to be a text editor rather than a web browser. Every Atom window is essentially a locally-rendered web page. All the APIs available to a typical Node.js application are also available to the code running in each window's JavaScript context. This hybrid provides a really unique client-side development experience.

Since everything is local, you don't have to worry about asset pipelines, script concatenation, and asynchronous module definitions. If you want to load some code, just require it at the top of your file. Node's module system makes it easy to break the system down into lots of small, focused packages.

How customizable is Atom?

Interacting with native code is also really simple. For example, we wrote a wrapper around the Oniguruma regular expression engine for our TextMate grammar support. In a browser, that would have required adventures with NaCl or Esprima. Node integration made it easy. In addition to the Node APIs, we also expose APIs for native dialogs, adding application and context menu items, manipulating the window dimensions, etc.

Another great thing about writing code for Atom is the guarantee that it's running on the newest version of Chromium. That means we can ignore issues like browser compatibility and polyfills. We can use all the web's shiny features of tomorrow, today. For example, the layout of our workspace and panes is based on flexbox. It's an emerging standard and has gone through a lot of change since we started using it, but none of that mattered as long as it worked.

With the entire industry pushing web technology forward, we're confident that we're building Atom on fertile ground. Native UI technologies come and go, but the web is a standard that becomes more capable and ubiquitous with every passing year. We're excited to dig deeper into its toolbox.

How can we install Atom?

  1. Download
  2. Unzip and run the .app file

How can we display the Welcome screen?

When we launch Atom for the very first time, it displays the welcome screen with helpful links. On subsequent run it does not display the welcome screen. To show the welcome screen again, click on "Help -> Welcome Guide" from the menu.

What is the purpose of the Command Palette?

The Command Palette is a dialog that displays shortcuts for the most useful commands. In the Command Palette displays the default keybindings for the platform that we detected you running. If you want to see a different platform than the one we detected, you may choose a different one by using the platform selector near the top of the page. If the Platform Selector is not present, then the current page doesn't have any platform-specific content. If you have customized your Atom keymap, you can always see the keybinding you have mapped in the Command Palette or the Keybindings tab in the Settings View.

This search-driven menu can do just about any major task that is possible in Atom. Instead of clicking around all the application menus to look for something, you can press Cmd+Shift+P and search for the command. Not only can you see and quickly search through thousands of possible commands, but you can also see if there is a keybinding associated with it. This is great because it means you can guess your way to doing interesting things while also learning the shortcut key strokes for doing it.

What is the shortcut to display the Command Palette?

On Mac, it is Command+Shift+P

How can we open the Settings View?

  • Use the Atom > Preferences menu item in the menu bar
  • Search for settings-view:open in the Command Palette
  • Use the Cmd+, keybinding

What can we use the Settings View for?

We can use it for changing the theme, specifying how to handle wrapping, font settings, tab size, scroll speed and much more. You can also use this screen to install new packages and themes.

How can we change Atom to use a different theme?

The Settings View also lets you change the themes for Atom. Atom ships with 4 different UI themes, dark and light variants of the Atom and One theme, as well as 8 different syntax themes. You can modify the active theme or install new themes by clicking on the Themes tab in the sidebar of the Settings View.

The UI themes control the style of UI elements like the tabs and the tree view, while the syntax themes control the syntax highlighting of text you load into the editor. To change the syntax or UI theme, simply pick something different in the appropriate dropdown list.

There are also dozens of themes on https://atom.io that you can choose from if you want something different. We will cover customizing a theme in Style Tweaks and creating your own theme in Creating a Theme.

How can we use the Settings View to change white spaces and wrapping preferences?

You can use the Settings View to specify your whitespace and wrapping preferences. Enabling "Soft Tabs" will insert spaces instead of actual tab characters when you press the Tab key and the "Tab Length" setting specifies how many spaces to insert when you do so, or how many spaces are used to represent a tab if "Soft Tabs" is disabled.

What is a soft tab?

You can use the Settings View to specify your whitespace and wrapping preferences. Enabling "Soft Tabs" will insert spaces instead of actual tab characters when you press the Tab key and the "Tab Length" setting specifies how many spaces to insert when you do so, or how many spaces are used to represent a tab if "Soft Tabs" is disabled.

What is a soft wrap?

The "Soft Wrap" option will wrap lines that are too long to fit in your current window. If soft wrapping is disabled, the lines will simply run off the side of the screen and you will have to scroll the window to see the rest of the content. If "Soft Wrap At Preferred Line Length" is toggled, the lines will wrap at 80 characters instead of the end of the screen. You can also change the default line length to a value other than 80 on this screen.

How can we open a file for editing?

There are several ways to open a file in Atom. You can do it by choosing File > Open from the menu bar or by pressing Cmd+O to choose a file from the standard dialog.

What is the purpose of the 'Install Shell Commands' menu item?

Another way to open a file in Atom is from the command line using the atom command. The Atom menu bar has a command named "Install Shell Commands" which installs the atom and apm commands if Atom wasn't able to install them itself.

You can run the atom command with one or more file paths to open up those files in Atom. This is a great tool if you're used to the terminal or you work from the terminal a lot. Just fire off atom [files] and you're ready to start editing.

How can we save a file?

To save a file you can choose File > Save from the menu bar or Cmd+S to save the file. If you choose File > Save As or press Cmd+Shift+S then you can save the current content in your editor under a different file name. Finally, you can choose File > Save All or press Alt+Cmd+S to save all the open files in Atom.

How can we open directories?

Atom doesn't just work with single files though; you will most likely spend most of your time working on projects with multiple files. To open a directory, choose the menu item File > Open and select a directory from the dialog. You can also add more than one directory to your current Atom window, by choosing File > Add Project Folder from the menu bar or pressing Cmd+Shift+O.

You can open any number of directories from the command line by passing their paths to the atom command line tool. For example, you could run the command atom ./hopes ./dreams to open both the hopes and the dreams directories at the same time. When you open Atom with one or more directories, you will automatically get a Tree View on the side of your window.

The Tree View allows you to explore and modify the file and directory structure of your project. You can open, rename, delete and create new files from this view.

How can we show or hide the Tree View?

You can also hide and show it with Cmd+\ or the tree-view:toggle command from the Command Palette.

How can we focus the Tree View?

Use Ctrl+0 will focus it. When the Tree view has focus you can press A, M, or Delete to add, move or delete files and folders. You can also right-click on a file or folder in the Tree view to see many of the various options.

Is the Tree View part of the Atom's core packages?

No. Like many parts of Atom, the Tree View is not built directly into the editor, but is its own standalone package that is shipped with Atom by default. Packages that are bundled with Atom are referred to as Core packages. Ones that aren't bundled with Atom are referred to as Community packages. You can find the source code to the Tree View on GitHub at https://github.com/atom/tree-view.

This is one of the interesting things about Atom. Many of its core features are actually just packages implemented the same way you would implement any other functionality. This means that if you don't like the Tree View for example, you could write your own implementation of that functionality and replace it entirely.

What is the purpose of the Cmd+T or Cmd+P commands?

Once you have a project open in Atom, you can easily find and open any file within that project. If you press Cmd+T or Cmd+P, the Fuzzy Finder will pop up. This will let you quickly search for any file in any directory your project by typing parts of the path.

You can also search through only the files currently opened (rather than every file in your project) with Cmd+B. This searches through your "buffers" or open files. You can also limit this fuzzy search with Cmd+Shift+B, which searches only through the files which are new or have been modified since your last Git commit.

The fuzzy finder uses the core.ignoredNames, fuzzy-finder.ignoredNames and core.excludeVCSIgnoredPaths configuration settings to filter out files and folders that will not be shown. If you have a project with tons of files you don't want it to search through, you can add patterns or paths to either of these config settings or your standard .gitignore files. We'll learn more about config settings in Global Configuration Settings, but for now you can easily set these in the Settings View under Core Settings.

Both core.ignoredNames and fuzzy-finder.ignoredNames are interpreted as glob patterns as implemented by the minimatch Node module.

How can we install new packages?

In order to install a new package, you can use the Install tab in the now familiar Settings View. Open up the Settings View using Cmd+,, click on the "Install" tab and type your search query into the box under Install Packages.

The packages listed here have been published to http://atom.io/packages which is the official registry for Atom packages. Searching on the Settings View will go to the Atom package registry and pull in anything that matches your search terms. All of the packages will come up with an "Install" button. Clicking that will download the package and install it. Your editor will now have the functionality that the package provides.

How can we change settings for various packages?

Once a package is installed in Atom, it will show up in the Settings View under the "Packages" tab, along with all the preinstalled packages that come with Atom. To filter the list in order to find one, you can type into search box directly under the "Installed Packages" heading.

Clicking on the "Settings" button for a package will give you the settings screen for that package specifically. Here you have the option of changing some of the default variables for the package, seeing what all the command keybindings are, disabling the package temporarily, looking at the source code, seeing the current version of the package, reporting issues and uninstalling the package.

If a new version of any of your packages is released, Atom will automatically detect it and you can upgrade the package from either this screen or from the "Updates" tab. This helps you easily keep all your installed packages up to date.

How can we install new theme?

You can also find and install new themes for Atom from the Settings View. These can be either UI themes or syntax themes and you can search for them from the "Install" tab, just like searching for new packages. Make sure to press the "Themes" toggle next to the search box. Clicking on the theme title will take you to a profile page for the theme on atom.io, which often has a screenshot of the theme. This way you can see what it looks like before installing it.

Clicking on "Install" will install the theme and make it available in the Theme dropdowns as we saw in Changing the Theme.

How can we install packages or themes from the command line?

You can also install packages or themes from the command line using apm. Check that you have apm installed by running the following command in your terminal:

apm help install

You should see a message print out with details about the apm install command. You can also install packages by using the apm install command:

  • apm install <package_name> to install the latest version.
  • apm install <package_name>@<package_version> to install a specific version.

You can also use apm to find new packages to install. If you run apm search, you can search the package registry for a search term. You can use apm view to see more information about a specific package.

How can we move up or down one character / line?

Use Ctrl+P and Ctrl+N

How can we move left or right one character?

Use Ctrl+B and Ctrl+F

What is the shortcut for moving to the beginning of word?

Alt+Left or Alt+B

What is the shortcut for moving to the end of word?

Alt+Right or Alt+F

What is the shortcut for moving to the first character of the current line?

Cmd+Left or Ctrl+A

What is the shortcut for moving to the end of the line?

Cmd+Right or Ctrl+E

What is the shortcut for moving to the top of the file?

Cmd+Up

What is the shortcut for moving to the bottom of the file?

Cmd+Down

What is the shortcut for moving to a specific line or column?

Ctrl+G

This will bring up a dialog that asks which line you would like to jump to. You can also use the row:column syntax to jump to a character in that line as well.

What is the shortcut for navigating by symbols?

You can also jump around a little more informatively with the Symbols View. To jump to a symbol such as a method definition, press Cmd+R. This opens a list of all symbols in the current file, which you can fuzzy filter similarly to Cmd+T. You can also search for symbols across your project but it requires a tags file.

How can we generate a tags file?

You can also jump around a little more informatively with the Symbols View. To jump to a symbol such as a method definition, press Cmd+R. This opens a list of all symbols in the current file, which you can fuzzy filter similarly to Cmd+T. You can also search for symbols across your project but it requires a tags file.

You can generate a tags file by using the ctags utility. Once it is installed, you can use it to generate a tags file by running a command to generate it. See the ctags documentation for details.

Once you have your tags file generated, you can use it to search for symbols across your project by pressing Cmd+Shift+R. This also enables you to use Alt+Cmd+Down to go to and Alt+Cmd+Up to return from the declaration of the symbol under the cursor.

You can customize how tags are generated by creating your own .ctags file in your home directory, ~/.ctags. An example can be found here. The symbols navigation functionality is implemented in the symbols-view package.

How can we bookmark specific lines?

Atom also has a great way to bookmark specific lines in your project so you can jump back to them quickly. If you press Cmd+F2, Atom will toggle a "bookmark" on the current line. You can set these throughout your project and use them to quickly find and jump to important lines of your project. A small bookmark symbol is added to the line gutter, like on line 22 of the image below.

What is the shortcut to bookmark the current line?

Cmd+F2

What is the shortcut to go to the next bookmarked line?

If you hit F2, Atom will jump to the next bookmark in the file you currently have focused. If you use Shift+F2 it will cycle backwards through them instead.

What is the shortcut to display all the current bookmarks?

You can also see a list of all your project's current bookmarks and quickly filter them and jump to any of them by hitting Ctrl+F2.

What is the name of the package that implement the bookmark functionality?

The bookmarks functionality is implemented in the bookmarks package.

What is the shortcut to select the line above the current line?

Shift+Up or Ctrl+Shift+P

What is the shortcut to select the line below the current line?

Shift+Down or Ctrl+Shift+N

What is the shortcut to select the previous character?

Shift+Left or Ctrl+Shift+B

What is the shortcut to select the next character?

Shift+Right or Ctrl+Shift+F

What is the shortcut to select to the beginning of the word?

Alt+Shift+Left or Alt+Shift+B

What is the shortcut to select to the end of the word?

Alt+Shift+Right or Alt+Shift+F

What is the shortcut to select to the end of the line?

Cmd+Shift+Right or Ctrl+Shift+E

What is the shortcut to select to the first character of the line?

Cmd+Shift+Left or Ctrl+Shift+A

What is the shortcut to select to the top of the file?

Cmd+Shift+Up

What is the shortcut to select to the bottom of the file?

Cmd+Shift+Down

What is the shortcut to select the entire contents of the file?

Cmd+A

What is the shortcut to select the entire line?

Cmd+L

What is the shortcut to select the current word?

Ctrl+Shift+W

What is the shortcut to join the next line to the end of the current line?

Cmd+J

What is the shortcut to move the current line up or down?

Cmd+Ctrl+Up/Down

What is the shortcut to duplicate the current line?

Cmd+Shift+D

What is the shortcut to upper case the current word?

Cmd+K Cmd+U

What is the shortcut to lower case the current word?

Cmd+K Cmd+L

What is the shortcut to transpose two characters?

Ctrl+T

This swaps the two characters on either side of the cursor.

How can we reformat the current selection to have lines no longer than 80?

Atom also has built in functionality to re-flow a paragraph to hard-wrap at a given maximum line length. You can format the current selection to have lines no longer than 80 (or whatever number editor.preferredLineLength is set to) characters using Alt+Cmd+Q. If nothing is selected, the current paragraph will be reflowed.

What is the shortcut to delete the current line?

Ctrl+Shift+K

What is the shortcut to delete to the beginning of the word?

Alt+Backspace or Alt+H

What is the shortcut to delete to the end of the word?

Alt+Delete or Alt+D

What is the shortcut to delete to the end of line?

Cmd+Delete

What is the shortcut to cut to the end of line?

Ctrl+K

What is the shortcut to delete to the beginning of the line?

Cmd+Backspace

What is this multiple cursors and selections stuff?

I NEED TO EXPLORE THIS. Using these commands you can place cursors in multiple places in your document and effectively execute the same commands in multiple places at once. This can be incredibly helpful in doing many type of repetitive tasks such as renaming variables or changing the format of some text. You can use this with almost any plugin or command - for example, changing case and moving or duplicating lines. You can also use the mouse to select text with the command key pressed down to select multiple regions of your text simultaneously.

What is the shortcut to add a new cursor at the clicked location?

Cmd+Click

What is the shortcut to add another cursor above/below the current cursor?

Ctrl+Shift+Up/Down

What is the shortcut to select the next word in the document that is the same as the currently selected word?

Cmd+D

What is the shortcut to select all words in the document that are the same as the currently selected word?

Cmd+Ctrl+G

What is the shortcut to convert a multi-line selection into multiple cursors?

Cmd+Shift+L

Is there a shortcut for dealing with whitespaces?

No, not by default. Atom comes with several commands to help you manage the whitespace in your document. One very useful pair of commands converts leading spaces into tabs and converts leading tabs into spaces. If you're working with a document that has mixed whitespace, these commands are great for helping to normalize the file. There are no keybindings for the whitespace commands, so you will have to search your command palette for "Convert Spaces to Tabs" (or vice versa) to run one of these commands. The whitespace commands are implemented in the atom/whitespace package. The settings for the whitespace commands are managed on the page for the whitespace package.

How can we disable the "Remove Trailing Whitespace" option?

The "Remove Trailing Whitespace" option is on by default. This means that every time you save any file opened in Atom, it will strip all trailing whitespace from the file. If you want to disable this, go to the whitespace package in your settings panel and uncheck that option. Atom will also by default ensure that your file has a trailing newline. You can also disable this option on that screen.

How can we disable the trailing newline option?

The "Remove Trailing Whitespace" option is on by default. This means that every time you save any file opened in Atom, it will strip all trailing whitespace from the file. If you want to disable this, go to the whitespace package in your settings panel and uncheck that option. Atom will also by default ensure that your file has a trailing newline. You can also disable this option on that screen.

What happens if we select some text and type a quote character?

It will wrap the selected text inside the quote characters. Atom ships with intelligent and easy to use bracket handling. It will by default highlight [], (), and {} style brackets when your cursor is over them. It will also highlight matching XML and HTML tags. Atom will also automatically autocomplete [], (), and {}, "", '', “”, ‘’, «», ‹›, and backticks when you type the leading one. If you have a selection and you type any of these opening brackets or quotes, Atom will enclose the selection with the opening and closing brackets or quotes.

What is the shortcut to jump to the bracket matching the one adjacent to the cursor.?

Ctrl+M

It jumps to the nearest enclosing bracket when there's no adjacent bracket.

What is the shortcut to select all the text inside the current brackets?

Cmd+Ctrl+M

What is the shortcut to close the current XML/HTML tag?

Alt+Cmd+.

What is the name of the package that implement the brackets functionalities?

The brackets functionality is implemented in the bracket-matcher package. Like all of these packages, to change defaults related to bracket handling, or to disable it entirely, you can navigate to this package in the Settings view.

What is the shortcut to change the file encoding?

Ctrl+Shift+U // Toggle menu to change file encoding

Atom also ships with some basic file encoding support should you find yourself working with non-UTF-8 encoded files, or should you wish to create one. If you pull up the file encoding dialog, you can choose an alternate file encoding to save your file in. When you open a file, Atom will try to auto-detect the encoding. If Atom can't identify the encoding, the encoding will default to UTF-8, which is also the default encoding for new files. If you pull up the encoding menu and change the active encoding to something else, the file will be written out in that encoding the next time you save the file. The encoding selector is implemented in the encoding-selector package.

What is the shortcut to search within a buffer?

Cmd+F

What is the shortcut to search the entire project?

Cmd+Shift+F

What is the shortcut to cycle through all matches?

Cmd+G

To search within your current file you can press Cmd+F, type in a search string and press Enter (or Cmd+G or the "Find Next" button) multiple times to cycle through all the matches in that file. The Find and Replace panel also contains buttons for toggling case sensitivity, performing regular expression matching and scoping the search to selections.

How can we limit the scope of a search to a subset of the files in our project?

You can limit a search to a subset of the files in your project by entering a glob pattern into the "File/Directory pattern" text box. For example, the pattern src/*.js would restrict the search to javascript files in the src directory. The "globstar" pattern () can be used to match arbitrarily many subdirectories. For example, docs//*.md will match docs/a/foo.md, docs/a/b/foo.md, etc.

When you have multiple project folders open, this feature can also be used to search in only one of those folders. For example, if you had the folders /path1/folder1 and /path2/folder2 open, you could enter a pattern starting with folder1 to search only in the first folder.

What is the shortcut to dismiss the Find & Replace panel?

Press Esc while focused on the Find and Replace panel to clear the pane from your workspace.

What is the name of the the package that implement the find and replace functionalities?

The Find and Replace functionality is implemented in the find-and-replace package and uses the scandal Node module to do the actual searching.

What is the concept of snippets?

Snippets are an incredibly powerful way to quickly generate commonly needed code syntax from a shortcut. The idea is that you can type something like habtm and then press the Tab key and it will expand into has_and_belongs_to_many. Many Core and Community packages come bundled with their own snippets that are specific to it. For example, the language-html package that provides support for HTML syntax highlighting and grammar comes with dozens of snippets to create many of the various HTML tags you might want to use. If you create a new HTML file in Atom, you can type html and then press Tab and it will expand to:

<html>
  <head>
    <title></title>
  </head>
  <body>

  </body>
</html>

It will also position the cursor in the middle of the title tag so you can immediately start filling out the tag. Many snippets have multiple focus points that you can move through with the Tab key as well - for instance, in the case of this HTML snippet, once you've filled out the title tag you can press Tab and the cursor will move to the middle of the body tag.

What is the shortcut to display all the available snippets for the particular file type that we are working with?

Alt+Shift+S

To see all the available snippets for the file type that you currently have open, you can type Alt+Shift+S. You can also use fuzzy search to filter this list down by typing in the selection box. Selecting one of them will execute the snippet where your cursor is (or multiple cursors are).

How can we define our own snippets?

There is a text file in your ~/.atom directory called snippets.cson that contains all your custom snippets that are loaded when you launch Atom. You can also easily open up that file by selecting the Atom > Snippets menu. The basic snippet format looks like this:

'.source.js':
  'console.log':
    'prefix': 'log'
    'body': 'console.log(${1:"crash"});$2'

The leftmost keys are the selectors where these snippets should be active. The easiest way to determine what this should be is to go to the language package of the language you want to add a snippet for and look for the "Scope" string. For example, if we wanted to add a snippet that would work for Java files, we would look up the language-java package in our Settings view and we can see the Scope is source.java. Then the top level snippet key would be that prepended by a period (like a CSS class selector would do).

snippet-scope.png

The next level of keys are the snippet names. These are used for describing the snippet in a more readable way in the snippet menu. You can name them whatever you want. Under each snippet name is a prefix that should trigger the snippet and a body to insert when the snippet is triggered.

Each $ followed by a number is a tab stop. Tab stops are cycled through by pressing Tab once a snippet has been triggered. Tab stops with the same number will create multiple cursors. The above example adds a log snippet to JavaScript files that would expand to:

console.log("crash");

The string "crash" would be initially selected and pressing tab again would place the cursor after the ;

Snippet keys, unlike CSS selectors, can only be repeated once per level. If there are duplicate keys at the same level, then only the last one will be read. See Configuring with CSON for more information.

How can we create a snippet with multiple lines body?

You can also use CoffeeScript multi-line syntax using """ for larger templates:

'.source.js':
  'if, else if, else':
    'prefix': 'ieie'
    'body': """
      if (${1:true}) {
        $2
      } else if (${3:false}) {
        $4
      } else {
        $5
      }
    """

Is there a snippet to help us with creating snippets?

Yes. As you might expect, there is a snippet to create snippets. If you open up a snippets file and type snip and then press Tab, you will get the following text inserted:

'.source.js':
  'Snippet Name':
    'prefix': 'hello'
    'body': 'Hello World!'

Just fill that bad boy out and you have yourself a snippet. As soon as you save the file, Atom should reload the snippets and you will immediately be able to try it out.

Can we have multiple snippets per source?

Yes. You can see below the format for including multiple snippets for the same scope in your snippets.cson file. Just include the snippet name, prefix, and body keys for additional snippets inside the scope key:

'.text.md':
  'Hello World':
    'prefix': 'hewo'
    'body': 'Hello World!'

  'Github Hello':
    'prefix': 'gihe'
    'body': 'Octocat says Hi!'

  'Octocat Image Link':
    'prefix': 'octopic'
    'body': '![GitHub Octocat](https://assets-cdn.github.com/images/modules/logos_page/Octocat.png)'

Again, see Configuring with CSON for more information on CSON key structure and non-repeatability.

Where can we get more information regarding snippets?

The snippets functionality is implemented in the snippets package. For more examples, see the snippets in the language-html and language-javascript packages.

How can we use the autocomplete functionality?

Like the snippet feature, autocomplete is also triggered by pressing the Tab key. When you press the Tab key, Atom display a drop-down list of matches. You can use the arrow up or arrow down key, and hit the Enter key to select the appropriate suggestion.

By default, the autocomplete system will look through the current open file for strings that match what you're starting to type. If you want more options, in the Settings panel for the autocomplete-plus package you can toggle a setting to make autocomplete-plus look for text in all your open buffers rather than just the current file. The Autocomplete functionality is implemented in the [https://github.com/atom/autocomplete-plus autocomplete-plus package.

What are the shortcuts for folding and unfolding?

Alt+Cmd+[ and Alt+Cmd+]

If you want to see an overview of the structure of the code file you're working on, folding can be a helpful tool. Folding hides blocks of code such as functions or looping blocks in order to simplify what is on your screen. You can fold blocks of code by clicking the arrows that appear when you hover your mouse cursor over the gutter. You can also fold and unfold from the keyboard with the Alt+Cmd+[ and Alt+Cmd+] keybindings.

What is the shortcut to fold everything?

Alt+Cmd+Shift+[

What is the shortcut to unfold everything?

Alt+Cmd+Shift+]

What is the shortcut to fold at a specific indentation level?

Cmd+K Cmd+0-9. You can fold at a specific indentation level with Cmd+K Cmd+0-9 where the number is the indentation depth.

What is the shortcut to fold arbitrary sections of your code?

Alt+Cmd+Ctrl+F. You can fold arbitrary sections of your code or text by making a selection and then typing Alt+Cmd+Ctrl+F or choosing "Fold Selection" in the Command Palette.

What is the shortcut for ?

Cmd+K Up/Down/Left/Right. You can split any editor pane horizontally or vertically by using Cmd+K Up/Down/Left/Right where the direction key is the direction to split the pane. Once you have a split pane, you can switch between them with Cmd+K Cmd+Up/Down/Left/Right where the direction is the direction the focus should move to.

How can we move files between panes?

Each pane has its own "pane items", which are represented by tabs. You can move the files from pane to pane by dragging them with the mouse and dropping them in the pane you want that file to be in.

How can we disable the tabs package?

If you don't like using tabs, you don't have to. You can disable the tabs package and each pane will still support multiple pane items. You just won't have tabs to use to click between them.

What is the shortcut to close all panes items?

Cmd+W

How can we configure whether panes auto-close when empty?

You can configure whether panes auto-close when empty in the Settings View with the "Remove Empty Panes" setting under Core Settings.

What is the purpose of the "Pending Pane Item"?

"Pending Pane Items" were formerly referred to as "Preview Tabs". When you open a new file by single-clicking in the Tree View, it will open in a new tab with an italic title. This indicates that the file is "pending". When a file is pending, it will be replaced by the next pending file that is opened. This allows you to click through a bunch of files to find something without having to go back and close them all.

You can confirm a pending file by doing any of the following:

  • Double-clicking the tab of the file
  • Double-clicking the file in the tree view
  • Editing the contents of the file
  • Saving the file

You can also open a file already confirmed by double-clicking it in the tree view instead of single-clicking it.

How can we disable the "Pending Pane Item"?

If you would prefer to not have files open in pending form, you can disable this behavior by unchecking "Allow Pending Pane Items" in the Core Settings section of the Settings View. With pending pane items disabled, single-clicking a file in the Tree View will select the file but not open it. You will have to double-click the file to open it.

What is the shortcut to specify the grammar for the current file?

Ctrl+Shift+L

When you load a file, Atom does a little work to try to figure out what type of file it is. Largely this is accomplished by looking at its file extension (.md is generally a Markdown file, etc), though sometimes it has to inspect the content a bit to figure it out. When you open a file and Atom can't determine a grammar for the file, it will default to "Plain Text", which is the simplest one. If it does default to "Plain Text", picks the wrong grammar for the file, or if for any reason you wish to change the selected grammar, you can pull up the Grammar Selector with Ctrl+Shift+L.

When the grammar of a file is changed, Atom will remember that for the current session. The Grammar Selector functionality is implemented in the grammar-selector package.

How can we use Git and GitHub with Atom?

Version control is an important aspect of any project and Atom comes with basic Git and GitHub integration built in. In order to use version control in Atom, the project root needs to contain the Git repository.

What is the shortcut to check out the HEAD revision of the file in the editor?

Alt+Cmd+Z. The Alt+Cmd+Z keybinding checks out the HEAD revision of the file in the editor.

This is a quick way to discard any saved and staged changes you've made and restore the file to the version in the HEAD commit. This is essentially the same as running git checkout HEAD — <path> and git reset HEAD — <path> from the command line for that path.

This command goes onto the undo stack so you can use Cmd+Z afterwards to restore the previous contents.

What is the shortcut to quickly open files in the project?

Cmd+T. Atom ships with the fuzzy-finder package which provides Cmd+T to quickly open files in the project and Cmd+B to jump to any open editor.

What is the shortcut to jump to any open editor?

Cmd+B. Atom ships with the fuzzy-finder package which provides Cmd+T to quickly open files in the project and Cmd+B to jump to any open editor.

What is the shortcut to display a list of all the untracked and modified files in the project?

Cmd+Shift+B. The package also provides Cmd+Shift+B which displays a list of all the untracked and modified files in the project. These will be the same files that you would see on the command line if you ran git status.

An icon will appear to the right of each file letting you know whether it is untracked or modified.

How can we configure git to use Atom as the commit editor?

You can configure Atom to be your Git commit editor with the following command:

git config --global core.editor "atom --wait"

Atom can be used as your Git commit editor and ships with the language-git package which adds syntax highlighting to edited commit, merge, and rebase messages.

The language-git package will help remind you to be brief by colorizing the first lines of commit messages when they're longer than 50 or 65 characters.

How can we determine the current checkout branch?

The status-bar package that ships with Atom includes several Git decorations that display on the right side of the status bar. The currently checked out branch name is shown with the number of commits the branch is ahead of or behind its upstream branch. An icon is added if the file is untracked, modified, or ignored. The number of lines added and removed since the file was last committed will be displayed as well.

How can we determine if the line was added, modified, or removed?

The included git-diff package colorizes the gutter next to lines that have been added, edited, or removed.

git-lines.png

What is the shortcut to move the cursor to the next or previous diff in the current editor?

Alt+G Down and Alt+G Up

What is the shortcut to open file on GitHub?

Alt+G O. If the project you're working on is on GitHub, there are also some very useful integrations you can use. Most of the commands will take the current file you're viewing and open a view of that file on GitHub - for instance, the blame or commit history of that file.

What is the shortcut to open blame view of file on GitHub?

Alt+G B

What is the shortcut to open History view of file on GitHub?

Alt+G H

What is the shortcut to copy the URL of the current file on GitHub to the clipboard?

Alt+G C

What is the shortcut to Branch compare on GitHub?

Alt+G R

The branch comparison shows you the commits that are on the branch you're currently working on locally that are not on the mainline branch.

open-on-github.png

What is the shortcut to pull up a menu of possible spelling corrections?

Cmd+Shift+; Any misspelled words will be highlighted (by default with a dashed red line beneath the word) and you can pull up a menu of possible corrections by hitting Cmd+Shift+; (or by choosing "Correct Spelling" from the right-click context menu or from the Command Palette).

How can we add more types of files to the list of what Atom will try to spell check?

To add more types of files to the list of what Atom will try to spell check, go to the Spell Check package settings in your Settings view and add any grammars you want to spell check.

The default grammars to spell check are text.plain, source.gfm, and text.git-commit but you can add something like source.asciidoc if you wish to check those types of files too.

The spell checking is implemented in the spell-check package.

What is the shortcut toggle Preview mode for Markdown?

Ctrl+Shift+M. When writing prose in a markup language, it's often very useful to get an idea of what the content will look like when it's rendered. Atom ships with a package for previewing Markdown by default. As you edit the text, the preview will also update automatically. This makes it fairly easy to check your syntax as you type.

Is there a shortcut for copying the rendered HTML from the preview pane?

No. You can copy the rendered HTML from the preview pane into your system clipboard. There is no keybinding for it, but you can find it in the Command Palette by searching for "Markdown Preview Copy HTML".

What is the name of the package that provide the markdown preview functionality?

Markdown preview is implemented in the markdown-preview package.

What is the snippet for markdown image?

If you type img and hit tab you get a Markdown-formatted image embed code like ![]().

What is a snippet for a markdown table?

If you type table and hit tab you get a nice example table to fill out.

What is the snippet for markdown bold?

b and the tab key

What is the snippet for markdown italic?

i and the tab key

What is the snippet for markdown code block?

'code' (without the quotes) and the tab key

What is the shortcut to display the list of available snippets?

Alt+Shift+S. You can easily see a list of all available snippets for the type of file you're currently in by hitting Alt+Shift+S.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License