Почему eslint-import-resolver-typescript работает неправильно в моей настройке турборепо

Я использую настройку турборепо для своих внешних приложений nextJS и имею следующую структуру папок:

      |--apps
|----template1
|------.eslintrc.js
|------package.json
|------tsconfig.json
|----template2
|------.eslintrc.js
|------package.json
|------tsconfig.json
|--packages
|----config-eslint
|------index.js
|------package.json
|----config-tsconfig
|------package.json
|------tsconfig.base.json
|------tsconfig.nextjs.json
|--.eslintrc.js
|--package.json

Все идет нормально. Когда я работал в шаблоне 1, все работало нормально и как и ожидалось. Но теперь я начал работать в шаблоне2, и у меня странное поведение с моими плагинами eslint eslint-plugin-import и eslint-import-resolver-typescript, но только в шаблоне1 или в шаблоне2. Кажется, плагины не могут управлять обоими модулями одновременно?? Что-то не так с моей конфигурацией?

пакеты > config-eslint > package.json:

      {
    "name": "eslint-config-base",
    "version": "0.0.0",
    "main": "index.js",
    "scripts": {
        "update-dependencies": "npx npm-check-updates -u"
    },
    "devDependencies": {
        "eslint": "8.44.0",
        "@tanstack/eslint-plugin-query": "^4.29.9",
        "@typescript-eslint/eslint-plugin": "^6.0.0",
        "@typescript-eslint/parser": "^6.0.0",
        "eslint-config-next": "^13.4.9",
        "eslint-config-prettier": "8.8.0",
        "eslint-config-turbo": "^1.10.7",
        "eslint-import-resolver-typescript": "3.5.5",
        "eslint-plugin-import": "2.27.5",
        "eslint-plugin-prettier": "4.2.1",
        "eslint-plugin-react": "7.32.2",
        "eslint-plugin-unused-imports": "^2.0.0"
    }
}

пакеты > config-eslint > index.js:

      /** @type {import("eslint").Linter.Config} */

module.exports = {
    root: true,
    plugins: ['@typescript-eslint', '@tanstack/query', 'import', 'unused-imports', 'prettier'],
    extends: [
        'plugin:import/recommended',
        'plugin:import/typescript',
        'plugin:@tanstack/eslint-plugin-query/recommended',
        'next',
        'turbo',
        'prettier',
    ],
    rules: {
        'import/order': [
            'error',
            {
                groups: ['builtin', 'external', 'internal', 'parent', 'sibling'],
                'newlines-between': 'always',
                alphabetize: {
                    order: 'asc',
                    caseInsensitive: true,
                },
            },
        ],
    },
    parser: '@typescript-eslint/parser',
    parserOptions: {
        babelOptions: {
            presets: [require.resolve('next/babel')],
        },
        tsconfigRootDir: __dirname,
        project: ['tsconfig.json', 'packages/*/tsconfig.json'],
    },

    settings: {
        typescript: {},
        'import/parsers': {
            '@typescript-eslint/parser': ['.ts', '.tsx'],
        },
        'import/resolver': {
            typescript: {
                alwaysTryTypes: true,
                project: ['./tsconfig.json', 'apps/*/tsconfig.json', 'packages/*/tsconfig.json'],
            },
        },
        react: {
            version: 'detect',
        },
    },
};

Файлы package.json в шаблонах template1 и template2 равны, за исключением внешних зависимостей.
приложения > шаблон1/шаблон2 > package.json:

      {
    "name": "template2",
    "version": "0.0.0",
    "scripts": {
        "build": "next build",
        "dev": "open http://localhost:3202 && next dev --port 3202",
        "lint": "eslint --max-warnings 0 .",
        "lint-fix": "eslint --fix .",
        "tsc": "tsc -p tsconfig.json",
        "format-fix": "prettier --config ../../.prettierrc --write --ignore-unknown -l .",
        "update-dependencies": "npx npm-check-updates -u"
    },
    "dependencies": {
        "config-tailwind": "*",
        "shared": "*"
    },
    "devDependencies": {
        "config-tsconfig": "*"
    }
}

