Picture of Mehul Kar

Mehul Kar

Link to Twitter profile Link to email Link to RSS feed

Feb 5, 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 post? Email me or send me a toot @mehulkar.