Picture of Mehul Kar

Mehul Kar

Link to Twitter profile Image of envelope to indicate email link

Feb 05, 2020

New Ember Projects

programming frontend ember.js

Some default steps to follow when I start a new Ember app. Most of this is taken from Sergio Arbeo’s post on the Dockyard blog, but this is a bit more streamlined and suited to my usage:

  1. Remove unnecessary packages:

    npm uninstall --save-dev \
        ember-welcome-page \
        ember-data \
        ember-cli-eslint \
        ember-cli-template-lint
    
  2. Add lower level packages:

    npm i --save-dev \
        ember-template-lint \
        eslint \
        prettier \
        eslint-plugin-prettier \
        eslint-config-prettier \
        husky \
        lint-staged \
        concurrently
    
  3. Add configs to package.json:

    {
        ...<other stuff>...
        "prettier": {
            "printWidth": 100,
            "singleQuote": true,
            "useTabs": false
        },
        "husky": {
            "hooks": {
                "pre-commit": "lint-staged"
            }
        },
        "lint-staged": {
            "*.js": ["eslint —fix"],
            "*.hbs": ["ember-template-lint"]
        }
    }
    
  4. Remove render from application.hbs

  5. Update .eslintrc to use the prettier plugin and extend from its rules

  6. Update .eslintrc to use plugin:ember/octane instead of plugin:ember/recommended.

Want to talk about this blag? Email me or send me a toot @mehulkar!