Правило сортировки импорта Eslint, а не применение импорта React в верхней части файла ⇐ Javascript

[Anonymous]

Настройка проекта: < /strong>
У меня новый проект React, настроенный с TypeScript и VITE. Я использую Eslint для кодовой линии с помощью пользовательской конфигурации, которая обеспечивает правильный импорт. Проект настроен со следующими зависимостями: < /p>

• реагировать с TypeScript. < /Li>
  Vice в качестве инструмента сборки. /> eslint.config.js

  Код: Выделить всё

  import js from '@eslint/js';
  import importPlugin from 'eslint-plugin-import';
  import reactHooks from 'eslint-plugin-react-hooks';
  import reactRefresh from 'eslint-plugin-react-refresh';
  import globals from 'globals';
  import tseslint from 'typescript-eslint';
  
  export default tseslint.config(
  {
  ignores: ['dist'],
  },
  
  js.configs.recommended,
  ...tseslint.configs.recommended,
  
  {
  files: ['**/*.{ts,tsx,js,jsx}'],
  languageOptions: {
  ecmaVersion: 2020,
  sourceType: 'module',
  globals: {
  ...globals.browser,
  React: 'readonly', // Make React available globally
  },
  },
  plugins: {
  'react-hooks': reactHooks,
  'react-refresh': reactRefresh,
  import: importPlugin,
  },
  rules: {
  ...reactHooks.configs.recommended.rules,
  'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
  
  // formatting
  semi: ['error', 'always'],
  indent: ['error', 2],
  'no-mixed-spaces-and-tabs': 'error',
  
  // import sorting - enhanced rules
  'import/first': 'error', // Ensures all imports are at the top of the file
  'import/no-duplicates': 'error', // Prevents duplicate imports
  'import/newline-after-import': 'error', // Enforces a newline after import statements
  'import/order': [
  'error',
  {
  groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
  pathGroups: [
  {
  pattern: 'react',
  group: 'external',
  position: 'before',
  },
  {
  "pattern": "assets/**",
  "group": "internal",
  "position": "before"
  },
  ],
  pathGroupsExcludedImportTypes: ['react'],
  'newlines-between': 'always',
  alphabetize: {
  order: 'asc',
  caseInsensitive: true,
  },
  },
  ],
  },
  }
  );
  

  app.tsx

  Код: Выделить всё

  import reactLogo from './assets/react.svg';
  
  import { useState } from 'react';
  
  import viteLogo from '/vite.svg';
  import './App.css';
  
  function App() {
  const [count, setCount] = useState(0);
  
  return (
  
  
  [url=https://vite.dev]
  [img]{viteLogo} className=[/img]
  [/url]
  [url=https://react.dev]
  [img]{reactLogo} className=[/img]
  [/url]
  
  Vite + React
  
  
  );
  }
  
  export default App;
  
  

  Проблема :
  Я ожидаю, что Eslint обеспечит соблюдение того, что импорт React появляется в верхней части файла (на основе правила «импорт/порядка»), но он не показывает ошибку, когда React ниже других импортов, таких как Vitelogo. However, when I move the react import below viteLogo, I do see the error saying react import should occur before import of ./assets/react.svg eslint(import/order)
  I have the following import sorting rules in place:
  
  'import/first': 'error' (ensures imports appear at the Верх).
• 'import/order': [...] (сортирующие группы с определенной позицией для React).

В чем может быть проблема с моей конфигурацией, которая предотвращает импорт React на вершине файла?>

Подробнее здесь: https://stackoverflow.com/questions/796 ... f-the-file