Alias ​​de ruta para importaciones en WebStorm

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?

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).

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.

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

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

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.

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 .

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.

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.

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')
}

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.

agregue jsconfig.jsen la raíz de su proyecto

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