Picture of Mehul Kar

Mehul Kar

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!