Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
149 lines (112 sloc) 5.7 KB
layout title permalink category github

Visual Studio Code

If you are using VSCode with ember-cli, there's an official extension pack 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 to view this extension pack inside VSCode. Alternatively, you can also search for emberjs.emberjs inside the extensions view.


If you are using Atom with ember-cli, there are some packages available specific to Ember development.

Atom -> Preferences -> Install

  • ember-cli-helper - ember-cli integration in Atom
  • ember-tabs - Makes work better with Ember pods
  • atom-ember-components - See all controllers and components that are rendering your component. Currently only works with pods structure.


If you are using 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:

{% highlight lisp %} (setq backup-directory-alist ((".*" . ,temporary-file-directory))) (setq auto-save-file-name-transforms ((".*" ,temporary-file-directory t))) (setq create-lockfiles nil) {% endhighlight %}

An 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. To use MELPA, ensure your configuration contains the following:

{% highlight lisp %} (require 'package) (add-to-list 'package-archives '("melpa" . "") t) (package-initialize) {% endhighlight %}

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:

{% highlight lisp %} ((nil . ((mode . ember)))) {% endhighlight %}

to enable it inside those projects.

Sublime Text

If you are using Sublime Text 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

{% highlight javascript %} // 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*"] {% endhighlight %}


If you are using 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: {% highlight bash %} .idea {% endhighlight %}

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: {% highlight bash %} /tmp /dist {% endhighlight %}

Mark as Resource Root: {% highlight bash %} / /bower_components /bower_components/ember-qunit/lib /public {% endhighlight %}

Mark as Test Sources Root: {% highlight bash %} /tests {% endhighlight %}


This plugin 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 hit the Install button.


If you are using Vim 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:

{% highlight bash %} set backupdir=/.vim/backup// set directory=/.vim/swap// set undodir=~/.vim/undo// {% endhighlight %}

And make sure to create the directories- mkdir -p ~/.vim/backup; mkdir -p ~/.vim/swap; mkdir -p ~/.vim/undo

Some useful Vim plugins for working with Ember.js:

  • ember_tools - Provides various tools for navigation and code reformatting, similar to rails.vim for Rails.
  • projectionist - Powerful project navigation, provided you write your own code projections. Here's an example