React.jsでairbnbのeslintを使って.jsxと.stories.jsを同じディレクトリに置くためのrulesの書き方

.jsxと.stories.jsを同じディレクトリに置くと怒られる

airbnbのeslintを使うと、React Componentは拡張子 .jsx を強制します。 Storybookを使う時、 .jsx と同じディレクトリに .stories.js 置きたい場合があると思いますが、 拡張子が .js なので、story内でReact Componentを使うと怒られます。

ESLint: JSX not allowed in files with extension '.js'(react/jsx-filename-extension)

.eslintrc の rules にreact/jsx-filename-extension の設定を追加することで回避することができます。

1
2
3
4
5
6
7
8

  "rules": {
    "react/jsx-filename-extension": [
      "error",
      {
        "extensions": [".jsx", ".stories.js"]
      }
    ]
  }