移行

ESLintはv8.53.0でフォーマットルールを非推奨とし、ESLint Stylisticへの移行を推奨しました。ESLintは非推奨のルールを削除することはありませんが、非推奨のルールは今後更新されないことを意味します。ESLint Stylisticでは、すでにこれらのルールをすべて移行済みであり、今後もメンテナンスを継続します。

このガイドは、移行を行う際に役立ちます。

手動での移行

ESLint Stylisticは、3つの異なるソースパッケージから移行されました。

• eslint -> @stylistic/eslint-plugin-js
  • JavaScriptの組み込みスタイルルール
• @typescript-eslint/eslint-plugin -> @stylistic/eslint-plugin-ts
  • TypeScriptのスタイルルール
• eslint-plugin-react -> @stylistic/eslint-plugin-jsx
  • フレームワークに依存しないJSXルール

プロジェクトをESLint Stylisticに移行するには、2つの方法があります。

• アプローチ1：単一プラグインへの移行：JavaScript、TypeScript、JSX用の単一パッケージ。これが推奨される方法です。
• アプローチ2：1対1プラグインへの移行：ソースパッケージごとに1つのパッケージ。ルールは1:1でマッピングされており、移行が容易です。

アプローチ1：単一プラグインへの移行

ルール設定を容易にするため、3つのプラグインすべてを1つのプラグインにマージしました。

npm i -D @stylistic/eslint-plugin

// .eslintrc.js  [Legacy Config]
module.exports = {
  plugins: [
    '@stylistic'
  ],
  rules: {
    // ESLint built-in stylistic rules:
    // Add `@stylistic/` prefix
    'semi': 'error',
    '@stylistic/semi': 'error',

    // `@typescript-eslint` rules:
    // Change `@typescript-eslint/` to `@stylistic/` prefix
    '@typescript-eslint/semi': 'error',
    '@stylistic/semi': 'error',

    // `eslint-plugin-react` rules:
    // Change `react/` to `@stylistic/` prefix
    'react/jsx-indent': 'error',
    '@stylistic/jsx-indent': 'error',
  }
}

通常、typescript-eslintは組み込みルールを無効にし、@typescript-eslintバージョンを優先するように求めます。ESLint Stylisticでは、JavaScriptとTypeScriptの両方を処理するために必要なルールは1つだけです。

// .eslintrc.js  [Legacy Config]
module.exports = {
  plugins: [
    '@stylistic'
  ],
  rules: {
    // Previously, you need to disable the built-in rule
    'semi': 'off',
    '@typescript-eslint/semi': 'error',

    // Now only need one rule
    '@stylistic/semi': 'error',
  }
}

アプローチ2：1対1プラグインへの移行

移行を容易にするため、各ソースパッケージのプラグインに1対1のマッピングも提供しています。単一プラグインアプローチとは異なり、ルールに接頭辞を追加して3つの異なるパッケージをインストールする必要があります。

ESLintコード (JavaScript)

npm i -D @stylistic/eslint-plugin-js

フラット設定

// .eslint.config.js
import stylisticJs from '@stylistic/eslint-plugin-js'

export default [
  plugins: {
    '@stylistic/js': stylisticJs
  },
  rules: {
    // ESLint built-in stylistic rules:
    // Add `@stylistic/js/` prefix
    'semi': 'error',
    '@stylistic/js/semi': 'error',
  }
]

レガシー設定

// .eslintrc.js
module.exports = {
  plugins: [
    '@stylistic/js'
  ],
  rules: {
    // ESLint built-in stylistic rules:
    // Add `@stylistic/js/` prefix
    'semi': 'error',
    '@stylistic/js/semi': 'error',
  }
}

TypeScript

npm i -D @stylistic/eslint-plugin-ts

フラット設定

// .eslint.conf.js
import stylisticTs from '@stylistic/eslint-plugin-ts'

export default [
  plugins: {
    '@stylistic/ts': stylisticTs
  },
  rules: {
    // `@typescript-eslint` rules:
    // Change `@typescript-eslint/` to `@stylistic/ts/` prefix
    '@typescript-eslint/semi': 'error',
    '@stylistic/ts/semi': 'error',
  }
]

レガシー設定

// .eslintrc.js
module.exports = {
  plugins: [
    '@stylistic/ts'
  ],
  rules: {
    // `@typescript-eslint` rules:
    // Change `@typescript-eslint/` to `@stylistic/ts/` prefix
    '@typescript-eslint/semi': 'error',
    '@stylistic/ts/semi': 'error',
  }
}

JSX

npm i -D @stylistic/eslint-plugin-jsx

フラット設定

// .eslint.conf.js
import stylisticJsx from '@stylistic/eslint-plugin-jsx'

export default [
  plugins: [
    '@stylistic/jsx'
  ],
  rules: {
    // `eslint-plugin-react` rules:
    // Change `react/` to `@stylistic/jsx/` prefix
    'react/jsx-indent': 'error',
    '@stylistic/jsx/jsx-indent': 'error',
  }
]

レガシー設定

// .eslintrc.js
module.exports = {
  plugins: [
    '@stylistic/jsx'
  ],
  rules: {
    // `eslint-plugin-react` rules:
    // Change `react/` to `@stylistic/jsx/` prefix
    'react/jsx-indent': 'error',
    '@stylistic/jsx/jsx-indent': 'error',
  }
}

ESLint移行プラグイン

組み込みのスタイルルールを@stylistic名前空間に移行するためのESLintプラグインを提供しています。

npm i -D @stylistic/eslint-plugin-migrate

// .eslintrc.js
module.exports = {
  plugins: [
    '@stylistic/migrate'
  ],
}

ファイルの先頭にeslintコメントを追加して、eslint設定ファイルにオプトインします。

// Migrate built-in rules to @stylistic/js namespace
/* eslint @stylistic/migrate/migrate-js: "error" */

// Migrate `@typescript-eslint` rules to @stylistic/ts namespace
/* eslint @stylistic/migrate/migrate-ts: "error" */

module.exports = {
  rules: {
    indent: ['error', 2], // Error: Use @stylistic/js/indent instead

    '@typescript-eslint/indent': ['error', 2], // Error: Use @stylistic/ts/indent instead
  }
}

レガシールールの無効化

レガシールールを含んでおり、まだ移行していないプリセットを拡張している場合に備えて、すべてを無効にするための設定プリセットを提供しています。

フラット設定

// eslint.config.js
import { FlatCompat } from '@eslint/eslintrc'
import StylisticPlugin from '@stylistic/eslint-plugin'

const compat = new FlatCompat()

export default [
  // `extends` is not supported in flat config, can you use `@eslint/eslintrc` to handle it
  ...compat({
     extends: [
      'eslint:recommended',
      'plugin:@typescript-eslint/recommended',
      // ...
    ],
  }),
  // override the legacy rules
  StylisticPlugin.configs['disable-legacy'],
  // your own rules
  {
    plugins: {
      stylistic: StylisticPlugin
    },
    rules: {
      'stylistic/semi': 'error',
      // ...
    }
  }
]

レガシー設定

// .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    // ...
    'plugin:@stylistic/disable-legacy',
  ],
  plugins: [
    '@stylistic'
  ],
  rules: {
    '@stylistic/semi': 'error',
    // ...
  }
}

パッケージメタデータ

移行を自分で処理したい場合は、プログラムで簡単に使用できるようにメタデータも公開しています。

npm i -D @eslint-stylistic/metadata

import { rules, packages } from '@eslint-stylistic/metadata'

console.log(rules)