eslint-config-matsuri

React/TypeScriptを利用しているリポジトリで共通して使えるESLintのConfigです。

当社以外での理由は想定していません。

Motivation

• 各リポジトリでESLintの設定を更新しなくていいようにする。
• 簡単に設定ができるようにする。
• 頻出するwarningをerrorかoffに分類し、方針を明確にする

Installation

ESLintを除く依存関係を別途インストールする必要はありません。既に入っている場合は、削除してください。

yarn add eslint eslint-config-matsuri

Usage

Flat configをv3からサポートしています。eslint.config.jsに次のように記述します。

import config from "eslint-config-matsuri";

/** @type { import("eslint").Linter.FlatConfig[] } */
export default config

拡張する場合は、次のようにしてください。

import { configs } from "eslint-config-matsuri";

/** @type { import("eslint").Linter.FlatConfig[] } */
export default [
  configs.base,
  {
    ...configs.javascript,
    rules: {
      ...configs.javascript.rules,
      eqeqeq: "off",
      "unused-imports/no-unused-vars": "off",
      "sort-imports-es6-autofix/sort-imports-es6": "off",
    },
  },
  {
    ...configs.typescript,
    rules: {
      ...configs.typescript.rules,
      "@typescript-eslint/no-non-null-assertion": "off",
    },
  },
  {
    ...configs.react,
    rules: {
      ...configs.react.rules,
      "jsx-a11y/label-has-associated-control": [
        2,
        {
          controlComponents: ["TextField", "Checkbox"],
          depth: 3,
        },
      ],
    },
  },
  configs.test,
]

VSCodeでFlag configを利用する場合は、.vscode/settings.jsonに次の設定を追加する必要があります。

{
  "eslint.experimental.useFlatConfig": true
}

Contributing

ルールの検証などを行いたい場合は、tests以下にファイルを配置してください。 Errorが出てほしい記述には、// eslint-disable-next-lineコメントを付けておくことで、yarn testコマンドで確認できるようになります。