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.