Теперь позвольте мне объяснить это странное поведение.
У меня есть точно такой же компонент реагирования в модулях template1 и template2. В шаблоне 1 в vsCode не отображается ошибка eslint, и когда я анализирую проект, ошибок также не отображается... пока все хорошо.

В шаблоне2 тот же компонент показывает ошибки импорта eslint, и когда я автоматически их исправляю, он меняет порядок импорта, и ошибки исчезают, но он не сортируется так, как я установил правило импорта/упорядочения. когда я связываю проект template2, я получаю ожидаемую кучу ошибок импорта, но vsCode не распознает эти ошибки.

Когда я меняю настройки в своем конфигурационном файле, чтобы разрешить импорт только одного из этих проектов, это работает. но оба вместе не работают:

Я играл со своими eslint-конфигурациями, но мне удалось заставить шаблон1 или шаблон2 распознавать правила импорта/упорядочения.

Работает только для шаблона1 (как и ожидалось):

      settings: {
        typescript: {},
        'import/parsers': {
            '@typescript-eslint/parser': ['.ts', '.tsx'],
        },
        'import/resolver': {
            typescript: {
                alwaysTryTypes: true,
                project: ['./tsconfig.json', 'apps/template1/tsconfig.json'],
            },
        },
        react: {
            version: 'detect',
        },
    },

Работает только для шаблона2 (как и ожидалось):

      settings: {
        typescript: {},
        'import/parsers': {
            '@typescript-eslint/parser': ['.ts', '.tsx'],
        },
        'import/resolver': {
            typescript: {
                alwaysTryTypes: true,
                project: ['./tsconfig.json', 'apps/template2/tsconfig.json'],
            },
        },
        react: {
            version: 'detect',
        },
    },

Работает только для шаблона1 (не так, как ожидалось):

      settings: {
        typescript: {},
        'import/parsers': {
            '@typescript-eslint/parser': ['.ts', '.tsx'],
        },
        'import/resolver': {
            typescript: {
                alwaysTryTypes: true,
                 project: ['./tsconfig.json', 'apps/*/tsconfig.json', 'packages/*/tsconfig.json'],
            },
        },
        react: {
            version: 'detect',
        },
    },

Работает только для шаблона1 (не так, как ожидалось):

      settings: {
        typescript: {},
        'import/parsers': {
            '@typescript-eslint/parser': ['.ts', '.tsx'],
        },
        'import/resolver': {
            typescript: {
                alwaysTryTypes: true,
                project: ['./tsconfig.json', 'apps/template1/tsconfig.json', 'apps/template2/tsconfig.json'],
            },
        },
        react: {
            version: 'detect',
        },
    },

Работает только для шаблона 2: (просто другой порядок массива моего проекта... тоже не так, как ожидалось)

      settings: {
        typescript: {},
        'import/parsers': {
            '@typescript-eslint/parser': ['.ts', '.tsx'],
        },
        'import/resolver': {
            typescript: {
                alwaysTryTypes: true,
                project: ['./tsconfig.json', 'apps/template2/tsconfig.json', 'apps/template1/tsconfig.json'],
            },
        },
        react: {
            version: 'detect',
        },
    },

Я также пытался переопределить настройки в файлах .eslint самих шаблонов template1 и template2, но это тоже не работает.

приложения > шаблон1 > .eslintrc.js:

      /** @type {import("eslint").Linter.Config} */

module.exports = {
    root: true,

    parserOptions: {
        tsconfigRootDir: __dirname,
        project: ['./tsconfig.json'],
    },

    extends: ['eslint-config-base'],
}

Что я делаю не так? На данный момент я просто отключил правило импорта/заказа...
Любая помощь приветствуется!

0 ответов

Другие вопросы по тегам