@mizdra/eslint-config-mizdra

eslint-config-mizdra

ESLint config for @mizdra

インストール

npm i -D @mizdra/eslint-config-mizdra eslint

使い方

legacy config から使う場合

// @ts-check

/** @type {import('eslint').Linter.BaseConfig} */
module.exports = {
  root: true,
  extends: ['@mizdra/mizdra', '@mizdra/mizdra/+react', '@mizdra/mizdra/+prettier'],
  parserOptions: { ecmaVersion: 2021 },
  env: { es2021: true, node: true, browser: true, jest: true },
  rules: {
    // プロジェクト固有のルールをここに書く
  },
  overrides: [
    // For TypeScript
    {
      files: ['*.ts', '*.tsx', '*.cts', '*.mts'],
      extends: ['@mizdra/mizdra/+typescript', '@mizdra/mizdra/+prettier'],
      rules: {
        // TypeScript 向けのプロジェクト固有のルールをここに書く
      },
    },
  ],
};

flat config から使う場合

// @ts-check

import { FlatCompat } from '@eslint/eslintrc';
import js from '@eslint/js';
import globals from 'globals';

const __dirname = new URL('.', import.meta.url).pathname;

const compat = new FlatCompat({
  baseDirectory: __dirname,
  recommendedConfig: js.configs.recommended,
  allConfig: js.configs.all,
});

/** @type {import('eslint').Linter.FlatConfig[]} */
export default [
  { ignores: ['**/dist'] },
  ...compat.extends('@mizdra/mizdra', '@mizdra/mizdra/+react'),
  {
    languageOptions: {
      ecmaVersion: 2021,
      globals: { ...globals.node, ...globals.browser, ...globals.jest },
    },
    rules: {
      // Write your favorite rules
    },
  },
  ...compat.config({
    overrides: [
      {
        // For TypeScript
        files: ['*.ts', '*.tsx', '*.cts', '*.mts'],
        extends: ['@mizdra/mizdra/+typescript.js'],
        rules: {
          // Write your favorite rules for TypeScript
        },
      },
    ],
  }),
  ...compat.extends('@mizdra/mizdra/+prettier'),
];

組み込みの 3rd-party packages

利便性のため、eslint-config-mizdra は以下のパッケージを dependencies としてインストールします。そのため、これらのパッケージを eslint-config-mizdra を利用するプロジェクトの devDependencies としてインストールする必要はありません。

• @typescript-eslint/eslint-plugin
• @typescript-eslint/parser
• eslint-config-prettier
• eslint-plugin-import
• eslint-plugin-n
• eslint-plugin-react
• eslint-plugin-react-hooks
• eslint-plugin-unicorn

インストールされるバージョンは、eslint-config-mizdra をインストールした時点で最も最新のものです。一度インストールされると、package-lock.json などによりバージョンが固定されます。最新のバージョンにアップデートする方法や、好きなバージョンに固定する方法は、「よくある質問」を参照してください。

利用可能な config

@mizdra/mizdra

基本的な rule をまとめた config です。利用するには、parserOptions.ecmaVersion と env.es20XX を指定する必要があります。

module.exports = {
  root: true,
  extends: ['@mizdra/mizdra'],
  parserOptions: { ecmaVersion: 2019 }, // required
  env: { es2019: true }, // required
};

@mizdra/mizdra/+node

Node.js で実行されるコード向けの config です。利用するには、eslint-plugin-n のドキュメントに従って Node.js のバージョンを指定しておく必要があります。

module.exports = {
  root: true,
  extends: ['@mizdra/mizdra', '@mizdra/mizdra/+node'],
  parserOptions: { ecmaVersion: 2019 },
  env: { es2019: true },
};

// package.json
{
  "name": "your-module",
  "version": "1.0.0",
  "engines": {
    "node": ">=16.0.0" // required
  }
}

@mizdra/mizdra/+typescript

TypeScript 向けの config です。利用するには、overrides オプションを使用し、TypeScript のコードだけに config が適用されるようにしてください。

module.exports = {
  root: true,
  extends: ['@mizdra/mizdra'],
  parserOptions: { ecmaVersion: 2019 },
  env: { es2019: true },
  overrides: [
    {
      files: ['*.ts', '*.tsx', '*.cts', '*.mts'],
      // NOTE: prettier を利用する場合は @mizdra/mizdra/+typescript の後に
      // @mizdra/mizdra/+prettier の extends も必要です。
      extends: ['@mizdra/mizdra/+typescript'],
      rules: {
        // TypeScript 向けのプロジェクト固有のルールをここに書く
      },
    },
  ],
};

@mizdra/mizdra/+react

React を使っているコード向けの config です。env.browser を true にして利用することを推奨しています。

module.exports = {
  root: true,
  extends: ['@mizdra/mizdra', '@mizdra/mizdra/+react'],
  parserOptions: { ecmaVersion: 2019 },
  env: {
    es2019: true,
    browser: true, // recommended
  },
};

@mizdra/mizdra/+prettier

Prettier を使っているコード向けの config です。全ての config の最後に extends することを想定しています。

module.exports = {
  root: true,
  extends: ['@mizdra/mizdra', '@mizdra/mizdra/+prettier'],
  parserOptions: { ecmaVersion: 2019 },
  env: { es2019: true },
  overrides: [
    {
      files: ['*.ts', '*.tsx', '*.cts', '*.mts'],
      extends: ['@mizdra/mizdra/+typescript', '@mizdra/mizdra/+prettier'],
    },
  ],
};

よくある質問

組み込みの 3rd-party packages をアップデートするには?

一度 eslint-config-mizdra をアンインストールしてから再度インストールしてください。組み込みの 3rd-party packages が最新のバージョンに切り替わります。

npm un @mizdra/eslint-config-mizdra
npm i -D @mizdra/eslint-config-mizdra

組み込みの 3rd-party packages を好きなバージョンに固定するには?

npm と pnpm では、package.json の overrides フィールドを使って、組み込みの 3rd-party packages を好きなバージョンにできます。yarn では、package.json の resolutions フィールドを使って、組み込みの 3rd-party packages のバージョンを固定できます。

• https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides
• https://yarnpkg.com/configuration/manifest/#resolutions
• https://pnpm.io/ja/package_json#pnpmoverrides

// package.json
{
  "overrides": {
    "@typescript-eslint/parser": "^4.0.0"
  }
}

Special Thanks

このパッケージは teppeis/eslint-config-teppeis を参考に設計されました。