Continuous tslint/prettier/test in pre-commit [JavaScript/TypeScript]


husky is git hooks made easy like git commit, git push and more.

I usually use this for continuous check with tslint/prettier/test for Node.js project.

🐠 Installation

# tslint (lint tool for TypeScript)
yarn add --dev tslint tslint-config-prettier

# prettier (Code formatter)
yarn add --dev prettier

# npm update
yarn add --dev npm-check-updates

# husky (git-hook)
yarn add --dev husky@next

🐰 Configuration

TypeScript

Add tsconfig.json for development environment:

{
"compilerOptions": {
"module": "commonjs",
"moduleResolution": "node",
"target": "es6",
"lib": ["dom", "esnext"],
"pretty": true,
"sourceMap": true,
"outDir": "./dist",
"baseUrl": "./src",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"alwaysStrict": true
},
"include": ["src/**/*.ts", "__tests__/**/*.ts"],
"exclude": ["node_modules"]
}

Add tsconfig.production.json for production environment:

{
"compilerOptions": {
"module": "commonjs",
"moduleResolution": "node",
"target": "es6",
"lib": ["dom", "esnext"],
"pretty": true,
"sourceMap": true,
"outDir": "./dist",
"baseUrl": "./src",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"alwaysStrict": true
},
"include": ["src/**/*.ts"],
"exclude": ["node_modules"]
}

Tslint

Generate a basic configuration file:

tslint --init

Add tslint.json:

{
"extends": ["tslint:recommended", "tslint-config-prettier"],
"linterOptions": {
"exclude": ["node_modules/**/*.ts", "dist/**/*.ts"]
}
}

(If you use React, please add tslint-react to extends option.)

Modify package.json to add script and git-hook configuration:

"scripts": {
"npm:update": "npm upgrade --global yarn && ncu -a -u && rm -rf node_modules yarn.lock && yarn",
"prettier": "prettier --write \"{,!(node_modules|dist|build|coverage)/**/}*.{js,jsx,ts,tsx,json}\"",
"pre-commit": "yarn tslint:fix && yarn prettier && yarn build && yarn test",
"tslint": "tslint --project tsconfig.json",
"tslint:fix": "tslint --project tsconfig.json --fix"
},
"husky": {
"hooks": {
"pre-commit": "yarn pre-commit"
}
}

🏈 TSLint: Disable particular rule in specific line

// tslint:disable-next-line:no-console
console.error('comment something!');


console.error('comment something!'); // tslint:disable-line:no-console

🐝 [Troubleshoot] TypeError: log.gauge.isEnabled is not a function

If you see the following error, please execute rm -rf node_modules && yarn:

ncu -a -u
/project/to/node_modules/npm/node_modules/npmlog/log.js:57
log.progressEnabled = log.gauge.isEnabled()
^
TypeError: log.gauge.isEnabled is not a function

🐹 More details

🐮 References

🖥 Recommended VPS Service

VULTR provides high performance cloud compute environment for you. Vultr has 15 data-centers strategically placed around the globe, you can use a VPS with 512 MB memory for just $ 2.5 / month ($ 0.004 / hour). In addition, Vultr is up to 4 times faster than the competition, so please check it => Check Benchmark Results!!