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 && yarn global remove npm-check-updates && yarn global add npm-check-updates && 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

• TSLint command-line interface

🗻 References

• https://qiita.com/daikiojm/items/d53cc771671992baa127

🖥 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!!