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) andeslint-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) andhusky
(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.