Prettier 插件排序导入

一个 Prettier 插件，用于按提供的正则表达式顺序对导入声明进行排序。

注意：如果你正在从 v2.x.x 迁移到 v3.x.x，请阅读迁移指南

输入

import React, {
    FC,
    useEffect,
    useRef,
    ChangeEvent,
    KeyboardEvent,
} from 'react';
import { logger } from '@core/logger';
import { reduce, debounce } from 'lodash';
import { Message } from '../Message';
import { createServer } from '@server/node';
import { Alert } from '@ui/Alert';
import { repeat, filter, add } from '../utils';
import { initializeApp } from '@core/app';
import { Popup } from '@ui/Popup';
import { createConnection } from '@server/database';

输出

import { debounce, reduce } from 'lodash';
import React, {
    ChangeEvent,
    FC,
    KeyboardEvent,
    useEffect,
    useRef,
} from 'react';

import { createConnection } from '@server/database';
import { createServer } from '@server/node';

import { initializeApp } from '@core/app';
import { logger } from '@core/logger';

import { Alert } from '@ui/Alert';
import { Popup } from '@ui/Popup';

import { Message } from '../Message';
import { add, filter, repeat } from '../utils';

安装

npm

npm install --save-dev @trivago/prettier-plugin-sort-imports

或者使用 yarn

yarn add --dev @trivago/prettier-plugin-sort-imports

注意：如果你正在从 v2.x.x 迁移到 v3.x.x，请阅读迁移指南

注意：如果格式化 .vue 单文件组件文件，请安装 @vue/compiler-sfc（如果在你的依赖树中不存在）- 这通常在 Vue 项目中。

使用

在 Prettier 配置文件中添加顺序。

module.exports = {
  "printWidth": 80,
  "tabWidth": 4,
  "trailingComma": "all",
  "singleQuote": true,
  "semi": true,
  "importOrder": ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true
}

**注意：某些包管理器（如 pnpm）可能存在问题。你可以通过在 Prettier 配置文件中提供额外的配置选项来解决这个问题。

module.exports = {
    ...
    "plugins": ["@trivago/prettier-plugin-sort-imports"]
}

API

`importOrder`

类型: Array<string>

字符串格式的正则表达式集合。

"importOrder": ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],

默认行为： 插件会将不属于 importOrder 列表的第三方导入移到顶部。要将第三方导入移动到所需位置，你可以使用 <THIRD_PARTY_MODULES> 将第三方导入分配到适当的位置：

"importOrder": ["^@core/(.*)$", "<THIRD_PARTY_MODULES>", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],

`importOrderSeparation`

类型: boolean

默认值: false

一个布尔值，用于启用或禁用已排序的导入声明组之间的新行分隔。分隔根据 importOrder 进行。

"importOrderSeparation": true,

`importOrderSortSpecifiers`

类型: boolean

默认值: false

一个布尔值，用于启用或禁用导入声明中说明符的排序。

`importOrderGroupNamespaceSpecifiers`

类型: boolean

默认值: false

一个布尔值，用于启用或禁用将命名空间说明符排序到导入组的顶部。

`importOrderCaseInsensitive`

类型: boolean

默认值: false

一个布尔值，用于在用于对每个匹配组内的导入进行排序的算法中启用大小写不敏感。

例如，当为 false（或未指定）时：

import ExampleView from './ExampleView';
import ExamplesList from './ExamplesList';

与 "importOrderCaseInsensitive": true 相比：

import ExamplesList from './ExamplesList';
import ExampleView from './ExampleView';

`importOrderParserPlugins`

类型: Array<string>

默认值: ["typescript", "jsx"]

以前称为 experimentalBabelParserPluginsList。

Babel 解析器的插件集合。该插件将此列表传递给 Babel 解析器，以便它能够理解正在格式化的文件中使用的语法。该插件使用 Prettier 本身来确定它需要使用的解析器，但如果失败，你可以使用此字段强制使用 Babel 解析器插件所需的插件。

向 Babel 解析器传递插件：

  "importOrderParserPlugins" : ["classProperties", "decorators-legacy"]

向 Babel 解析器插件传递选项：由于 Prettier 选项仅限于字符串，你可以将带有选项的插件作为插件数组的 JSON 字符串传递： "[\"plugin-name\", { \"pluginOption\": true }]"。

  "importOrderParserPlugins" : ["classProperties", "[\"decorators\", { \"decoratorsBeforeExport\": true }]"]

要禁用 Babel 解析器的默认插件，传递一个空数组：

importOrderParserPlugins: []

导入排序如何工作？

该插件提取在 importOrder 中定义的导入。这些导入被视为_本地导入_。不属于 importOrder 的导入被视为_第三方导入_。

之后，插件使用自然排序算法对_本地导入_和_第三方导入_进行排序。

最后，插件返回最终的导入，_第三方导入_在顶部，_本地导入_在末尾。

_第三方导入_的位置（默认在顶部）可以通过在 importOrder 中使用 <THIRD_PARTY_MODULES> 特殊词来覆盖。

常见问题 / 故障排除

遇到一些麻烦或问题？你可以查看常见问题 / 故障排除部分。

兼容性

框架	支持	注释
使用 ES 模块的 JS	✅ 全部	-
使用 ES 模块的 NodeJS	✅ 全部	-
React	✅ 全部	-
Angular	✅ 全部	通过 `importOrderParserPlugins` API 支持
Vue	✅ 全部	需要 `@vue/compiler-sfc`
Svelte	⚠️ 即将支持	欢迎任何贡献