はじめに

こんにちは、menuフロントエンドエンジニアの尾崎です。

前回の記事で、Git hooksで特定の処理を走らせる方法でhuskyのお話がありました。
今回は、ESLintやコミットする前の事前チェックについてまとめています。

ESLintとは

ESLintは、JavaScriptの静的検証ツールの1つです。
インデント数や括弧前後のスペースなどのコーディングスタイルが崩れているコードを見つけるのに役立ちます。

menuではTypeScriptをメインで使っているので、TypeScript用のプラグインを追加することによりTypeScriptでもESLintが使えるようにしています。

ESLintとTypeScript用プラグインの導入

バージョン情報

・yarn: 1.22.5
・eslint: v7.30.0

1: プロジェクトにESLintとESLintのTypeScript用プラグインを追加

yarn add --dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

2: ESLint用のTypeScript設定ファイルを追加(tsconfig.eslint.json)

{ 
  "extends": "./tsconfig.json",
  "include": ["src/**/*.ts", ".eslintrc.js"],
  "exclude": ["node_modules"]
}

3: ESLint用の設定ファイルを追加(.eslintrc.js)

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2019,
    project: "tsconfig.lint.json",
  },
  plugins: [
    '@typescript-eslint',
  ],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended'
  ]
};

4: 実行

npx eslint src

extendsに追加されている項目は、あらかじめ用意されたESLintルールになります。
ESLintの特徴として、このルールを自分で設定することが可能ですがルールがたくさんあるのでドキュメントを確認しながら設定していく作業は大変です。
recommendedのような推奨設定を継承し、プロジェクトに合わせて設定していくのがオススメです。

huskyと連携

huskyは前回の記事の通り、Git hooksの管理が簡単になります。
今回はコミットをする前に変更したファイルだけをESLintしたい場合は、 lint-stagedを使うと便利です。
lint-stagedはgitのステージングに追加されたファイルに対して、設定したコマンドを実行します。

lint-stagedの導入

1: lint-stagedを追加

yarn add --dev lint-staged

2: package.jsonにlint-stagedの設定を追加

{
  "devDependencies": {
    ...
  },
+  "lint-staged": {
+    "*.ts": "eslint --cache --fix"
+  }
}

3: huskyのpre-commitでlint-stagedを実行

npx lint-staged

これでgitのステージングに追加されたtsファイルに対してESLintが実行されるようになります。

終わりに

ESLintだけでなくテストなども事前チェックを行うことによってコードの質が守られていきます。

また、弊社では様々なポジションのエンジニアを募集しています。
まずはカジュアルにお話を、という形でも結構ですので是非気軽にご応募ください！

Devlog by Reazon Holdings

ESLintの事前チェックでコードの治安を守ろう！