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

  • このエントリーをはてなブックマークに追加
  • Pocket

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

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

今回は create-react-app コマンドでかんたんに React プロジェクトを構築する方法、SASS の導入方法、ESLint を AirBnB 構成にする方法を解説します。

create-react-app

数年前、webpack や babel を入れて、設定ファイルを書くのが辛すぎて挫折してしまいました…

現在では 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 に修正しましょう。

src/index.js
import './index.scss';

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

ESLint の設定

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

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

※ AirBnb の JavaScript 記述ルールは厳格なことで有名

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

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

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

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

package.jsonscripts"lint": "eslint ." を追加します。

package.json
  "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 を作成します。

.huskyrc.json
{
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

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

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

関連記事

お仕事ください!

僕が代表を務める 株式会社 EeeeG では Web 制作・システム開発・マーケティング相談を行っています。
なにかお困りごとがあれば、Twitter DM や Web サイトからお気軽にご相談ください。

コメント

コメントを残す

*