@taiyme/eslint-config

taiyのためのESLint共有設定です。

インストール

※ pnpmではない場合は各自で読み替えてください。

次のパッケージをインストールします。

• eslint
• globals
• @typescript-eslint/parser
• eslint-config-flat-gitignore
• @taiyme/eslint-config

pnpm add -D eslint globals @typescript-eslint/parser eslint-config-flat-gitignore @taiyme/eslint-config

ピア依存関係の修正

peerDependenciesに関する警告を解消するには、package.json に pnpm.overrides フィールドを追加します。

{
  "pnpm": {
    "overrides": {
      "eslint": "$eslint"
    }
  }
}

依存関係を再インストールします。

pnpm install

使い方

eslint.config.js の設定

eslint.config.js を作成し、以下のように構成します。 (.eslintrc 形式は非対応)

※ @taiyme/eslint-config は files を指定していないため、mapメソッドなどを利用して自分で指定してください。

// @ts-check

import taiymeConfig from '@taiyme/eslint-config';
import tsEslintParser from '@typescript-eslint/parser';
import gitignore from 'eslint-config-flat-gitignore';
import globals from 'globals';

const files = ['**/*.{js,jsx,ts,tsx}'];

/** @type {import('eslint').Linter.Config[]} */
export default [
  gitignore(),
  {
    languageOptions: {
      globals: {
        ...globals.node,
      },
      parser: tsEslintParser,
      parserOptions: {
        project: './tsconfig.json',
        tsconfigRootDir: import.meta.dirname,
      },
    },
    files,
  },
  ...[
    ...taiymeConfig.configs.typescript,
    ...taiymeConfig.configs.react,
  ].map((config) => ({
    ...config,
    files,
  })),
  // ...
];

package.json の scripts を更新

package.json に、ESLintを実行するスクリプトを追加します。

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint --fix ."
  }
}

VS Codeで自動修正を有効にする

ESLintの拡張機能 をインストールし、 .vscode/settings.json を作成して以下のように構成します。

{
  "prettier.enable": false,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never",
    "source.removeUnusedImports": "never",
    "source.sortImports": "never",
  },
  "eslint.useFlatConfig": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
  ],
  "typescript.tsdk": "./node_modules/typescript/lib",
}

仕様

※ ESLint Config Inspectorを公開しています: https://eslint-config.taiy.me/

@taiyme/eslint-config は、次のパッケージ及びプラグインを含むため、追加で記述する必要はありません。

• configs.typescript
  • @typescript-eslint
  • @stylistic/js
  • @stylistic/ts
  • simple-import-sort
  • unused-imports
• configs.react
  • react
  • react-hooks
  • jsx-a11y
  • @stylistic/jsx

@taiyme/eslint-config は、次のルールを含むため、指定する必要はありません。

• configs.typescript
  • eslint.configs.recommended
  • tsEslint.configs.recommended
• configs.react
  • reactPlugin.configs.recommended
  • reactPlugin.configs['jsx-runtime']
  • hooksPlugin.configs.recommended
  • jsxA11yPlugin.flatConfigs.recommended

@taiyme/eslint-config は、次のオプションを含むため、指定する必要はありません。

• configs.typescript

  • languageOptions.ecmaVersion: 'latest'
  • languageOptions.sourceType: 'module'

• configs.react

  • languageOptions.ecmaVersion: 'latest'
  • languageOptions.sourceType: 'module'
  • languageOptions.parserOptions.ecmaFeatures.jsx: true
  • settings.react.version: 'detect'

@taiyme/eslint-config は、次の思想を強く支持しているため、抗おうとしないでください。

• Prettierを使わない
• インデントは半角スペース2個
• セミコロンは必須
• 末尾カンマは必須

ライセンス

MIT License