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


83

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

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

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

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

Ответы:


125

Да, есть.

Фактически, 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 все еще правильно анализирует и индексирует весь код, ссылки на файлы, автозаполнение и так далее ...


2
это эффективно сломает вещи, если не строить напрямую из Webstorm
maddrag0n

2
Я пробовал в WebStorm 2016.2.3, но это решение не работает.
Zation

2
а что насчет импорта в angular2 import { Component } from '@angular/core', это тоже решено. Как я могу реализовать, atчтобы было более ясно, что путь является псевдонимом?
Hitmands 03

6
@Toosick см. Этот пост в блоге blog.jetbrains.com/webstorm/2017/06/…
anstarovoyt 04

3
А как насчет нескольких папок и нескольких конфигураций веб-пакетов? У меня не работает, возможно, из-за этого: «По умолчанию WebStorm проанализирует файл конфигурации веб-пакета в корне проекта, но вы можете выбрать другой файл в Настройках | Языки и рамки | JavaScript | Webpack» blog.jetbrains.com / webstorm / 06.06.2017 /…
rofrol

54

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

введите описание изображения здесь


2
Оно работает. Файл должен включать module.exports = {resolve: {alias: {'@utils': path.resolve (__ dirname, '../utils/')}}}. Также мне пришлось перезапустить WebStorm, чтобы изменения вступили в силу.
Александр

1
Благодаря! Мне это помогло в PhpStorm 2019.1
Илья Зеленько

Мы должны отметить этот ответ как лучший ответ. Благодарю.
Moein Alizadeh

этот мне помог
TomTomSamSam

Благодаря! Наконец-то какое-то решение этой досадной проблемы.
Альберто Перес

34

Для записи: в 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.


1
Пожалуйста, рассмотрите ситуацию пользователей, которые на самом деле не используют webpack в своем проекте и хотят настроить эти два файла ИСКЛЮЧИТЕЛЬНО с целью обучения PHPStorm тому, как разрешать псевдонимы. Эти люди не будут знать, что должно быть в "...", чтобы файл webpack.mix.js действительно работал для этой цели. В частности, если я просто удалю "...", mixIDE сообщит , что символ не разрешен, что является сильным намеком на то, что на самом деле он не будет работать. Есть отсутствующие, но критически важные строки, где символ «микс» каким-то образом требуется / импортируется. Пожалуйста, добавьте их к своему ответу.
Szczepan Hołyszewski

20

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

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

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


1
Это действительно работает! Очень помогли мне с проектом на Rollup + Svelte!
joycollector

1
Благодарю. оно работает. В: Знаете ли вы какую-либо документацию для полных вариантов, доступных для этого файла?
Mojtaba Hn

8

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

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

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

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


2
Кажется, это работает, если не используется псевдоним Webpack. Я использую @в качестве псевдонима для своей srcпапки, но даже после того, как я указал Webstorm на мою конфигурацию, он все равно не разрешил мой импорт правильно. Однако как только я пометил srcпапку как Resource Root, все заработало, как ожидалось. Было бы неплохо, если бы Webstorm мог обрабатывать псевдонимы, но ничего страшного.
dericcain 08

Вы используете символ для псевдонима так: '@': '../src'). Кроме того, вы используете один файл для конфигурации своего веб-пакета или несколько? Интересно, что отличается. Благодаря!
dericcain 08

3
Один из моих примеров '@': path.resolve(__dirname, '../src/components'). Я использую несколько файлов, webpack.base.conf.jsпотом devи prodверсии. Они, в свою очередь, вызывают папку config с помощью index.js, dev.env.jsи prod.env.js. Я направляю свой веб-шторм, чтобы посмотреть webpack.dev.conf.jsфайл.
webnoob 08

2
Моя установка очень похожа (vue-webpack-pwa), и указание на нее помогло .dev.conf. Указание на .base.confне работало. Хороший звонок!
dericcain 08

Я думаю, что это может потребовать открытия вопроса. Я могу подтвердить, что это работает, но часто я открываю его, и все псевдонимы веб-пакетов остаются неразрешенными. Я делаю «Недействительный кеш и перезапуск», и он работает, как рекламируется
willredington315 06

7

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

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

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


1
Это лучший ответ. Относительные пути раздражают, но удобство псевдонимов путей не стоит того, чтобы терять полезную функциональность IDE.
thewoolleyman

3

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

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

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


2

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

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

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

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

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

1
Как заставить Webstorm @someAliasправильно распознавать ?
Дэйв Йохансен

Где файл вы определили псевдоним? В каком файле?
Даниэль

2

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

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

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


1

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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.