DEV Community

Cover image for Using Prettier and husky to make your Emberjs Great Again
Shijie Zhou
Shijie Zhou

Posted on

4 2

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

"husky": "^3.1.0",
"prettier": "^1.19.1",
"pretty-quick": "^2.0.1"
Enter fullscreen mode Exit fullscreen mode

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\""
}
Enter fullscreen mode Exit fullscreen mode

Second Step:

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

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)
Enter fullscreen mode Exit fullscreen mode

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.

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (1)

Collapse
 
nickytonline profile image
Nick Taylor

I love these tools. This is what I put in place on dev.to, github.com/thepracticaldev/dev.to/...

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay