CODEWITHSUNDEEP
vue.jsidewebstorm
Clement Levesque
Clement Levesque

Reputation: 1212

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

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.

Upvotes: 18

Views: 12926

Answers (4)

user2375613
user2375613

Reputation: 93

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!

Upvotes: 7

lena
lena

Reputation: 93748

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

Upvotes: 51

SeekerGAO
SeekerGAO

Reputation: 41

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.

Upvotes: 4

ittus
ittus

Reputation: 22403

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

Upvotes: 4

Related Questions