DEV Community

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

Posted on • Updated 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

jericirenej profile image

Chaining callbacks in TypeScript using the monad design pattern

jericirenej -

chintanonweb profile image

Angular Performance Boost: Dive into Eager and Lazy Loading Mechanisms

chintanonweb -

justinschroeder profile image

Rolldown: why it matters

Justin Schroeder -

sonukapoor profile image

Mastering Angular Unit Testing: Best Practices and Tools

Sonu Kapoor -