Closed2022/05/10にクローズ2

ESLintで関数コンポーネントの宣言にアロー関数を適用させる【function-component-definition】

ルール function-component-definition を使用

予めeslint-plugin-reactをインストールする。

$ yarn add --dev eslint-plugin-react

有効化する。

.eslintrc.json

"extends": ["plugin:react/recommended"]

ESLintの設定ファイル（.eslintrc.json等）のrulus内に以下のルールを明記。

.eslintrc.json

"react/function-component-definition": [
  2,
  { "namedComponents": "arrow-function" }
]

react/function-component-definitionは関数コンポーネントの関数タイプについてのルールセット。

namedComponents、unnamedComponentsにそれぞれ使用する関数宣言タイプを指定する。

デフォルトではnamedComponentsにfunction-declaration、unnamedComponentsにはfunction-expressionが設定されている。

この部分を明示的にarrow-functionとすることでアロー関数でのコンポーネント宣言を適用する。
arrow-functionとはアロー関数を示している。

このスクラップは2022/05/10にクローズされました