Vue.js - Configuring WebStorm to set @ in path files to the src folder

Question

In Vue.js you have the possibility to use the @ in a path file as a shortcut to your src folder. It is nice because all your files have an absolute path.

However I don't manage to find a way to configure WebStorm to understand that and allow me to follow and check if the file exist when using it.

Example :

import Business from '@/components/Business/Business'

Writing that I want WebStorm to tell me if the file does not exists and to allow me to go to that file directly.

I did not manage to find any answer about it and neither managed to find a way to do it in the IDE.

Check this thread: intellij-support.jetbrains.com/hc/en-us/community/posts/… — LazyOne
– LazyOne, Commented Jul 30, 2018 at 8:16
What worked for me (don't use vue-cli) : 1) Set the config webpack file in the IDE in the settings & 2) For .vue files I can import components without .vue extension in the path, but for js files I still need to add .vue to make him understand it. But that's fine ;) — Clement Levesque
– Clement Levesque, Commented Jul 31, 2018 at 5:38

lena · Accepted Answer · 2020-03-19 11:11:47Z

51

For vue-cli3, you need to specify a full path to node_modules/@vue/cli-service/webpack.config.js as a webpack configuration file in Settings | Languages & Frameworks | JavaScript | Webpack.

Note that this only works for JavaScript; webpack aliases are not resolved when using components written in TypeScript, path mappings in tsconfig.json should be used instead

edited Mar 19, 2020 at 11:11

answered Jul 30, 2018 at 11:36

lena

94.4k11 gold badges155 silver badges160 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Clement Levesque Over a year ago

Actually I did not use vue-cli but I needed to define my webpack configuration file anyway to make intelliJ understand what my @ means while coding as it worked when bundling! Thanks a lot !

iSkore Over a year ago

Another reference for this answer: youtrack.jetbrains.com/issue/…

lena Over a year ago

WEB-32564 was fixed in 2018.2.3

vir us Over a year ago

this relative path doesn't seem to work for me - it only works if I put the full absolute path: /Users/..etc../MyProject/node_modules/@vue/cli-service/webpack.config.js. Any idea on how to import it using the project relative path?

SrAxi Over a year ago

My Vue project is in a subfolder called client, so in order to make it work I had to use the following: $PROJECT_DIR$/client/node_modules/@vue/cli-service/webpack.config.js in Settings | Languages & Frameworks | JavaScript | Webpack. Worked like a charm. Thanks @lena!!

|

user2375613 · Accepted Answer · 2021-03-31 07:05:13Z

7

In phpstorm 2020.3.3, I could fix this by

Opening Settings > Languages & Frameworks > JavaScript > Webpack and choose "Automatically"
Once saved, this opens a popup asking to run webpack configuration. Click "Trust project and run"
Fixed!

answered Mar 31, 2021 at 7:05

user2375613

931 silver badge6 bronze badges

Comments

ittus · Accepted Answer · 2018-07-30 06:35:02Z

4

Webstorm already supports resolving alias. Webstorm read your webpack.config.js in background.

If you're using vue-cli 3, we don't have webpack.config.js, but you can create webpack.config.js file manually

module.exports = {
  resolve: {
    alias: {
      "@": require("path").resolve(__dirname, "src") // change this to your folder path
    }
  }
};

webstorm will resolve it automatically

answered Jul 30, 2018 at 6:35

ittus

22.5k5 gold badges62 silver badges59 bronze badges

1 Comment

Clement Levesque Over a year ago

Thanks for your answer but actually webpack manage to find my files, I already have such a configuration for it. My problem is just when coding in webstorm it does manage to find it and highlight an error and of course does not allow to do a ctrl + click to reach the file and open it directly :(

SeekerGAO · Accepted Answer · 2019-11-17 08:58:19Z

4

vue-cli3 you can select node_modules/@vue/cli-service/webpack.config.js as webstorm configuration file Settings > Languages & Frameworks > JavaScript > Webpack. or create webpack.config.js in the root directory, content is

const resolve = dir => require('path').join(__dirname, dir);

module.exports = {
    resolve: {
        alias: {
            '@': resolve('src')
        }
    }
};

And then as webstorm configuration file.

answered Nov 17, 2019 at 8:58

SeekerGAO

411 bronze badge

Collectives™ on Stack Overflow

Vue.js - Configuring WebStorm to set @ in path files to the src folder

4 Answers 4

6 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related