ember-vscode-extensions

A list of EmberJS VSCode Extensions

Handlebars Formatter

Author: Martin Feckie

Description: This extension allow you to format handlebars files using the currently unreleased Prettier glimmer parser

URL: https://marketplace.visualstudio.com/items?itemName=mfeckies.handlebars-formatter

GitHub: https://github.com/mfeckie/handlebars-formatter

Installs: 1100+

Features:

Format your handlebars files with Prettier ... that's it!

Ember Decorators

Author: Martin Feckie

Description: Provides snippets and auto-imports for using ember-decorators with typescript files

URL: https://marketplace.visualstudio.com/items?itemName=mfeckies.ember-decorators

GitHub: https://github.com/mfeckie/vscode-ember-decorators

Installs: 20+

Features:

Provides decorators snippets and auto import for all of the decorators provided by http://ember-decorators.github.io/ember-decorators/latest/docs/
Convert attr to @attr for ember data contexts!

Handlebars

Author: André Junges

Description: Handlebars Visual Studio Code

URL: https://marketplace.visualstudio.com/items?itemName=andrejunges.Handlebars

GitHub: https://github.com/andrejunges/vscode-handlebars

Installs: 29000+

Snippets: https://github.com/andrejunges/vscode-handlebars/blob/master/snippets/snippets.json

Features:

Handlebars colorization
Snippets

Ember Cli Extension for Visual Studio Code

Author: Felix Rieseberg

Description: Turn Visual Studio Code into an Ember Cli IDE

URL: https://marketplace.visualstudio.com/items?itemName=felixrieseberg.vsc-ember-cli

GitHub: https://github.com/felixrieseberg/vsc-ember-cli

Installs: 16000+

Snippets: https://github.com/felixrieseberg/vsc-ember-cli/blob/master/snippets/template-helpers.json

Features:

Automatically creates a jsconfig.json to ensure that Visual Studio Code enables ES6 and Modules support for Ember.
Typescript Typings to enable IntelliSense Support for Ember.
All Ember Commands are available through Visual Studio Code's Command Palette.
Ember Snippets

Commands:

Create addon folder structure (also known as ember addon)
Build app (also known as ember build)
Build, watch, and live-reload app (also known as ember serve)
Generate blueprint (also known as ember generate)
Destroy blueprint (also known as ember destroy)
Create new app in the current workspace (also known as ember init)
Create new app in a sub-folder in the current workspace (also known as ember new)
Install ember addon (also known as ember install)
Display the Ember Cli version (also known as ember version)
Run tests (also known as ember test)
Run tests in server mode (also known as ember test --server)
Setup project for development in Visual Studio Code

Ember JS (ES6) and Handlebars code snippets

Author: Phani Teja Komaravolu

Description: This extension contains Ember JS (ES6 syntax) and Handlebars snippets for Vs Code editor.

URL: https://marketplace.visualstudio.com/items?itemName=phanitejakomaravolu.EmberES6Snippets

GitHub: https://github.com/phaniteja1/EmberSnippetsVSCode

Installs: 9300+

Snippets:

Javascript: https://github.com/phaniteja1/EmberSnippetsVSCode/blob/master/snippets/emberjs.json

Handlebars: https://github.com/phaniteja1/EmberSnippetsVSCode/blob/master/snippets/ember-hbs.json

Features:

Ember Snippets

Ember Language Server

Author: emberjs

Description: Provides features like auto complete, goto definition and diagnostics for Ember.js projects

URL: https://marketplace.visualstudio.com/items?itemName=emberjs.vscode-ember

GitHub: https://github.com/emberwatch/vscode-ember

Installs: 5800+

Features:

This is the VSCode extension to use the Ember Language Server
All features currently only work in Ember-CLI apps that use classic structure and are a rough first draft with a lot of room for improvements. Pods and addons are not supported yet.
Component and helper autocompletion for inline and sub expressions
Definition providers for (enable features like "Go To Definition" or "Peek Definition"):
Components (in Templates)
Helpers (in Templates)
Models
Transforms
Route autocompletion in link-to
Diagnostics for ember-template-lint (if it is included in a project)

