Webstorm ES6 с именем import import не может разрешить ошибку символа

У меня есть ошибка в Webstorm при использовании имени импорта ES6 с именем import:

import { nodes } from 'utils/dom';

Я получаю ошибку "не могу разрешить символ" на "узлах"

Также, когда я пытаюсь экспортировать как указанный экспорт, выполните следующие действия:

export {
  write: document.write.bind(document),
  node: document.querySelector.bind(document),
  nodes: document.querySelectorAll.bind(document)
};

Я тоже получаю ошибки. Я использую eslint с парсером babel-eslint. Дело в том, что это работает в Sublime Text 3 как шарм, но по какой-то причине не удается проверить ошибку в Webstorm.

Я предполагаю, что это происходит из-за того, что кроме веб-буфера Eslint выполняется другая проверка кода.

Любая идея, как я могу подавить это и использовать только eslint с парсером babel-eslint?

Любые советы будут оценены

ОТВЕТЫ

Ответ 1

Я получаю ошибку "не могу разрешить символ" на "узлах"

заключается в том, что utils/dom в стандартном коде Node означает "найти dom.js внутри модуля с именем utils". Вы переопределили это поведение, используя свойство webpack moduleDirectories, но WebStorm не знает, что это такое Чтобы WebStorm правильно разрешал utils/dom, вам нужно добавить папку utils в качестве библиотеки в вашей конфигурации проекта webstorm.

Синтаксис export неверен. Синтаксис импорта/экспорта ES6 на 100% не связан с объектами, а в вашем примере экспорта используется синтаксис объекта. import { nodes } запрашивает экспорт с именем nodes. Существует несколько способов, которыми вы могли бы написать экспорт, который у вас есть:

export const write = document.write.bind(document);
export const node = document.querySelector.bind(document);
export const nodes = document.querySelectorAll.bind(document);

или, наоборот, вы можете свернуть их, если вам нравится многострочный var/let/const

export const write = document.write.bind(document),
    node = document.querySelector.bind(document),
    nodes = document.querySelectorAll.bind(document);

или даже

const write = document.write.bind(document);
const node = document.querySelector.bind(document);
const nodes = document.querySelectorAll.bind(document);


export {write, node, nodes};

Ответ 2

Сложно сказать, связано ли это напрямую, но для Webstorm, чтобы узнать, как разрешить импорт, вы также можете перейти в Preferences > Directories и установить папки как Resource Root (или right/context -включить папку и установить ее таким образом)

Это может потребоваться, например, когда вы настроили Webpack для разрешения определенных подкаталогов, где может быть ваша структура проекта:

/
  /docs
  /src
    /containers
      /app
        App.js
    /components
      /header
        Header.js

В этом случае Webstorm ожидает, что импорт в App.js будет выглядеть следующим образом:

import Header from '../../../components/header/Header'

В то время как с помощью Webpack, если вы добавили src в качестве модуля для решения, вы можете сделать следующее, которое Webstorm не понимает в настоящее время, поэтому добавление его в качестве корня ресурса разрешает проблема

import Header from 'components/header/Header'

Ссылка: Псевдонимы путей для импорта в Webstorm