Zenn
🦖

Reactの開発環境を整える~husky v6で各Linterの実行まで~

2021/04/13に公開
React
TypeScript
ESLint
husky
tech

概要

最近Reactを触り始めたので備忘録的に開発環境を整える方法をまとめておきます。

ここでは以下のLinter/Formatterを設定したいと思います。Typescript環境を想定しています。

  • ESLint
  • Prettier
  • Stylelint
  • Commitlint

上記をhuskyでCommit時に発火するよう設定しておきたいと思います。
尚、この記事ではベースの導入・設定までを行い個別のルール設定までは行いません。

動作確認環境

ツール

プラグイン

ベースのアプリケーションを作成

今回はcreate-react-appでベースのアプリケーションを作成します。

$ npx create-react-app sample-oka-react-app --template typescript

ESLintの導入・設定

インストール

ESLint・Typescript・関連プラグイン
$ yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

React関連プラグイン
$ yarn add -D eslint-plugin-react eslint-plugin-react-hooks

設定ファイル

.eslintrc.yml
env:
  browser: true
  es2021: true
parser: '@typescript-eslint/parser'
parserOptions:
  project:
    - './tsconfig.json'
  sourceType: 'module'
  ecmaVersion: 12
  ecmaFeatures:
    jsx: true
root: true
plugins:
  - '@typescript-eslint'
  - react
settings:
  react:
    version: detect
extends:
  - eslint:recommended
  - plugin:@typescript-eslint/recommended
  - plugin:react/recommended
  - plugin:react-hooks/recommended

設定ファイルのリファレンス

  • ESLintの設定方針
    • 基本プラグインの推奨ルール(recommended)を利用するようにしています。
    • 各ルールは開発に着手してから随時設定していくのがやりやすいと思います。

ここではES2021での実装を想定して以下の項目を追加しています。

env:
  es2021: true
parserOptions:
  ecmaVersion: 12

ESLintの対象外のファイルを .eslintignore に記述しておきます。

.eslintignore
node_modules
dist
coverage

yarn lintで実行できるようscriptsにESLintのコマンドを追加しておきます。
設定ファイルを追加した場合package.json の eslintConfigの項目は不要なのでついでに削除しておきます。

package.json
  "scripts": {
    "lint": "eslint src/*.{ts,tsx}"
  },

// 不要なので削除
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },

Prettierの導入・設定

$ yarn add -D prettier eslint-config-prettier
.prettierrc.yml
trailingComma: all
tabWidth: 2
semi: false
singleQuote: true
endOfLine: lf

設定ファイルのリファレンス

ESLintとPrettierの競合を防ぐため、ESLintの設定ファイルも更新します。

.eslintrc.yml
extends:
  - eslint:recommended
  - plugin:@typescript-eslint/recommended
  - plugin:react/recommended
  - plugin:react-hooks/recommended
  - prettier

extendsの最終行に eslint-config-prettier を追加してください。 eslint-config- は省略可能なのでprettierのみでもOKです。

ちなみにeslint-plugin-prettierはPrettierのドキュメントに非推奨と記載されているので入れていません。今後はLintとFormatを個別に実行する方針が良いかと思います。

実行

Check
npx prettier -c src/*.{ts,tsx}
Checking formatting...
[warn] src/reportWebVitals.ts
[warn] src/setupTests.ts
[warn] src/App.test.tsx
[warn] src/App.tsx
[warn] src/index.tsx
[warn] Code style issues found in the above file(s). Forgot to run Prettier?

試しにCheckを実行してみると初期構成のWarningがいくつか出るので強制的に書き換えます。

Write
$ npx prettier -w src/*.{ts,tsx}

scripts.lintにprettierのコマンドを追加しておきます。

package.json
  "scripts": {
    "lint": "prettier -c src/*.{ts,tsx} && eslint src/*.{ts,tsx}"
  },

Stylelint

CSSの場合

インストール

$ yarn add -D stylelint stylelint-config-prettier stylelint-config-standard

stylelint-config-prettier: Prettier競合するルールを無効にしてくれるプラグインです。
stylelint-config-standard: 慣用的なCSSの原則・Googleのスタイルガイド・Airbnbのスタイルガイド・@mdo'sのコードガイドのルールセット

stylelint-config-standardは、stylelint-config-recommendedを拡張したものなのでstylelint-config-standardだけ導入すれば賄えそうです。

設定ファイル

.stylelintrc.yml
extends:
  - stylelint-config-standard
  - stylelint-config-prettier
ignoreFiles:
  - 'node_modules/**'

stylelint-config-prettierはextendsの最後に追加してください。

styled-componentsの場合

styled-componentsを使うケースも多いと思うので追記しておきます。

インストール

$ yarn add styled-components
$ yarn add -D @types/styled-components stylelint stylelint-config-prettier stylelint-config-styled-components stylelint-processor-styled-components

各プラグインの用途は以下です。

  • stylelint-config-styled-components: styled-components利用時のルール集
  • stylelint-config-prettier: Prettierと競合するルールを無効化
  • stylelint-processor-styled-components: tsxを解析する

設定ファイル

.stylelintrc.yml
extends:
  - stylelint-config-styled-components
  - stylelint-config-prettier
processors:
  - stylelint-processor-styled-components
ignoreFiles:
  - '**/node_modules/**'

Commitlint

コミットメッセージのprefixなどをチェックしてくれます。

インストール

$ yarn add -D @commitlint/cli @commitlint/config-conventional

設定ファイル

.commitlintrc.yml
extends:
  - '@commitlint/config-conventional'

デフォルトでは以下のprefixが許可されています。独自のリストを定義したい場合はrulesで上書きできます。

[
  'build',
  'chore',
  'ci',
  'docs',
  'feat',
  'fix',
  'perf',
  'refactor',
  'revert',
  'style',
  'test'
];

コミットメッセージの例
"fix(scope): some message"

husky

huskyを使うことでチームメンバーの利用しているエディタの設定に依存せずLinterやFormetterを強制実行することができます。

セットアップ

インストール

$ yarn add -D husky@^6.0.0

$ npx husky install

実行すると、.huskyフォルダが作成されます。

Commitlintをcommit-msgに適用

$ npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

各Linterをpre-commitに適用

yarn lint で実行できるよう、scripts.lintにPrettier・ESLint・Stylelintの各
コマンドを追加しておきます。

package.json
  "scripts": {
    "lint": "prettier -c src/*.{ts,tsx} && eslint src/*.{ts,tsx} && stylelint src/*.css"
  },

pre-commitに設定

$ npx husky add .husky/pre-commit 'yarn lint'

Commit前にフォーマットとLintを実行できるようになります。

全コード

設定したリポジトリは以下になります。
https://github.com/CM-haruna-oka/sample-oka-react-app

脚注

  1. huskyはv6からMITライセンスに戻っているため、v6を使います。v4v5とは設定方法が異なりますのでご注意ください。 ↩︎

Discussion