Ember Colorizer and Theme

Author: ciena-blueplanet

Description: Colorize Ember syntax and Handlebars. Along with a theme made specifcally for the colorizer.

URL: https://marketplace.visualstudio.com/items?itemName=ciena-blueplanet.vsc-ember-frost

GitHub: https://github.com/ciena-blueplanet/vscode-ember-colorizer

Installs: 4900+

Features:

VsCode extension that colorizes/tokeninzes Ember .hbs, Controllers, and Routes files.
Change Theme: Shift+CMD+P -> Search Preferences: Color Theme -> Switch to Ember Frost

Theme:

Ember Related Files

Author: Josa

Description: Provides a command for quickly jumping to related Ember files

URL: https://marketplace.visualstudio.com/items?itemName=josa.ember-related-files

GitHub: https://github.com/josa42/vscode-ember-related-files

Installs: 4800+

Features:

Allows jumping between templates, routes, controllers, tests, component etc

Default keybinding:

Mac: alt + cmd + r
Win/Linux: alt + ctrl + r

Ember Syntax

Author: dhedgecock

Description: Ember HTMLBars and Glimmer syntax highlighting

URL: https://marketplace.visualstudio.com/items?itemName=dhedgecock.ember-syntax

GitHub: https://github.com/healthsparq/vscode-ember-syntax

Installs: 5400+

Features:

Syntax highlighting for Ember template files AND syntax highlighting for inline template definitions with tagged templates! The package currently includes patterns matching htmlbars syntax only, but patterns for the new Glimmer components are on the way.

Ember.js

Author: emberjs

Description: All the extensions you need for developing Ember.js applications

URL: https://marketplace.visualstudio.com/items?itemName=emberjs.emberjs

GitHub: https://github.com/emberwatch/vscode-ember-pack

Installs: 2000+

Included Extensions:

Ember Cli in Visual Studio Code: Control Ember CLI from the command palette.
Ember Language Server: Adds enhanced editor features like auto completion and go to definition.
Ember Related Files: Navigate through related files (e.g. a component template and the associated javascript file) with a simple shortcut.
Ember JS (ES6) and Handlebars code snippets: Includes some handy snippets for Ember.js applications

ember-addon-snippets

Author: ciena-blueplanet

Description: Ember addon snippets for VS Code

URL: https://marketplace.visualstudio.com/items?itemName=ciena-blueplanet.ember-addon-snippets

GitHub: N/A

Installs: 1600+

Features:

Allows usage of addon defined VSCode snippets.

Ember Module Snippets

Author: Candid Metrics

Description: Snippets to make importing Ember modules a snap in VSCode

URL: https://marketplace.visualstudio.com/items?itemName=candidmetrics.ember-module-snippets

GitHub: https://github.com/candidmetrics/ember-module-snippets

Installs: 900+

Snippets: https://github.com/candidmetrics/ember-module-snippets/blob/master/snippets/snippets.json

Features:

NOTE: The prefix to trigger these snippets has changed from E. to E: due to changes to the way VSCode deals with the "." character.
All of these snippets are preceded by a E: (E-colon)
Where you might have in the past said Ember.get, with ember-module-snippets you can type E:get followed by ctrl-space to get these artisanal, grass-fed, snippets for Ember.js. Fuzzy matches work as expected (E:bj brings up Ember.Object, etc).
The Ember.js Module Unification project is an important precursor to unlocking a good bit of future functionality.
The data for these snippets is based on: https://github.com/ember-cli/ember-rfc176-data
And the raw json version: https://github.com/ember-cli/ember-rfc176-data/blob/master/mappings.json

VS Ember Helper

Author: Max David

Description: Ember helper for Visual Studio Code

URL: https://marketplace.visualstudio.com/items?itemName=max-david.vs-ember-helper

GitHub: N/A

Installs: 400+

Features:

Toggle-Button (bottom right statusbar) toggles between Ember Components and Templates (or create's them
Ember Build Dot (bottom right statusbar) click to start / stop your ember build file (defined in your config emberbuild.path)