Псевдоніми шляху для імпорту в WebStorm

Я використовую псевдоніми шляху webpack для завантаження модуля ES6.

Наприклад, якщо я визначаю псевдонім utilsзамість чогось типу
import Foo from "../../../utils/foo", я можу це зробити
import Foo from "utils/foo"

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

Чи є спосіб доручити WebStorm використовувати такі псевдоніми?

Так, є.

Насправді Webstorm не може автоматично аналізувати та застосовувати конфігурацію Webpack, але ви можете встановити псевдоніми таким же чином.

Вам просто потрібно позначити батьківську папку "utils" (у вашому прикладі) як корінь ресурсу (клацніть правою кнопкою миші, позначте каталог як / root root).

Нам просто вдалося зробити наступну структуру:

/src
    /A
    /B
    /C

У нас папки AB та C оголошені псевдонімами у Webpack. А в Webstorm ми позначили "src" як "Корінь ресурсу".

І тепер ми можемо просто імпортувати:

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

замість

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

при цьому Webstorm правильно аналізує та індексує весь код, посилання на файли, автозаповнення тощо ...

Мені вдалося налаштувати псевдоніми для WebStorm 2017.2 у веб-пакеті так:

Для протоколу: в PHPSTORM , працюючи з сумішшю laravel , мені вдалося це вирішити, створивши файл 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> Веб-пакет

Ви можете визначити власні шляхи, щоб WebStorm / PhpStorm міг зрозуміти ваші псевдоніми. Але переконайтеся, що вони ідентичні вашим псевдонімам. Створіть файл у своєму кореневому каталозі і назвіть його приблизно так: webStorm.config.js(будь-який jsфайл буде нормальним). Потім налаштуйте свої шляхи всередині:

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

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

На це дається відповідь у коментарі, але щоб заощадити людей, копаючись у коментарях та посилаючи лише інформацію, ось це:

З WS2017.2 це буде зроблено автоматично . Інформація тут .

Відповідно до цього, веб-шторм автоматично вирішує псевдоніми, включені webpack.configдо кореня проекту. Якщо у вас є власна структура, і ви webpack.configне в кореневій папці, перейдіть доSettings | Languages & Frameworks | JavaScript | Webpack і встановіть для параметра необхідну конфігурацію.

Примітка: Більшість установок мають baseконфігурацію, яка потім викликає devабо prodверсію. Щоб це працювало належним чином, вам потрібно сказати webstorm використовувати розробницький .

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

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

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

У PHPStorm (на даний момент використовуючи 2017.2) я не зміг отримати налаштування веб-пакета для належної роботи щодо псевдонімів.

Моє виправлення передбачає використання розділу "Каталоги" основних налаштувань. Мені просто потрібно було позначити кожну папку, на яку посилається псевдонім, як корінь джерела, потім клацнути спадне меню властивостей для кожного та вказати псевдонім як "префікс пакета". Це змусило мене все зв’язати.

Не впевнений, чи існує розділ «Каталоги» у WebStorm, але якщо він існує, це, здається, надійний метод для отримання псевдонімів імпорту.

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

Працюватиме на Idea (Websorm):

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

Не буде працювати для Idea (Websorm) (поки залишається дійсним псевдонімом веб-пакета):

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/*"]
    }
  }
}