Add Prettier to TypeScript Projects with PreCommit Hook

Where you been?

If you haven’t heard of Prettier you are missing out on one of the best tools for the javascript community. I’ve been hanging around on the outskirts of adopting Prettier because I’m very focused on TypeScript projects and initially there was no support for TypeScript. That was until 12 days ago when 1.4.0 was published. So now I’m diving head in on all projects to default with Prettier support. I’ll keep this brief, so let’s dive in.

The Steps

First, we need to add a few packages to our project as dev dependencies. Run the following from your terminal:

npm install prettier lint-staged husky --save-dev

You can use yarn if you’d like instead of npm to install the dev dependencies.

Second, open your project’s package.json and add the following script and object for lint-staged

"scripts": {
  "precommit": "lint-staged"
},
"lint-staged": {
  "*.ts": [
  "prettier --write",
  "git add"
 ]
},

That’s basically all you need to do. Pretty simple, our precommit script will run lint-staged which will run the prettier command on the .ts files being committed.

Record a .gif to Show Your Work or Issues

Recently, I was asked, “How do you record your .gifs for your app demos and twitter images?” Well it’s really simple. I use a tool from Cockos Incorporated called LICEcap. They have a Windows and OSX version available for download.

Once you install the application, open up your app emulator and LICEcap. Then position LICEcap over your emulator and press the record button. Then when you are done, just stop the recording. BAM! You now have an awesome .gif to attach to your GitHub repos and to use on Twitter or wherever else you want to show your work off.

LICEcapOnEmulator

This is also a great tool for issues on GitHub. Have an issue, record your browser or emulator and attach a nice .gif showing the issue. This will help in your engagement tremendously. I’m always more inclined to assist users who provide detailed information on issues than those who simply say, “X is broken, fix ASAP!” Let’s be honest, this is how I react to those issues:

enough

 

Happy Coding!

Just a legal disclaimer: I am not paid or endorsed by Cockos Inc. in any way, I wish I did have some endorsements… then I could be like Peyton Manning name dropping Budweiser in the SuperBowl 🙂