An Interest In:
Web News this Week
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
- March 13, 2024
Run a TypeScript type check in your pre-commit hook using lint-staged husky
A great way to prevent TypeScript compilation errors from bringing down your CI pipelines is to introduce a type check before you commit your .ts
file changes.
If you've worked with Git Hooks before, you'll probably know that one of the best combinations for running pre-commit checks is husky and lint-staged.
Together, these two packages allow you to tap into the relevant Git hook and run commands such as linting on staged files only. It saves a bunch of debugging time by fixing preventable errors sooner in the development process.
As a separate step, if you want to check for TypeScript type errors (note: this is different to syntax errors which ESLint picks up and fixes for you), you would typically run a command in the CLI such as npx tsc --noEmit
to compile the TypeScript and highlight any type errors to address.
Now, the best case scenario here is that you simply pop the above TypeScript command into your lint-staged config along with anything else e.g. ESLint, and you're good to go!
Oh no, it doesn't quite work as expected. The error message that you may come across looks something like this:
Option 'project' cannot be mixed with source files on a command line.
The issue I found - and at the time of writing, it is still being discussed - is that lint-staged would pass each staged file to the npx tsc
command like npx tsc --noEmit file1.ts file2.ts
and that causes TypeScript to simply ignore your tsconfig.json
.
Super frustrating!
Fear not however, as there is an extremely helpful tool that runs tsc
on specific files without ignoring tsconfig.json and it's called tsc-files. As the tool's author points out:
I wanted to type-check only the staged files with lint-staged.
Perfect for my use case. So, after a quick look at the docs, it was as simple as updating the lint-staged config in my package.json
file to use the tsc-files
package:
{ "husky": { "pre-commit": "lint-staged" }, "lint-staged": { "**/*.ts": "tsc-files --noEmit" }}
Conclusion
Now I am able to run a TypeScript type check on all my staged files using a pre-commit hook.
Tip: use the --pretty
flag in the tsc
command to add some formatting and colour to your type errors.
If you have any questions on this setup or have tried different approaches, feel free to comment below or start up a convo over on Twitter.
Thanks for reading
Original Link: https://dev.to/samueldjones/run-a-typescript-type-check-in-your-pre-commit-hook-using-lint-staged-husky-30id
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To