A pre-commit is a type of Git Hook that runs before each commit. It can help with verifying code standards (linting, formatting, testing etc.).
A tool written in Python, though can be used with projects in any language. Can be configured to run many hooks including pre-commit/pre-commit-hooks and Gitleaks. I have used this tool and like it for Python and other projects, though for Node.js projects, I prefer the options below.
A pre-commit hooks tool written in JavaScript. I prefer this tool for Node.js projects since it can be easily integrated in package.json scripts.
Another tool that’s written in JavaScript, to help run checks against staged files (see Guide below). Lint-staged does not configure git pre-commit hooks on its own, but can be combined with Husky.
Another git hooks manager written in JavaScript. Use to be more lightweight than Husky, but newer versions of Husky closed the gap.
Configure oxlint and oxfmt based on my Oxc Workflow.
Install devDependencies:
npm install --save-dev husky lint-stagedhusky:# Installed
./node_modules/.bin/husky --init# Not installed
npx run husky --initlint-staged to run Oxc and tsc checks:[/**
* @filename: lint-staged.config.js
* @type {import('lint-staged').Configuration}
*/
export default {
'**/*.[jt]s?(x)': [
'oxfmt',
'oxlint --type-aware --type-check --fix',
],
'**/*.ts?(x)': () => 'tsc -p tsconfig.json --noEmit',
}Can be further configured, but this is a good start for a project using TypeScript and Oxc.
husky to run lint-staged as a pre-commit hook:npm exec -- lint-staged --config lint-staged.config.jspreparescript in package.json : "scripts": {
"prepare": "husky"
},husky --init.
I wrote about Oxc (The JavaScript Oxidation Compiler) in Next Generation Tooling for Developers. When I first wrote this article, Oxc already included a linter (oxlint, which can replace ESLint), but the formatter was not available yet. Since then, VoidZero has continued the development of Oxc, not only launching Vite+ but also launching a formatter (oxfmt, which can replace Prettier). With the combination of oxlint and oxfmt, I now have a modern-alternative to ESLint + Prettier. Note that this might not work as a replacement in all existing projects that rely on specific configurations of ESLint and/or Prettier. However, for new Node.js projects, I will strive to go with the Oxc stack.
The two main reasons I prefer Oxc is speed and ease of configuration; as I have explained in Next Generation Tooling for Developers, the Rust-based tools are noticeably faster. In addition, they have a more modern design with more intutive configuration. In particular, ESLint has become a nightmare to configure after the breaking changes in ESLint v9.
These tools can be run in a project without being installed or added to package.json using npx commands:
npx oxlint@latestnpx oxfmt@latestFor consistent usage in an npm project, Oxc packages can be added as devDependencies.
npm install --save-dev oxlint@latest oxlint-tsgolint@latest oxfmt@latestConfiguration files for Oxlint are written in JSON, with support for comments (JSONC). Oxlint will automatically search for files named .oxlintrc.json and automatically use those. But you can name the file anything when you are using the --config CLI option.
Use the --init option to initialize a .oxlintrc.json file:
## If installed
./node_modules/.bin/oxlint --init## If not installed
npx oxlint@latest --initBy default, oxfmt automatically tries to find the nearest .oxfmtrc.json or .oxfmtrc.jsonc file from current working directory. If not found, default configuration is used.
Also you can specify your config file by -c yourconfig.jsonc flag.
Almost all format options are compatible with Prettier’s options. So you may finish your setup by just renaming .prettierrc.json to .oxfmtrc.jsonc.
Use the --init option to initialize a .oxfmtrc.json file:
## If installed
./node_modules/.bin/oxfmt --init## If not installed
npx oxfmt@latest --init--init option).
The prettier-init tool can be used to help bootstrap configuration:
npx prettier-init@latest
mv ".prettierrc.json" ".oxfmtrc.json"scripts block in package.json
For easy and consistent usage across the project, add to the scripts block in package.json:
"scripts": {
"lint": "oxlint --type-aware --type-check .",
"lint:fix": "oxlint --type-aware --type-check . --fix",
"lint:fix-all": "oxlint --type-aware --type-check . --fix --fix-suggestions --fix-dangerously",
"format": "oxfmt .",
"format:check": "oxfmt . --check"
},Commit and push all relevant files that were changed or added:
git add ".oxfmtrc.json" ".oxlintrc.json" "package.json" "package-lock.json"
git commit -s
git pushFeatured image by Gabriel Heinzer on Unsplash.
]]>