(個人的に)使えるかもしれないESLint Rules

個人的にこれ使えるんではって調べたりしたのをメモっておく

no-restrcited-imports

https://eslint.org/docs/latest/rules/no-restricted-imports

"rules": {
  "no-restricted-imports": ["error", { paths: ["./"] }]
}

要は

import { Say } from './';

みたいに自身が含むバレルファイルから別のコンポーネントをimportしようとするのをエラーにできる。 なぜエラーにすべきかっていうと循環参照がどうたらこうたらこういう書き方するのは非常に良くないんだそうだ

@stylistic/array-bracket-spacing

https://eslint.style/rules/array-bracket-spacing

"rules": {
  "@stylistic/array-bracket-spacing": ["error", "always", { singleValue: false }]
}

要は

const arr = [ 1, 2, 3 ];

のようにArray Bracket使うときは中の最初を最後にスペース開けないとだめだよっていうルール。singleValue: falseにすると 配列内に１つしかない場合とかは別に開けなくてもいいよってなる(んだはず)

ちなみに

const one = arr[0];

みたいに要素にアクセスしたりする際には指定しなくても大丈夫(だと思われる)

@stylistic/brace-style

https://eslint.style/rules/brace-style

"rules": {
  "@stylistic/brace-style": ["error", "1tbs", { allowSingleLine: true }]
}

要はオールマンスタイルとかで書きたくないとかあるならこれを設定する方がいい。ちなみにallowSingleLineをfalseにしちゃうと

const callback = () => {};

みたいなのも書けなくなる(改行しないといけなくなる)

@stylistic/jsx-sort-props

https://eslint.style/rules/jsx-sort-props

"rules": {
  "@stylistic/jsx-sort-props": [
    "error",
    {
      "reservedFirst": ["key", "ref", "id", "type", "name", "className"],
      "callbacksLast": true,
      "shorthandLast": true,
      "noSortAlphabetically": true,
    },
  ],
}

JSX書く時にPropsの順序を強制するルール。コールバック(onなんちゃらとか)を最後にしたりとか特定のpropを最初に定義(reservedFirst)すべきとかそういうのを制御できる

@stylistic/no-multi-spaces

https://eslint.style/rules/no-multi-spaces

"rules": {
  "@stylistic/no-multi-spaces": [
    "error",
    {
      "exceptions": {
        "VariableDeclarator": true
      }
    }
  ],
}

定数を定義してたりすると

const ABC  = 'abc';
const DEFG = 'defg';

みたいに揃えて整形したりした方が見やすくない？そういうのを連続したスペースしたりするのを許容できる

@typscript-eslint/naming-convention

https://typescript-eslint.io/rules/naming-convention/

"rules": {
  "@typescript-eslint/naming-convention": [
    "error",
    {
      selector: ["variable", "function"],
      format: ["camelCase", "PascalCase", "UPPER_CASE"],
      leadingUnderscore: "allow",
    },
    {
      selector: ["typeAlias", "interface", "class", "enum"],
      format: ["PascalCase"],
    },
  ],
}

Typescriptとかで変数などの命名規則を強要できるルール。上記だと以下みたいになる

• 変数・関数定義はCamelCase/PascalCaseなど。また未使用変数とかで_なプレフィックスを付けたりする場合もあるのでそれも許容
• type/interface/class/enumなどはPascalCaseのみ許容

check-file/filename-naming-convention

https://github.com/dukeluo/eslint-plugin-check-file/blob/main/docs/rules/filename-naming-convention.md

"rules": {
  "check-file/filename-naming-convention": [
    "error",
    {
      "**/components/!(index).{jsx,tsx}": "PASCAL_CASE",
      "**/hooks/!(index).ts": "use[A-Z][a-zA-Z0-9]*",
      "**/reducers/*.ts": "CAMEL_CASE",
      "**/types/!(index).ts": "KEBAB_CASE",
    },
    {
      ignoreMiddleExtensions: true,
    },
  ],
}

ファイル名の命名規則を強制するルール

import/order

https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/order.md

"rules": {
  "import/order": [
    "error",
    {
      "groups": [
        "builtin",
        "external",
        [ "internal", "parent", "sibling" ],
        "index",
        "type",
      ],
      "newlines-between": "never",
    },
  ],
}

importの順番を強制するルール。グループ毎に改行したい場合はnewlines-betweenをalwaysにする