Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>EmberCaseNew to Visual Studio Code? Get it now.
EmberCase

EmberCase

Mehran Naghizadeh

|
17 installs
| (0) | Free
It converts deprecated Ember component syntax to new one
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

embercase README

Features

Template Inatantiation Syntax

If you have some legacy Ember code, you will most likely have components being called like the following:

{{x-user-avatar imageUrl=user.avatar name=user.fullName class="w-6 h-6 mr-4 rounded-full shrink-0"}}

With this extension you can put ypur cursor on the line, then press Ctrl+Shodt+P, then select Ember Case to get the following

<XUserAvatar @imageUrl={{user.avatar}} @name={{user.fullName}} class="w-h-6 mr-4 rounded-full Shrink0" />

embercase-has-block

Template Variable Scoping

In the paset it was totally fine to write {{variable}} in an Ember template, which was quite confusing and frustrating. Nowadays. you need to be more specific like {{this.variable}} or {{@variable}}. This can be a huge road blocker for migrating older apps to Ember 4+. If you are in such a situation, select the variable name you are interested in. Then press Ctrl + Shift + P. Type either thisify or @ify according to your needs. Press Enter. Your entire file is now updated.

@ify


atify


thisify


thisify


Javascript syntax manipulation

De get

Conveniently change this.get('something.somethingElse') to this.somethibg.get('somethingElse') by running De Get command from the palette (Command + Shift + P).

g


setify

Conveniently substitute this.set('key.child1.child2', value) with set(this.key, 'child1.child2', value) by running setify command from the palette (Command + Shift + P).

h


Requirements

An Ember project 🤓

Known Issues

Not all possible cases are covered. In case you stample upon such a case, please report it.

Release Notes

0.2.0

Intelligently figure out the proper context of a variable, if the project uses pods structure.

0.1.0

Facilitate adding this or @ to variable names in templates.

0.0.5

Handle an entire block of template code with nested component instantiations.

0.0.1

Initial release of EmberCase


Enjoy!

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft