Alias ​​de ruta para importaciones en WebStorm

83

Utilizo alias de ruta de paquete web para la carga del módulo ES6.

Por ejemplo, si defino un alias para en utilslugar de algo como
import Foo from "../../../utils/foo", puedo hacer
import Foo from "utils/foo"

El problema es que una vez que empiezo a usar alias, WebStorm pierde el seguimiento de la importación y me quedo con advertencias y sin autocompletar.

¿Hay alguna forma de indicarle a WebStorm que utilice esos alias?

Bogdan D
fuente

Respuestas:

125

Sí hay.

De hecho, Webstorm no puede analizar y aplicar automáticamente la configuración de Webpack, pero puede configurar los alias de la misma manera.

Solo tiene que marcar la carpeta principal de "utils" (en su ejemplo) como raíz de recursos (haga clic con el botón derecho, marque el directorio como / raíz de recursos).

haga clic derecho en la carpeta

Logramos hacerlo con la siguiente estructura:

/src
    /A
    /B
    /C

Tenemos carpetas AB y C declaradas como alias en Webpack. Y en Webstorm marcamos "src" como "Resource Root".

Y ahora podemos simplemente importar:

import A/path/to/any/file.js

en vez de

import ../../../../../A/path/to/any/file.js

sin dejar de tener Webstorm analizando e indexando correctamente todo el código, enlace a archivos, autocompletado, etc.

Jalil
fuente
2
esto efectivamente romperá las cosas cuando no se construya directamente desde Webstorm
maddrag0n
2
He intentado en WebStorm 2016.2.3, pero esta solución no funciona.
Zation
2
y qué pasa con las importaciones en angular2 import { Component } from '@angular/core', eso también se resuelve. ¿Cómo puedo implementar el atpara dejar más claro que la ruta es un alias?
Hitmands
6
@Toosick ver esta entrada de
blog
3
¿Qué pasa con varias carpetas y múltiples configuraciones de paquetes web? No me funciona tal vez por esto: "De forma predeterminada, WebStorm analizará el archivo de configuración del paquete web en la raíz del proyecto, pero puedes seleccionar otro archivo en Preferencias | Idiomas y marcos | JavaScript | Webpack" blog.jetbrains.com / webstorm / 2017/06 /…
rofrol
54

Logré configurar alias para WebStorm 2017.2 dentro de un paquete web como este:

ingrese la descripción de la imagen aquí

Tomasz Mularczyk
fuente
2
Funciona. El archivo debe incluir module.exports = {resolve: {alias: {'@utils': path.resolve (__ dirname, '../utils/')}}}. También tuve que reiniciar WebStorm para aplicar los cambios.
Alexander
1
¡Gracias! Me ayudó en PhpStorm 2019.1
Илья Зеленько
Debemos marcar esta respuesta como la mejor respuesta. Gracias.
Moein Alizadeh
este me ayudó
TomTomSamSam
¡Gracias! Finalmente alguna solución para este molesto problema.
Alberto Perez
34

Para el registro: en PHPSTORM , trabajando con laravel mix , logré resolver esto creando un archivo webpack.config.js por separado como:

const path = require('path')
const webpack = require('webpack')

module.exports = {
  ...
  resolve: {
    extensions: ['.js', '.json', '.vue'],
    alias: {
      '~': path.resolve(__dirname, './resources/assets/js')
    }
  },
  ...
}

Y luego importarlo en webpack.mix.js como:

const config = require('./webpack.config')
...
mix.webpackConfig(config)

Asegúrese de que el archivo de configuración del paquete web esté apuntado correctamente en la configuración de PhpStorm en: Configuración> Idiomas y marcos> Javascript> Webpack

nachodd
fuente
1
Tenga en cuenta la situación de los usuarios que en realidad no usan el paquete web en su proyecto y desean configurar esos dos archivos ÚNICAMENTE con el propósito de enseñar a PHPStorm cómo resolver alias. Esas personas no sabrán qué debería ir en el "..." para que el archivo webpack.mix.js funcione realmente para este propósito. Específicamente, si simplemente elimino "...", el mixIDE informa que el símbolo no ha sido resuelto, lo cual es un fuerte indicio de que en realidad no funcionará. Faltan líneas, pero de importancia crítica, en las que el símbolo de "mezcla" se requiere / importa de alguna manera. Añádalos a su respuesta.
Szczepan Hołyszewski
20

Puede definir rutas personalizadas, para que WebStorm / PhpStorm pueda entender sus alias. Pero asegúrese de que sean idénticos a sus alias. Cree un archivo en su directorio raíz y llámelo así: webStorm.config.js(cualquier jsarchivo estará bien). Luego configura tus caminos dentro:

System.config({
  "paths": {
    "components/*": "./src/components/*",
    "core/*": "./src/core/*",
    ...
  }
});

WebStorm / PhpStorm reconocerá Systemcomo su propio módulo y tratará este archivo como configuración.

