eslint разрешить ошибку при импорте с использованием настроенного сопоставления пути jsconfig.json - PullRequest
Новая
       77

eslint разрешить ошибку при импорте с использованием настроенного сопоставления пути jsconfig.json

0 голосов
/ 11 июня 2019

Вот моя структура проекта: 

-src

--assets
--components
--constants
--helpers
--pages
--routes

eslintrc.json
jsconfig.json
App.js
index.js

Я устал от:

import SomeComponent from '../../../../../components/SomeComponent';

И я хотел сделать:

import SomeComponent from '@components/SomeComponent';

Итак, я видел этот вопрос здесь на SO:

VSCode Intellisense не работает с webpack + псевдоним

И я получил его на работус:

jsconfig.json 

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "es6",
    "module": "commonjs",
    "paths": {
      "@components/*": ["./src/components/*"]
     }
  }
}

Но теперь он жалуется на то, что он не разрешен, даже если он прекрасно компилируется.

ошибка eslint:

Невозможно разрешить путь к модулю '@ components / SocialMedia' .eslint (импорт / без разрешения)

ПРИМЕЧАНИЕ:

Я не хочу отключать eslint.Я тоже хочу, чтобы он понимал этот путь.

Ответы [ 2 ]

1 голос
/ 25 июля 2019

Альтернативный способ, предполагая, что у вас установлено eslint-plugin-import (в ваших зависимостях). Просто добавьте эти «настройки» в ваш файл .eslintrc.json.

.eslintrc.json 

{
  "settings": {
    "import/resolver": {
      "node": {
        "moduleDirectory": ["node_modules", "src/"]
      }
    }
  }
}

jsconfig.json 

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

Тогда вы можете просто позвонить на 

import SomeComponent from 'components/SomeComponent';`
1 голос
/ 11 июня 2019

Я установил:

npm install -D eslint-import-resolver-alias

И я добавил в свой конфигурационный файл eslint:

eslintrc.json 

"settings": {
    "import/resolver" : {
      "alias" : {
        "map" : [
          ["@components","./src/components/"]
        ],
        "extensions": [".js"]
      }
    }
  }

И теперь он работает, и eslint больше не показывает ошибок.

РЕДАКТИРОВАТЬ:

Я использую webpack, и мне также нужно было сделать:

webpack.config.js 

resolve: {
    alias: {
      '@components': path.resolve(__dirname, 'src/components/')
    }
  }
...