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.

8 thoughts on “Add Prettier to TypeScript Projects with PreCommit Hook

    1. Hey Ken, that might be possible. I’ve not had to do anything extra other than setting up the script in package.json and using my IDE (VSCode currently). Once I stage then commit it should run the script and prettier kick in. Sorry I’m probably not much help here. I don’t do a lot of `git` besides the basics so I might just be ignorant on what you are asking really 🙂

      Like

      1. Now that I read your comment again, are you a git terminal dev? If so, then I guess when you go to `push` it should execute but yea I use the git integration in VSCode 99% of the time and this simple modification works without any other steps 🙂

        Like

  1. Thanks for the info, Brad! I recently stumbled about, working on your `nativescript-texttospeech` project, but thanks to this post I figured it out and added it to my current project as well. I spent some time upon investigating prettier, but it seems to be pretty (or should I say ‘prettie’? ;)) cool. 🙂

    Liked by 1 person

  2. Hi Charles, you should be able to follow this post and put the `precommit` inside your project’s package.json – once that directory is linked to a git repo it should execute correctly before committing.

    Like

  3. I wear’t do a circle of `git` besides the basics so I might just be ignorant on what you are asking really 🙂 How do I become git to enjoyment the precommit hooking? How do I become git to enjoyment the precommit hooking?

    Like

  4. I acquire into’t do a destiny of `git` besides the basics so I might just be ignorant on what you are asking really 🙂 How do I acquire git to use of goods and services the precommit hook shot? I vesture’t do a rope of `git` besides the basics so I might just be ignorant on what you are asking really 🙂 How do I become git to delectation the precommit hook shoting?

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s