Using Prettier and husky to make your Emberjs Great Again

Whether you work in a company, a big team or by yourself, having consistently formatted code is significant for maintainability and readability. Also, there are tons of ways and this is the standard way and most developers should look into it.

Too Long; Didn’t Read

Most developers know the tool of Prettier because it is very easy to use and it makes sense to run the command.

npm run prettier -g

However, we will forget or sometimes when you push to pipeline, you realize the problem that you didn’t run the prettier before you commit. Or sometimes, the VPS you used does not have prettier or nothing like linter install. That means it will make your pipeline fail.

Check out the Emberjs Application repo:

The major issue is that you forget to format the Ember Code, it can create the mess that other developers may have a problem reading the code. See. e.g.

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router
  .extend(  {
            location: config.locationType,
     rootURL: config.rootURL
} );

Router
    .map(function() {
});

export default Router;

As you can see, the code above does not make use to read easily, and you do not want to run npm prettier every single time.

Format Code Like Pro:

Is that an easier way to format your code without using any IDE like VS Code, IntelliJ, NetBeans, or Eclipse when you commit your project to Github/GitLab/Bitbucket? Of course, that can be as simple as it is.

So, there are three packages you need to install before :

npm i husky prettier pretty-quick --save-dev

Now you should see the package that installs on your Emberjs:

"husky": "^3.1.0",
"prettier": "^1.19.1",
"pretty-quick": "^2.0.1"

Once you have all those packages installed, there is one last step before you will make your commit much efficient.

First Step:

// package.json
"scripts": {
  prettier": "prettier --write \"app/*/*.js\""
}

Second Step:

// package.json
"husky": {
  "hooks": { 
    "pre-commit": "npm run prettier && pretty-quick --staged && git add ."
  }
}

Now you are all set up! Test out by running git command on your ember project.

git add .
git commit -m 'automation format'
// output
app/adapters/application.js 42ms
app/components/article-body.js 24ms
app/components/article-list.js 12ms
app/components/article-share-menu.js 9ms
app/components/bear-list.js 17ms
app/components/loader.js 8ms
app/components/nav.js 8ms
🔍  Finding changed files since git revision 123456.
🎯  Found 0 changed files.
✅  Everything is awesome!
On branch master
Your branch is ahead of 'origin/master' by 1 commit.
  (use "git push" to publish your local commits)

Conclusion

Prettier, husky and pretty-quick can improve your workflow by formatting your JavaScript files before every commit. If you want to learn more about how to use link-staged.

Check out full repo on the link to see how easy it is.