Webstorm ES6 nazwie import się nie można rozwiązać symbol błędu

Question

mam błąd w Webstorm podczas korzystania ES6 nazwie zgłoszenia przywozowego:

import { nodes } from 'utils/dom'; 

otrzymuję „nie można rozwiązać symbol” błąd na „węzły”

także gdy Próbuję eksportować jako eksport nazwany w ten sposób:

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

Dostaję również błędy. Używam eslint z parserem babel-eslint. Chodzi o to, że działa to w Sublime Text 3 jako uroku, ale z jakiegoś powodu nie sprawdza błędów w Webstorm.

Zakładam, że tak jest, ponieważ Webstorm Eslint wykonuje inne sprawdzanie kodu.

Dowolny pomysł, w jaki sposób mogę to ukryć i używać tylko eslint z parserem babel-eslint?

Wszelkie porady będą mile widziane

Answer 1

otrzymuję „nie można rozwiązać symbol” błąd na „węzły”

jest bo utils/dom w standardowy kod Node oznacza „znaleźć dom.js wewnątrz modułu o nazwie Zastąpiłeś to zachowanie, używając właściwości Webpack o nazwie moduleDirectories, ale WebStorm nie wie, co to jest. Aby WebStorm prawidłowo rozpoznał utils/dom, musisz dodać folder utils jako bibliotekę w konfiguracji projektu Webstorm.

Twoja składnia export jest niepoprawna. Składnia importu/eksportu ES6 jest w 100% niepowiązana z obiektami, aw eksportowanym przykładzie używasz składni obiektu. import { nodes } pyta o wywóz o nazwie nodes.Istnieje wiele sposobów, że można napisać eksportu, które masz:

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

lub alternatywnie można zwinąć je jeśli chcesz MultiLine var/let/const

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

lub nawet

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


export {write, node, nodes}; 

Answer 2

trudno powiedz, jeśli jest to bezpośrednio powiązane, ale dla Webstorm, aby dowiedzieć się, jak rozwiązać import, możesz również przejść do Preferences > Directories i ustawić foldery jako Resource Root (lub prawo/kontekście przyciskiem na folderze i ustawić go w ten sposób)

Może to muszą być wykonane, na przykład, kiedy już skonfigurowany WebPACK rozwiązać niektóre podkatalogów , gdzie struktura projektu mogą być:

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

w takim przypadku Webstorm spodziewałbym importu w App.js aby wyglądać następująco:

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

Podczas gdy z Webpack, jeśli dodasz src jako moduł do rozwiązania, można wykonać następujące czynności, które Webstorm aktualnie nie rozumieją, stąd dodanie go jako zasób root postanawia problem

import Header from 'components/header/Header' 

Numer referencyjny: Path aliases for imports in Webstorm