Why cannot see any code completion after imported an EmberObject extension into a different file, using Visual Studio Code?

Question

As already explained in the title, I can't see any code completion after imported an EmberObject extension

• file form.js:

   import EmberObject from '@ember/object'; const Form = EmberObject.extend({ isTouched: false, isValid: false, errors: null, value: null, init() {...}, getSomething(){ ... } } 

• file component.js

   import Form from '../../classes/form'; init() { this._super(arguments); // console.log(this.elementId); this.form = Form.create({ email: [this.email, Validators.required, Validators.email], password: [this.password, Validators.required] }); } 

at this point in component.js when I type this.form. the editor (VSC) doesn't give me any real suggestion on Form class/EmberObject

Any guess?

Answer 1

Unfortunately, Ember objects are difficult for editors to understand.

However, you can use native classes, which will improve your editor experience!

Here's an oveview article on how to get going: https://medium.com/build-addepar/es-classes-in-ember-js-63e948e9d78e

The TL:DR; is

1. Install Ember Decorators https://github.com/ember-decorators/ember-decorators
2. Use a native classes

In your example it would be

import EmberObject from '@ember/object'
export default class FormClass extends EmberObject {
  constructor() {
    // replaces init
    super();
  doStuff() { }

Later let form = new FormClass();