This section provides information on integrating Ember into various code editors and how to debug Ember CLI node code.
Code editor integrations
Visual Studio Code
If you are using VSCode with Ember CLI, there's an official
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 atom.io work better with Ember pods
- atom-ember-components - See all controllers and components that are rendering your component. Currently only works with pods structure.
- atom-ember-snippets - Autocomplete for Ember module imports, component, service and route skeletons, and more.
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:
(setq backup-directory-alist `((".*" . ,temporary-file-directory))) (setq auto-save-file-name-transforms `((".*" ,temporary-file-directory t))) (setq create-lockfiles nil)
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:
(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
package-list-packages. After it is installed, add a file named
.dir-locals.el to the root of your Ember projects with the contents:
((nil . ((mode . ember))))
to enable it inside those projects.
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
// 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*"]
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
Next, from the WebStorm menu:
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:
/ /bower_components /bower_components/ember-qunit/lib /public
Test Sources Root:
In order to install it, go to:
File | Settings... | Plugins | Browse repositories...
Ember.js and click 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:
set backupdir=~/.vim/backup// set directory=~/.vim/swap// set undodir=~/.vim/undo//
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:
Debugging Node code
Node's debugger and Chrome's DevTools can debug node code in an addon or app. For example, debugging Broccoli errors in an addon's
To debug, place a
debugger statement where the code should break. Then serve the application using
node --inspect node_modules/ember-cli/bin/ember serve
You will see a message like this in the console.
Debugger listening on ws://127.0.0.1:9229/9c664016-bcfa-444b-b7fe-57d91a0d6e8f For help see https://nodejs.org/en/docs/inspector Debugger attached.
If you used
chrome://inspect, click on the
inspect link to launch DevTools. NiM will automatically open DevTools.
Stop Ember serve using
Ctrl-C and then close the DevTools tab.
Debugging custom blueprints
You can use also use the node debugger when writing custom blueprints. To debug a blueprint
index.js file, place a
debugger statement where the code should break and then generate the blueprint using
node --inspect-brk node_modules/ember-cli/bin/ember generate <my-blueprint> <name>
The debugger will pause on the first line of Ember's generator code. Click on the debugger's
run button to go to your breakpoint.