ESlint import / no-unresolved with Babel plugin root import - PullRequest
Новая
       97

ESlint import / no-unresolved with Babel plugin root import

2 голосов
/ 05 августа 2020

Кто-нибудь может мне объяснить, почему ESlint (VS Code, WebStorm) выделяет этот вариант импорта? 

import UserBlock from '~/templates/UserBlock'; //js file

.babelr c

"plugins": [
        [
            "babel-plugin-root-import",
            {
                "rootPathSuffix": "./src/",
                "rootPathPrefix": "~/"
            }
        ]
    ]

.eslintr c. js

module.exports = {
  settings: {
    'import/resolver': {
      'babel-plugin-root-import': {
        rootPathPrefix: '~',
        rootPathSuffix: 'src',
      },
    },
  },
};

1 Ответ

1 голос
/ 12 августа 2020

Решение в соответствии с документами

Исходя из моего опыта работы с плагином «babel-plugin- root -import», вы должны изменить свою конфигурацию на: 

"plugins": [[
  "babel-plugin-root-import",
    {
      "rootPathPrefix": "~"
      "rootPathSuffix": "src",
    }
 ]]

Дополнительные косые черты (/) и точки (.), похоже, сбивают плагин с толку.

Но ...

К сожалению, пакеты eslint для "babel-plugin- root -import "в настоящее время не поддерживаются в хорошем состоянии. Судя по вашему eslintr c, похоже, что вы используете пакет eslint-import-resolver-babel-root-import, поэтому вы « Не позволяйте ESLint путаться ». Если вы еще не установили этот пакет, вы можете сначала попробовать его.

В настоящее время я пробую « eslint-import-resolver-babel- root -import-fixed"форк, который был обновлен совсем недавно. Он настроен немного иначе из-за конфликтов именования NPM; в вашем файле eslintr c вам нужно будет заменить babel-plugin-root-import на eslint-import-resolver-babel-root-import-fixed.

Решение, которое работает

С учетом всего сказанного, я не смог заставить ни одно из них работать. При компиляции с помощью babel проблем нет, но eslint выдает ошибки, как вы описали.

Мое решение за последние пару лет заключалось в добавлении следующего правила eslint: 

"import/no-unresolved": [
  "error",
  {
    "ignore": [
      "^[~]",
    ]
  }
]

Другой подход

Я использую babel-plugin-root-import, потому что у нас есть несколько префиксов root. Если вам нужен только один, я предлагаю изучить babel-plugin-module-resolver, хотя этот может иметь свой собственный набор проблем . Я также использовал «Псевдонимы модулей Webpack» в прошлом, хотя они могут быть вам недоступны.

...