WebStorm ES6 nome di importazione ottenere non può risolvere l'errore simbolo

Question

ho un errore nel WebStorm quando si utilizza ES6 chiamato dichiarazione di importazione:

import { nodes } from 'utils/dom'; 

ottengo "non può risolvere il simbolo" errore "nodi"

Anche quando Provo ad esportare come esportazione denominata in questo modo:

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

Ottengo anche errori. Io uso eslint con parser babel-eslint. Il fatto è che questo funziona in Sublime Text 3 come un incantesimo, ma per qualche motivo fallisce il controllo degli errori in Webstorm.

Suppongo che ciò avvenga perché, ad eccezione di Eslint, la webstorm sta eseguendo altri controlli di codice.

Qualche idea su come posso sopprimerla e usare solo eslint con parser babel-eslint?

Qualsiasi consiglio sarà apprezzato

Answer 1

ottengo "non può risolvere il simbolo" errore "nodi"

è perché utils/dom nel codice Nodo di serie significa "trovare dom.js all'interno di un modulo chiamato 'utils'. Hai sovrascritto questo comportamento usando la proprietà moduleDirectories di webpack, ma WebStorm non sa cosa sia. Affinché WebStorm risolva correttamente utils/dom, devi aggiungere la cartella utils come libreria nella configurazione del tuo progetto webstorm.

La sintassi export non è corretta. La sintassi di importazione/esportazione ES6 non è correlata al 100% agli oggetti e nell'esportazione di esempio si utilizza la sintassi dell'oggetto. import { nodes } sta richiedendo un'esportazione denominata nodes.Ci sono diversi modi che si potrebbe scrivere le esportazioni che si hanno:

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

o in alternativa si potrebbe crollare loro se vi piace più righe var/let/const

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

o anche

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


export {write, node, nodes}; 

Answer 2

Difficile dì se questo è direttamente correlato, ma per Webstorm per sapere come risolvere le tue importazioni, puoi anche andare a Preferences > Directories e impostare le cartelle come Resource Root (o destra/contesto del mouse su una cartella e impostare in questo modo)

Questo potrebbe aver bisogno di essere fatto, ad esempio, quando hai configurato Webpack per risolvere alcuni sub-directory , dove la vostra struttura del progetto potrebbe essere:

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

nel qual caso WebStorm si aspetterebbe un'importazione in App.js a guardare come la seguente:

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

Mentre con Webpack, se hai aggiunto src come modulo per risolvere, è possibile effettuare le seguenti operazioni, che WebStorm attualmente non capisce, quindi aggiungerla come risorsa principale risolve il problema

import Header from 'components/header/Header' 

Riferimento: Path aliases for imports in Webstorm