Vim plugin for the Emberjs frontend framework
Branch: develop
Clone or download
dsawardekar Merge pull request #6 from jessieay/develop
Update Vundle instructions
Latest commit df146fe Nov 16, 2014
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
autoload Build 0.2.0 Jul 27, 2014
doc Documents use of custom variant. Oct 12, 2013
ftdetect Adds handlebars filetype detection Oct 10, 2013
lib Bumps version to 0.2.0 Jul 27, 2014
plugin Build 0.2.0 Jul 27, 2014
portkeys/ember Initial import Oct 10, 2013
spec Initial import Oct 10, 2013
syntax Removes all default styles. Oct 18, 2013
.editorconfig Adds editor config Oct 18, 2013
.gitignore Adds gitignore. Oct 10, 2013
.travis.yml Initial import Oct 10, 2013
CHANGELOG.txt Updates changelog Jul 27, 2014
Gemfile Upgrades to Riml 0.4.0 Mar 30, 2014
Gemfile.lock Upgrades to Riml 0.4.0 Mar 30, 2014
LICENSE.txt Adds License Oct 10, 2013
README.md Update Vundle instructions Nov 15, 2014
Rakefile Updates Rakefile to use RIML_DIR Jul 27, 2014
portkey.json Initial import Oct 10, 2013

README.md

Ember.vim Build Status Dependency Status

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.

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

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.