Ember.vim

Ember.vim is a Vim plugin for the Emberjs frontend framework inspired by vim-rails.

The core feature set is derived from Portkey. Briefly, Portkey provides the foundation needed to do vim-rails style :Alternate, :Related navigation within an Emberjs project. This plugin provides default projections for a typical ember project.

Features

• Alternate and Related navigation with :A and :R
• Resource navigation with :(E|S|T|V|D)resource
• CtrlP based fuzzy searching for resources
• New file creation with :Emodel post!
• Simple refactoring with :<range>Esource destination
• Ember Appkit based project layout
• Boilerplate for Javascript and Coffeescript files
• Improved syntax highlighting for Javascript, Coffeescript and Handlebars files

Usage

After installing the Portkey and Ember.vim plugins, Create a portkey.json in your project root with contents like below,

{
  "portkeys": ["ember"]
}

Then reload the file with,

:e!

That' it. This will load the ember extension with the Ember Appkit file layout and Javascript boilerplate.

Supported Layouts

The default extension follows the Ember Appkit layout. The expected layout of files in your ember project is,

app/
├── models
├── routes
├── controllers
├── views
├── templates
├── components
├── helpers
├── styles
│
├── app.js
├── store.js
└── router.js

You can add additional patterns to the portkey.json to match additions to your project.

{
  "app/adapters/*.js": {
    "type": "adapter",
    "test": "tests/adapters/%s_test.js"
  }
}

Here a custom projection for adapters is added to match files in the app/adapters folder.

Supported Variations

By default the extension will use Javascript file patterns and Appkit based boilerplate templates. You can choose a different portkey.json variant using the syntax, ember:variant-lang.

{
  "portkeys": ["ember:classic-coffee"]
}

Here ember with classic boilerplate with coffeescript file patterns will be used.

The following variations are supported.

1. appkit or appkit-js This is the default layout when a variant is not specified. It contains boilerplate templates for the es6 module transpiler.

2. appkit-coffee: Ember Appkit with Coffee script boilerplate and patterns.

3. classic or classic-js: Classic Emberjs boilerplate in Javascript.

4. classic-coffee Classic with Coffeescript boilerplate and patterns.

5. custom ie: ember:custom No default file patterns, patterns from portkey.json are used instead. Allows use of syntax highlighting and filters from the ember extension.

Navigation with Alternate & Related

Portkeys Ex commands :A and :R navigate to the alternate and related files relative to the current file.

The default alternate and related varies based on the current file. The table below lists these relations.

Resource	Alternate	Related
model	route	controller
route	model	controller or template
controller	route + model	template + view
template	route + model	controller + view
view	route + model	controller + template
component	none	template

Navigation with Resource Ex commands

The Emberjs resources like models, controllers, routes, etc get their own Ex command.

:Emodel post opens the Post model in the current buffer. :Scontroller post opens the PostController in a horizontal split.

In addition the resource command can resolve the target resource from the current buffer's name.

:Eroute in the post model, will go to the PostRoute.

The resource commands have variants E, S, V, T and D that can be used to customize the window to open the file in.

See here for details on these variants.

Creating new Files

To create a new file, use the corresponding resource command with bang.

:Emodel comment!

This will create a new comment model, app/models/comment.js.

The :A and :R commands can also be used with bang to create new files.

The related for models as described in the table above is a controller. So from the Post model use,

:R!

to create the file, app/controllers/post.js.

Navigation with CtrlP

With CtrlP, Portkey provides the following default mappings. These mappings open a CtrlP menu with a list of resource of that type.

Hitting enter opens the resource in the current window. Ctrl-v and Ctrl-s open the file in vertical or horizontal splits respectively.

Mapping	Resource
<LocalLeader>cm	component
<LocalLeader>cn	controller
<LocalLeader>ap	app
<LocalLeader>r	route
<LocalLeader>s	stylesheet
<LocalLeader>ts	test
<LocalLeader>tm	template
<LocalLeader>v	view
<LocalLeader>g	grunt
<LocalLeader>h	helper
<LocalLeader>m	model

Customization

Any additional projections in your portkey.json take precedence over the extension's projections. Additional patterns are merged with existing ones.

For Eg:- To change the template for models use,

{
  "app/models/*.js": {
    "type": "model",
    "template": "MyApp.Model = Em.Model.extend({\n\t\n});"
  }
}

System Requirements

Ember.vim is an extension of Portkey. See here for instructions on how to install Portkey.

In addition the following plugins are recommended.

• vim-mustache-handlebars - Provides base Handlebars syntax highlighting

Installation

1. With Vundle

Plugin 'dsawardekar/ember.vim'

2. With Pathogen

git clone https://github.com/dsawardekar/ember.vim ~/.vim/bundle/ember.vim

TODO

• Improve Portkey's Extractor.
• Improve Portkey's GetFile Finder.
• Vim compiler plugin to run grunt test with :Run

Authors

• Darshan Sawardekar @_dsawardekar

Thanks

1. Yehuda Katz and the Emberjs team for Ember.
2. Tim Pope - For vim-rails.
3. Stefan Penner - For ember-appkit.

Contributing

See instructions for Portkey.

License

MIT License. Copyright © 2013 Darshan Sawardekar.