Prettifying Ember.js codebase

All Ember-CLI based apps come with pre-defined eslint config. Unfortunately it’s not enough to enforce code consistency across the whole codebase. That’s where prettifier comes into play.

To configure prettifier with existing Ember app:

Install prettier, eslint-plugin-prettier (to run prettier as an ESLint rule) and eslint-config-prettier(to turn off all ESLint rules that might conflict with prettier):
```
yarn add --dev prettier eslint-plugin-prettier eslint-config-prettier
```

Add prettier plugins to .eslintrc.js file:

 module.exports = {
   root: true,
   parserOptions: {
     ecmaVersion: 2018,
     sourceType: 'module',
     ecmaFeatures: {
       legacyDecorators: true,
     },
   },
   extends: [
     'eslint:recommended',
     'plugin:ember/recommended',
     'prettier',
   ],
   env: {
     browser: true
   },
   plugins: [
     'ember',
     'prettier',
   ],
 };

Add prettier rules to .prettierrc.js:

 module.exports = {
   singleQuote: true,
   trailingComma: 'es5',
   printWidth: 100,
   semi: true,
   bracketSpacing: true,
   endOfLine: 'lf',
   tabs: false,
   tabWidth: 2,
 };

Install lint-staged (to lint staged files) and husky (to run custom scripts on git hooks):
```
yarn add lint-staged husky --dev
```

Add scripts to package.json:

// package.json
{
  "scripts": {
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,json,css}": [
      "prettier --write",
      "git add"
    ]
  }
}

Now, before each commit, prettifier will be run to ensure that consistency is preserved on all changed files.