Псевдонимы пути для импорта в WebStorm

Я использую псевдонимы пути webpack для загрузки модуля ES6.

Например, если я определю псевдоним utilsвместо чего-то вроде
import Foo from "../../../utils/foo", я могу сделать
import Foo from "utils/foo"

Проблема в том, что как только я начинаю использовать псевдонимы, WebStorm теряет отслеживание импорта, и у меня остаются предупреждения и нет автозаполнения.

Есть ли способ указать WebStorm использовать такие псевдонимы?

Да, есть.

Фактически, Webstorm не может автоматически анализировать и применять конфигурацию Webpack, но вы можете настроить псевдонимы таким же образом.

Вам просто нужно пометить родительскую папку «utils» (в вашем примере) как корневой ресурс (щелкните правой кнопкой мыши, отметьте каталог как / resource root).

Нам удалось обойтись следующей структурой:

/src
    /A
    /B
    /C

У нас есть папки AB и C, объявленные в Webpack как псевдонимы. А в Webstorm мы пометили src как «Resource Root».

А теперь мы можем просто импортировать:

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

вместо

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

пока Webstorm все еще правильно анализирует и индексирует весь код, ссылки на файлы, автозаполнение и так далее ...

Мне удалось настроить псевдонимы для WebStorm 2017.2 в веб-пакете следующим образом:

Для записи: в PHPSTORM , работая с laravel mix , мне удалось решить эту проблему, создав файл webpack.config.js отдельно, например:

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

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

А затем импортируем его в webpack.mix.js, например:

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

Убедитесь, что файл конфигурации веб-пакета правильно указан в конфигурации PhpStorm в: Настройки> Языки и рамки> Javascript> Webpack.

Вы можете определять собственные пути, чтобы WebStorm / PhpStorm мог понимать ваши псевдонимы. Но убедитесь, что они совпадают с вашими псевдонимами. Создайте файл в корневом каталоге и назовите его примерно так: webStorm.config.js(любой jsфайл подойдет). Затем настройте свои пути внутри:

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

WebStorm / PhpStorm распознает Systemсобственный модуль и будет рассматривать этот файл как конфигурацию.

На это ответят в комментарии, но чтобы люди не копались в комментариях и не ссылались только на информацию, вот она:

Начиная с WS2017.2 это будет выполняться автоматически . Информация здесь .

В соответствии с этим webstorm автоматически разрешит псевдонимы, включенные webpack.configв корневой каталог проекта. Если у вас есть настраиваемая структура, и webpack.configее нет в корневой папке, перейдите Settings | Languages & Frameworks | JavaScript | Webpackи установите для параметра нужную конфигурацию.

Примечание. Большинство настроек имеют baseконфигурацию, которая затем вызывает версию devили prod. Чтобы это работало должным образом, вам нужно указать webstorm, чтобы он использовал dev .

Не сейчас , мы также использовали псевдонимы путей для файлов в нашем проекте реакции. Имена импорта были короче, но мы многое потеряли в статической проверке веб-шторма, а также в функциях завершения.

Позже мы приняли решение сократить код до трех уровней глубины, а также до одного уровня для общих частей. Функция завершения пути в webstom (ctrl + space)даже помогает снизить накладные расходы на набор текста. В производственной сборке не используются более длинные имена, поэтому окончательный код практически не имеет значения.

Предлагаю пересмотреть ваше решение по поводу псевдонимов. Вы теряете семантическое значение модулей, поступающих из node_modules и вашего собственного кода, а также снова и снова ссылаетесь на файлы псевдонимов, чтобы понять свой код, - это гораздо большие накладные расходы.

В PHPStorm (в настоящее время используется 2017.2) мне не удалось заставить конфигурации веб-пакетов правильно работать в отношении псевдонимов.

Мое исправление предполагает использование раздела основных настроек «Каталоги». Мне просто нужно было пометить каждую папку, на которую ссылается псевдоним, как корень источников, затем щелкнуть раскрывающееся меню свойств для каждой и указать псевдоним как «Префикс пакета». Это сделало все для меня связным.

Не уверен, существует ли раздел «Каталоги» в WebStorm, но если он есть, это кажется надежным методом для работы с псевдонимами импорта.

Для всех, кто борется: path.resolve () должен вызываться с первым аргументом "__dirname", чтобы Idea (Websorm) могла правильно определить путь.

Будет работать на Идею (Websorm):

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

Не будет работать для Idea (Websorm) (пока еще действующий псевдоним webpack):

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

Webstorm не может читать webpack.config, если module.exportsвозвращает функцию. Например

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

Проверьте свой файл конфигурации, возможно, это проблема.

добавить jsconfig.jsв корень вашего проекта

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