E. Dn
fuente
1
¡Esto realmente funciona! ¡Realmente me ayudó con el proyecto en Rollup + Svelte!
joycollector
1
Gracias. funciona. P: ¿Conoce alguna documentación sobre las opciones completas disponibles para este archivo?
Mojtaba Hn
8

Esto se responde en un comentario, pero para evitar que las personas busquen en los comentarios y enlacen solo información, aquí está:

A partir de WS2017.2, esto se hará automáticamente . La información está aquí .

De acuerdo con esto, webstorm resolverá automáticamente los alias que se incluyen webpack.configen la raíz del proyecto. Si tiene una estructura personalizada y webpack.configno está en la carpeta raíz, vaya Settings | Languages & Frameworks | JavaScript | Webpacky configure la opción en la configuración que necesita.

Nota: La mayoría de las configuraciones tienen una baseconfiguración que luego llama a una versión devo prod. Para que esto funcione correctamente, debe indicarle a webstorm que use dev one .

webnoob
fuente
2
Esto parece funcionar a menos que se utilice un alias de Webpack. Lo estoy usando @como un alias para mi srccarpeta, pero incluso después de señalar Webstorm a mi configuración, todavía no resolvería mis importaciones correctamente. Sin embargo, una vez que marqué la srccarpeta como Resource Root, funcionó como se esperaba. Sería bueno si Webstorm pudiera manejar alias, pero no es gran cosa.
dericcain
¿Estás usando un símbolo para un alias como este? '@': '../src') . Además, ¿está utilizando un archivo para la configuración de su paquete web o varios? Preguntándose qué es diferente. ¡Gracias!
dericcain
3
Un ejemplo mío es '@': path.resolve(__dirname, '../src/components'). Utilizo varios archivos, webpack.base.conf.jsluego devy prodversiones. Ellos a su vez llaman una carpeta de configuración con index.js, dev.env.jsy prod.env.js. Apunto mi webstorm para mirar elwebpack.dev.conf.js archivo.
webnoob
2
Mi configuración es muy similar (vue-webpack-pwa) y apuntar hacia el .dev.confhizo el truco. Apuntar al .base.confno estaba funcionando. ¡Buena llamada!
dericcain
Creo que esto puede necesitar que se abra un problema. Puedo confirmar que funciona, pero a menudo lo abro y todos los alias del paquete web no están resueltos. Hago un "Invalidate Caches and Restart", y funciona como se anuncia
willredington315
7

No ahora , también estábamos usando alias de ruta para los archivos en nuestro proyecto de reacción. Los nombres de importación eran más cortos, pero perdimos mucho en la verificación estática de webstorm, así como en las funciones de finalización.

Más tarde tomamos la decisión de reducir el código a solo 3 niveles de profundidad, así como a un solo nivel para las partes comunes. La función de finalización de ruta de webstom (ctrl + space)incluso ayuda a reducir la sobrecarga de escritura. La compilación de producción no usa nombres más largos, por lo que apenas hace ninguna diferencia en el código final.

Sugeriré que reconsidere su decisión sobre los alias. Pierde el significado semántico de los módulos que provienen de node_modules y su propio código, además de hacer referencia a los archivos de alias una y otra vez para darle sentido a su código, es una sobrecarga mucho mayor.

sandeep
fuente
1
Esta es la mejor respuesta. Las rutas relativas son molestas, pero la conveniencia de los alias de ruta no vale la pena perder la funcionalidad IDE útil.
thewoolleyman
3

En PHPStorm (usando 2017.2 actualmente), no he podido hacer que las configuraciones del paquete web funcionen correctamente con respecto a los alias.

Mi solución implica el uso de la sección "Directorios" de la configuración principal. Solo tuve que marcar cada carpeta a la que hace referencia un alias como raíz de origen, luego hacer clic en el menú desplegable de propiedades para cada una y especificar el alias como un "Prefijo de paquete". Esto hizo que todo se vincule para mí.

No estoy seguro de si la sección Directorios existe en WebStorm, pero si lo hace, parece ser un método infalible para hacer que los alias de importación funcionen.

Gordon Forsythe
fuente
2

Para cualquiera que tenga dificultades: path.resolve () debe ser llamado con el primer argumento "__dirname" para Idea (Websorm) para poder resolver la ruta correctamente.

Funcionará para Idea (Websorm):

alias: {
    '@someAlias': pathLib.resolve(__dirname, 'path/to/directory')
}

No funcionará para Idea (Websorm) (aunque siga siendo un alias de paquete web válido):

alias: {
    '@someAlias': pathLib.resolve('path/to/directory')
}
Kshatra
fuente
1
¿Cómo se consigue que Webstorm reconozca @someAliascorrectamente?
Dave Johansen
¿Dónde archivo definiste alias? En que archivo?
Daniel
2

Webstorm no puede leer webpack.config si module.exportsdevuelve una función. Por ejemplo

module.exports = function (webpackEnv) {
  return {
    mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
    ...
 }
}

Verifique su archivo de configuración, tal vez esto sea porque es un problema.

Aleksey Mann
fuente
1

agregue jsconfig.jsen la raíz de su proyecto

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"]
    }
  }
}

keating
fuente