Merge pull request #7 from cah-danmonroe/editors

Port over Editors

Author: Jen Weber

guides/reference/dev-tools.md

@@ -1 +1,148 @@
-<!-- Copy over code editor content -->
+<!-- Copy over code editor content -->
+
+### Visual Studio Code
+If you are using [VSCode](https://code.visualstudio.com/) with `ember-cli`, there's an [official
+extension pack](https://marketplace.visualstudio.com/items?itemName=emberjs.emberjs#overview) 
+maintained by the Ember Learning team that adds multiple ember plugins that can help in 
+Ember development. If you already have VSCode installed on your machine, you can 
+[click here](vscode:extension/emberjs.emberjs) to view this extension pack inside VSCode. Alternatively, you can 
+also search for `emberjs.emberjs` inside the [extensions view](https://code.visualstudio.com/docs/editor/extension-gallery).
+
+### Atom
+
+If you are using [Atom](https://atom.io) with `ember-cli`, there are some
+packages available specific to Ember development.
+
+`Atom -> Preferences -> Install`
+
+* [ember-cli-helper](https://atom.io/packages/ember-cli-helper) - ember-cli integration in Atom
+* [ember-tabs](https://atom.io/packages/ember-tabs) - Makes atom.io work better with Ember pods
+* [atom-ember-components](https://atom.io/packages/atom-ember-components) - See all controllers and components that are rendering your component. Currently only works with pods structure.
+
+### Emacs
+
+If you are using [Emacs](https://www.gnu.org/software/emacs/) with `ember-cli`,
+Emacs creates temporary backup, autosave, and lockfiles that interfere with
+broccoli watcher, so they need to either be moved out of the way or disabled.
+To do that, ensure your emacs configuration contains the following:
+
+```bash
+(setq backup-directory-alist `((".*" . ,temporary-file-directory)))
+(setq auto-save-file-name-transforms `((".*" ,temporary-file-directory t)))
+(setq create-lockfiles nil)
+```
+
+An [ember-mode](https://github.com/madnificent/ember-mode) package is also
+available. It has shortcuts for quickly navigating files in ember projects,
+running generators, and running build, serve, and test tasks. It also includes
+support for linking build errors to files and minibuffer notifications of
+`ember serve` status. It can be installed from [MELPA](http://melpa.org/). To
+use MELPA, ensure your configuration contains the following:
+
+```bash
+(require 'package)
+(add-to-list 'package-archives
+             '("melpa" . "http://melpa.org/packages/") t)
+(package-initialize)
+```
+
+Then ember-mode can be installed from the package menu at `M-x
+package-list-packages`. After it is installed, add a file named
+`.dir-locals.el` to the root of your ember projects with the contents:
+
+```bash
+((nil . ((mode . ember))))
+```
+
+to enable it inside those projects.
+
+
+### Sublime Text
+
+If you are using [Sublime Text](http://www.sublimetext.com) with `ember-cli`,
+by default it will try to index all files in your `tmp` directory for its
+GoToAnything functionality.  This will cause your computer to come to a
+screeching halt @ 90%+ CPU usage, and can significantly increase build times.
+Simply remove these directories from the folders Sublime Text watches:
+
+`Sublime Text -> Preferences -> Settings - User`
+
+```js
+// folder_exclude_patterns and file_exclude_patterns control which files
+// are listed in folders on the side bar. These can also be set on a per-
+// project basis.
+"folder_exclude_patterns": [".svn", ".git", ".hg", "CVS", "tmp/class-*", "tmp/es_*", "tmp/jshinter*", "tmp/replace_*", "tmp/static_compiler*", "tmp/template_compiler*", "tmp/tree_merger*", "tmp/coffee_script*", "tmp/concat-tmp*", "tmp/export_tree*", "tmp/sass_compiler*"]
+```
+
+### WebStorm
+If you are using [WebStorm](https://www.jetbrains.com/webstorm/) with
+`ember-cli`, you will need to modify your `.gitignore` file, enable
+`ECMAScript6` settings, and mark certain directories.
+
+First, add the following line to `.gitignore`:
+```bash
+.idea
+```
+
+Next, from the WebStorm menu:
+
+`File > Settings -> Languages & Frameworks -> JavaScript -> ECMAScript6`
+
+Click 'OK' to close the Settings modal window.
+
+Next, in Webstorm's Project window right-click on each of the following
+directories, go to 'Mark Directory As' and mark as indicated:
+
+Mark as `Excluded`:
+```bash
+/tmp
+/dist
+```
+
+Mark as `Resource Root`:
+```bash
+/
+/bower_components
+/bower_components/ember-qunit/lib
+/public
+```
+
+Mark as `Test Sources Root`:
+```bash
+/tests
+```
+
+### Intellij-emberjs
+
+[This plugin](https://github.com/Turbo87/intellij-emberjs) provides excellent
+Ember.js support for all JetBrains IDEs that support JavaScript, including
+WebStorm.
+
+In order to install it, go to:
+
+`File | Settings... | Plugins | Browse repositories...`
+
+Search for `Ember.js` and click the Install button.
+
+### Vim
+
+If you are using [Vim](http://www.vim.org/) with `ember-cli`, Vim creates
+temporary backups and autosaves which interfere with broccoli, so they need to
+either be moved out of the way or disabled. To do that, ensure your .vimrc
+contains the following:
+
+```bash
+set backupdir=~/.vim/backup//
+set directory=~/.vim/swap//
+set undodir=~/.vim/undo//
+```
+
+And make sure to create the directories: 
+```bash
+mkdir -p ~/.vim/backup; mkdir -p ~/.vim/swap; mkdir -p ~/.vim/undo
+```
+
+Some useful Vim plugins for working with Ember.js:
+
+- [ember_tools](https://github.com/AndrewRadev/ember_tools.vim) - Provides various tools for navigation and code reformatting, similar to rails.vim for Rails.
+- [projectionist](https://github.com/tpope/vim-projectionist) - Powerful project navigation, provided you write your own code projections. Here's [an example](https://gist.github.com/AndrewRadev/3524ee46bca8ab349329)