husky, lint-staged, prettier, ESLint 導入メモ - らいふうっどの閑話休題

husky マニュアルセットアップ

husky は、モダンなネイティブGitフックが簡単に作成補助するツールです。

husky のインストール

$ npm install husky --save-dev

Git hooks の有効化

$ npx husky install

Git hooks の有効化後に package.json を編集

$ npm set-script prepare "husky install"

package.json 実装例

{
  "scripts": {
    "prepare": "husky install"
  }
}

hook の作成

下記コマンドで、hookを作成します。

$ npx husky add .husky/pre-commit "npm test"
$ git add .husky/pre-commit

.husky/pre-commit の実装例

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm test

試験的なコミットの作成

$ git commit -m "Keep calm and commit"

コミットコマンドを実行した時、 npm test が失敗し、コミットが中断するハズです。

husky のアンインストール

$ npm uninstall husky && git config --unset core.hooksPath

husky ドキュメント

typicode.github.io

lint-staged セットアップ

lint-staged は Git の Staged されたファイルに特定なコマンドを実行する為のツールです。

lint-staged のインストール

$ npm install lint-staged --save-dev

lint-staged のセットアップ

$ npx mrm@2 lint-staged

package.json 実装例

  "scripts": {
    "precommit": "lint-staged"
  },

lint-staged ドキュメント

github.com

prettier セットアップ

prettier は、コードを指定された形式にフォーマットするツールです。

prettier のインストール

$ npm install --save-dev --save-exact prettier

package.json 実装例

  "scripts": {
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.js": [
      "prettier --write --single-quote",
    ]
  },

prettier ドキュメント

prettier.io

ESLint セットアップ

ESLint は、コードの一貫性を高め、バグを回避することを目的として、ECMAScript / JavaScriptコードで見つかったパターンを識別してレポートするためのツールです。

ESLint のインストール

$ npm install eslint --save-dev

ESLint のセットアップ

$ npx eslint --init

package.json 実装例

  "scripts": {
    "lint": "eslint index.ts",
  },

ESLint ドキュメント

eslint.org

husky, lint-staged, prettier, ESLint セットアップ

husky, lint-staged, prettier, ESLint を組み合わせたセットアップ

pre-commit でのセットアップ

.husky/pre-commit の実装例

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm run lint
npm run precommit

package.json でのセットアップ

メリット
- package.json で、完結する事です。
デメリット
- 各種設定がコメントが残せない事です。

  "scripts": {
    "build": "tsc",
    "lint": "eslint index.ts",
    "prepare": "husky install && rm -rf dist && npm run build",
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.js": [
      "prettier --write --single-quote",
      "git add"
    ]
  },

yaml ファイルでのセットアップ

メリット
- 各種設定がコメントが実装出来る事です。
デメリット
- ESLint, lint-staged の yaml を実装する事です。

package.json 実装例

  "scripts": {
    "build": "tsc index.ts --target es2021",
    "lint": "eslint index.ts",
    "prepare": "husky install && rm -rf dist && npm run build",
    "precommit": "lint-staged"
  }

.eslintrc.yml 実装例

env:
  # 環境定義  
parser: 
  # パーサー定義
parserOptions:
  # パースオプション  
plugins:
  # プラグイン定義  
ignorePatterns:
  # 除外対象
extends:
  # 拡張機能定義  
rules: {
    # ESLint ルール設定
  }

.lintstagedrc.yml 実装例

"*.ts":
  # typescript
  # prettier で、ダブルクオートからシングルクオートへ
  - prettier --write --single-quote
"*.{md,yml}":
  # markdown, yaml
  - prettier --write

個人的には、各種設定についてコメントが実装出来る yaml 方式の方が良いと考えています。

サンプルコード

github.com