我过去一直使用eslint-plugin-import来管理导入块的linting，我正在尝试prettier内置的导入排序。我希望所有以react开头的模块都是第一个，然后是所有第三方模块，最后是所有绝对模块。所以这样的块应该是有效的：

import React, { useState } from 'react';
import { KeyboardAvoidingView, StyleSheet, View } from 'react-native';
import { Text, TextInput } from 'react-native-paper';
import { useBottomSheetInternal } from '@gorhom/bottom-sheet';
import { Column, PillTabs, Row } from '../../../../common/components';
import { theme } from '../../../../theme';
import { Steps } from '..';
import { Search } from './Search';

我已经调整了我的.prettierrc.js，看起来像这样：

module.exports = {
  arrowParens: 'avoid',
  singleQuote: true,
  trailingComma: 'all',
  // sort imports
  importOrderSeparation: false,
  importOrderSortSpecifiers: true,
  importOrderCaseInsensitive: true,
  importOrder: [
    '^react(.*)$', // All react imports first
    '<THIRD_PARTY_MODULES>', // Then node modules
    '^src/(.*)$', // All local files from src
    '^(.*)/(?!generated)(.*)/(.*)$', // Everything not generated
    '^(.*)/generated/(.*)$', // Everything generated
    '^[./]', // Absolute path imports
  ],
};

我的愿望很简单：

module.exports = {
  root: true,
  extends: ['@react-native-community', 'prettier'],
  rules: {
    // Eslint rules:
    'space-in-brackets': 0,
    'prettier/prettier': [1],

    // React rules:
    'react-hooks/exhaustive-deps': 0,

    // React native community overrides:
    'react-native/no-inline-styles': 0,

    // Typescript rules:
    '@typescript-eslint/no-unused-vars': [1],
    '@typescript-eslint/no-shadow': 0,
  },
};

但是，上面的代码块显示了一个linting错误：

不幸的是，更漂亮的导入linting错误并没有那么有用。错误说：
删除';⏎import·{·useBottomSheetInternal·}·from·'@gorhom/bottom-sheet eslintprettier/prettier
在自动保存时，eslint和prettier似乎在战斗，因为它重新格式化以将@gorhom/bottom-sheet导入放在第一位，然后再次重新格式化以将react块放在第一位，创建了一个eslint prettier战斗 Flink 。
我在prettierrc中设置导入顺序的方式有什么问题吗？eslint不明白我想首先导入所有的react？