ReactにSASSとESLint(AirBnB)を導入する方法

こんにちは。タクマ™ [@suwaru_blog] です。

普段は Vue.js を使うことが多く vue-cli コマンドで環境を作ってしまうのですが、
業務で React を使うことになり、簡単に環境構築できるコマンドないかなーと探してみました。

create-react-app

現在では create-react-app コマンドを使うと、
それを全部やってくれて、設定ファイルまで隠蔽してくれます。(優しい時代)

プロジェクトの作成、ブラウザで表示する

今回 yarn コマンドを使うのでインストールしておいてください。
Mac 環境の人は brew install yarn で使えるようになるはずです。

# create-react-app コマンド導入
yarn global add create-react-app

# React プロジェクトを作成
create-react-app [プロジェクト名]

cd [プロジェクト名]

# dev-server でブラウザ表示する
yarn start

SASS を導入する

CSS の可読性をあげる SASS を導入します。

yarn add node-sass --save

index.css から index.scss にリネームしてください。
css ファイルとして読み込んでいた箇所を scss に修正しましょう。

import './index.scss';

たったこれだけで SASS が使えるようになります。

ESLint の設定

ESLInt を導入するとエディターやコマンドラインに JavaScript の文法エラーを表示してくれます。

公式サイトではエディターの ESLint プラグインをそのまま使えばいいよって説明ですが、
たとえば AirBnb の ESLint 構成などにしたいときがあると思います。

下記のライブラリを追加してください。

yarn add -D eslint-config-airbnb eslint-config-prettier eslint-plugin-jsx-a11y eslint-plugin-prettier prettier

プロジェクト直下に .eslintrc を作成してください。

{
  "extends": [
    "react-app",
    "airbnb",
    "plugin:jsx-a11y/recommended",
    "prettier",
    "prettier/react"
  ],
  "plugins": ["jsx-a11y", "prettier"]
}

package.json の scripts に "lint": "eslint ." を追加します。

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint ."
  },

コマンドで yarn lint で実行されたら設定完了。
エディターにプラグインが入っていればエラー表示されるはずです。

Git コミット前にチェックが走るように設定

yarn add -D husky lint-staged

プロジェクト直下に .huskyrc.json と .lintstagedrc.json を作成します。

{
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

husky がコミット前に lintstage を呼びますが、そのときの処理を lintstage.json に記述します。

{
  "*.+(js|jsx)": ["eslint --fix", "git add"],
  "*.+(json|css|md)": ["prettier --write", "git add"]
}

関連記事