Image for post
Image for post

Using Prettier and Husky to Make Your Emberjs Great Again

Jay Chow
Jay Chow
Dec 20, 2019 · 2 min read

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

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.

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 part:

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

Second part:

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

Now you are all set up! Test out by running this 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.

The Startup

Medium's largest active publication, followed by +706K people. Follow to join our community.

Jay Chow

Written by

Jay Chow

Full Stack Developer — Javascript | Typescript | ReactJS | VueJS | NodeJS | MongoDB — Blog writer & Online learner ❤️ @ shijiezhou.com

The Startup

Medium's largest active publication, followed by +706K people. Follow to join our community.

Jay Chow

Written by

Jay Chow

Full Stack Developer — Javascript | Typescript | ReactJS | VueJS | NodeJS | MongoDB — Blog writer & Online learner ❤️ @ shijiezhou.com

The Startup

Medium's largest active publication, followed by +706K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store