Как перейти по ссылке в VSC начинающийся с @import '@/.......?

Question

[Матвей Мяги]

Знакомый в программе WebStorm может перейти по ссылке (пример:

@import '@/document/styles/pages/document/elements/page'

; ) нажав ctrl и лкм. в VSC тоже можно нажать, но не находит страницу.
Можно ли решить эту проблему?

Answer 1

[WapSter]

Хорошего способа не знаю, но есть такой костыль. Создай в корне webpack.config.js с содержимым

module.exports = {
    resolve: {
        // for IDE (WebStorm, PyCharm, etc)
        alias: {
            '@': path.resolve(__dirname),
            '~': path.resolve(__dirname),
        },
    },
};

Можешь попробовать более хороший способ jsconfig.json в корне проекта с содержимым

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

не знаю будут ли поддериживаться стили, но ты проверь

Comments

[WbICHA]

Что значит "костыль"? Если алиасы не настроены, то причём здесь иде?

[WapSter]

WbICHA, настраивать при помощи webpack.config когда вебпак вообще может не использоваться, как по мне не очень. В webstorm наблюдал кривое поведения подобного, если в проекте несколько webpack.config. Был какой-то легаси переписал на jsconfig webstorm отлично их схавал, как будет с vscode не знаю

[WbICHA]

WapSter, эм, а зачем объявлять алиасы в конфиге вебпака, если его не используешь? Объявляй в актуальном конфиге (прим: в тсконфиге).

[WapSter]

WbICHA, какой-то безосновательный спор, автор попросил способы я ответил, успокойся

[WbICHA]

WapSter,

успокойся

Эээ... Я же сейчас, вроде, всё предельно спокойно общался.
А спор очень даже основательный, поскольку предлагать добавлять алиасы в конфиг, который не используется, очень так себе идея.

[WapSter]

WbICHA, по этому пометил костылем

Answer 2

[i1yas]

Если у тебя локальные импорты начинаются с @ и резолвятся в src/*, попробуй добавить jsconfig.json в корень проекта с таким содержимым:

{
    "compilerOptions": {
      "target": "es6",
      "module": "commonjs",
      "baseUrl": "./",
      "paths": {
        "@*": ["./src/*"]
      }
    },
    "Include": ["./src/**/*"],
    "exclude": ["node_modules", "build", "dist"]
}