DEV Community

Cover image for Configuring Prettier and TypeScript Compiler as a Pre-commit Hook
Julian Garamendy
Julian Garamendy

Posted on • Edited on • Originally published at juliangaramendy.dev

Configuring Prettier and TypeScript Compiler as a Pre-commit Hook

#typescript #prettier #git

We can easily improve our developer experience by:

  • Preventing broken code being committed/pushed.
  • Avoiding pointless arguments about formatting in our code reviews.

We decided to use git pre-commit hooks to help prevent "broken" commits.

We started from an existing TypeScript project, but here's a demo repository if you want to have a look.

1. Install prettier, husky and lint-staged 

yarn add -D prettier husky lint-staged
Enter fullscreen mode Exit fullscreen mode

None of these are required at run time so it's important to use -D so that the dependencies are added to "devDependencies".

2. Configure prettier

We need to create two files:

.prettierrc: 

{
  "printWidth": 120,
  "proseWrap": "preserve",
  "semi": false,
  "singleQuote": true,
  "useTabs": false,
  "tabWidth": 2,
  "arrowParens": "avoid",
  "trailingComma": "es5"
}
Enter fullscreen mode Exit fullscreen mode

.prettierignore: 

node_modules
build
dist
res
coverage
Enter fullscreen mode Exit fullscreen mode

You can of course configure this in any way you like.

3. Create a lint-staged config file: .lintstagedrc: 

{
  "**/*.+(js|jsx|css|less|scss|ts|tsx|md)": [
    "prettier --write",
    "git add"
  ]
}
Enter fullscreen mode Exit fullscreen mode

This is configured to run prettier and overwrite any staged files that match the pattern above and then staging the new changes (if any).

4. Create a husky config file: .huskyrc: 

{
  "hooks": {
    "pre-commit": "tsc && lint-staged"
  }
}
Enter fullscreen mode Exit fullscreen mode

This is configuring the pre-commit hook. It will run tsc and then lint-staged using the configuration files discussed above.

5. Success!

Now every time I try to commit, the pre-commit hook will run.
If -for some reason- my code doesn't compile I'll get an error and a chance to fix it before committing.

And I don't have to worry about code formatting because prettier will format any staged files before committing.

Demo Repository

I've setup a very basic repository on GitHub as a demo.

Photo by Simon Wilkes on Unsplash

Top comments (3)

Collapse
 
boasbabs profile image
Adeyemi Simeon •

Hi Julian, thanks for the guide. I want to ask how to use Airbnb style guide with lint-staged. Do you have any resources you can point me to?

Collapse
 
juliang profile image
Julian Garamendy •

Hi Adeyemi, I'm afraid I haven't tried this with Airbnb style guide, but if you have it configured as a linter, you can probably change the .lintstagedrc file to specify different linters to different file types.

You could try something like this:

.lintstagedrc

{
  "linters": {
    "*.js": [
      "eslint"
    ],
    "**/*.+(js|jsx|css|less|scss|ts|tsx|md)": [
      "prettier --write",
      "git add"
    ]
  }
}
Collapse
 
boasbabs profile image
Adeyemi Simeon •

Thanks a lot for the tip. I will try it out

Read next

walex_eniola_017a0a46b88a profile image

Need Help Setting Up Flutterwave with TypeScript, Express.js, Sequelize, and PostgreSQL

Walex Eniola -

apollotoday profile image

Deploying Next.js + Pocketbase to a single Fly.io machine

Nick -

abhay_yt_52a8e72b213be229 profile image

Why TypeScript is the Future of JavaScript Development: Benefits and Adoption

Abhay Singh Kathayat -

msm8 profile image

Building Composable Platforms with Harmony

John Brooks -