Reactのプロジェクトにexlint-config-airbnbを導入する

きっかけ

普通のeslintを入れるよりも、exlint-config-airbnbを入れた方が、コードの規約が厳しいので、可読性が上がるとのこと。

前提

create-react-appで作成したプロジェクトに導入します。

導入

必要なパッケージをインストールする。

$ npm i -D eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

.eslintrcをプロジェクトディレクトリの直下に作成し、以下のように記述する。

{
  "extends": "airbnb"
}

以上で導入は完了。

propsを型チェックする

以下のようなコンポーネントがあった時、

import React from 'react';

const Title = (props) => (
  <h1>{props.title}</h1>
);

export default Title;

propsの型をチェックしていないので、ESlintに怒られてしまう。

まずは、以下のようにpropsを受け取るようにする。

  const {title} = props;

受け取ったら、prop-tyoesで型をチェックする。

パッケージをインストール

$ npm i -S prop-types

以下のような形で、型をチェックする。

import React from 'react';
import PropTypes from 'prop-types';

const Title = (props) => {
  // 追加
  const { title } = props;
  return (
    <h1>{title}</h1>
  );
};

// 追加
Title.propTypes = {
  title: PropTypes.string.isRequired,
};

export default Title;

参考

https://qiita.com/sugx2/items/ed58605e4e12519876fd
https://ja.reactjs.org/docs/typechecking-with-proptypes.html
https://speakerdeck.com/watanabeyu/du-miyasuikodofalseshu-kifang-falsesusume