迁移

ESLint 在 v8.53.0 中弃用了其格式化规则 并建议用户迁移到 ESLint 风格。虽然 ESLint 从未删除弃用的规则，但这仍然意味着弃用的规则将不会收到任何未来的更新。在 ESLint 风格中，我们已经迁移了所有这些规则，并将继续维护它们。

本指南将帮助您进行迁移。

手动迁移

ESLint 风格从 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 风格

• 方法 1：迁移到单个插件：JavaScript、TypeScript 和 JSX 的单个包。这是推荐的方法。
• 方法 2：迁移到 1 对 1 插件：每个源包一个包。规则是 1:1 映射，迁移起来会更容易。

方法 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。

// .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 迁移插件

我们提供一个 ESLint 插件，用于将内置的样式规则迁移到 @stylistic 命名空间。

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)