Skip to content

Instantly share code, notes, and snippets.

@juno juno/
Last active Dec 27, 2018

What would you like to do?
My Atom editor setup.

My Atom editor setup


Atom Shell Commands

  • Launch Atom and select "Atom - Install Shell Commands" menu to install atom and apm commands
  • Add /usr/local/bin to PATH environment varibale
    • Now, you can load file from terminal with atom [directory or file]

Plugin packages

Install following plugins.



  • git-blame - Toggle git-blame annotations in the gutter of atom editor.
  • tree-view-git-status - Show the Git repository status in the Atom tree-view.


  • file-icons - Assign file extension icons and colours for improved visual grepping.
  • pigments - A package to display colors in project and files.



  • atom-ide-ui - Atom UIs to support language services and debuggers as part of Atom IDE
  • ide-css - Atom-IDE for CSS, LESS and SCSS language
  • ide-json - JSON language support for Atom-IDE, powered by VSCode JSON Language Server
  • ide-python - Python language support for Atom-IDE, powered by the Python language server
  • ide-rust - Rust language support for Atom-IDE, powered by the Rust Language Server (RLS)
  • ide-yaml - Atom-IDE support for YAML language

JavaScript support:

  • language-babel - ES2017, flow, React JSX and GraphQL grammar and transpilation for ATOM
  • language-graphql - Syntax highlighting for GraphQL queries
  • prettier-atom - Atom plugin for formatting JavaScript using prettier with (optional) prettier-eslint integration

Elixir support:

Rails support:

Arduino support:


Theme packages

Install following themes.


process.env.LC_CTYPE = 'ja_JP.UTF-8'
'cmd-p': 'command-palette:toggle'
# project-manager
'ctrl-cmd-p': 'project-manager:list-projects'
'.platform-darwin atom-text-editor:not([mini])':
'alt-y': 'clipboard-plus:toggle'
'cmd-w': 'core:copy' # Disable core:close
# Disable tab select by recent use
'ctrl-tab ^ctrl': 'unset!'
'ctrl-tab': 'pane:show-next-item'
'ctrl-shift-tab ^ctrl': 'unset!'
'ctrl-shift-tab': 'pane:show-previous-item'
# atom-fuzzy-grep
'ctrl-alt-g': 'fuzzy-grep:toggle'
# rails-transporter
'alt-r c': 'rails-transporter:open-controller'
'alt-r v f': 'rails-transporter:open-view-finder'
'alt-r v': 'rails-transporter:open-view'
'alt-r l': 'rails-transporter:open-layout'
'alt-r m': 'rails-transporter:open-model'
'alt-r h': 'rails-transporter:open-helper'
'alt-r t': 'rails-transporter:open-test'
'alt-r s': 'rails-transporter:open-spec'
'alt-r p': 'rails-transporter:open-partial-template'
'alt-r a': 'rails-transporter:open-asset'
'alt-r d m': 'rails-transporter:open-migration-finder'
'alt-r f': 'rails-transporter:open-factory'
# Your snippets
# Atom snippets allow you to enter a simple prefix in the editor and hit tab to
# expand the prefix into a larger code block with templated values.
# You can create a new snippet in this file by typing "snip" and then hitting
# tab.
# An example CoffeeScript snippet to expand log to console.log:
# '':
# 'Console log':
# 'prefix': 'log'
# 'body': 'console.log $1'
# Each scope (e.g. '' above) can only be declared once.
# This file uses CoffeeScript Object Notation (CSON).
# If you are unfamiliar with CSON, you can read more about it in the
# Atom Flight Manual:
# language-ruby-on-rails
'.source.ruby.rails, .text.html.ruby, .text.haml, .source.js.rails':
'prefix': '='
'body': '<%= $1 %>'
'.source.ruby.rails, .text.html.ruby, .text.haml':
'prefix': '-'
'body': '<% $1 %>'
* Your Stylesheet
* This stylesheet is loaded when Atom starts up and is reloaded automatically
* when it is changed and saved.
* Add your own CSS or Less to fully customize Atom.
* If you are unfamiliar with Less, you can read more about it here:
// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor.editor {
.syntax--comment {
font-style: normal;
@custom-font-family: 'Fira Code';
@custom-font-size-s: 14px;
@custom-tree-view-color: #b0bec5; // Blue Grey 200
// nord-atom-ui
// .tree-view {
// .project-root {
// & > .header {
// & .name {
// color: @custom-tree-view-color;
// font-family: @custom-font-family;
// font-size: @custom-font-size-s;
// font-weight: normal;
// }
// }
// & > .entries {
// .list-item {
// color: @custom-tree-view-color;
// font-family: @custom-font-family !important;
// font-size: @custom-font-size-s;
// font-weight: normal;
// }
// }
// }
// }
// tree-view-git-status
.tree-view-git-status {
font-family: @custom-font-family;
font-size: @custom-font-size-s;
font-weight: normal;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.