CODEWITHSUNDEEP
vue.jsimportvisual-studio-codeintellisense
Mikołaj Waśniewski
Mikołaj Waśniewski

Reputation: 1486

Vue js and VS code - no Intellisense for absolute file path

I have an app created using vue-cli 3 and I am using Visual Studio as my IDE. I have installed Vetur extension. Unfortunately when I am typing something like that

import Message from '@/components/Message'

VS code does not provide any Intellisense for resolving such an absolute file path. Maybe VS code does not understand that @ maps to 'src' folder in projects created using vue-cli. Does anybody know how to solve that problem?

I will be very grateful for any help.

Upvotes: 19

Views: 10272

Answers (3)

Breno Oliveira
Breno Oliveira

Reputation: 147

I could get the eslint to not complain about it by:

  1. install eslint-import-resolver-webpack (dev dependency)

  2. add a webpack.config.js in the root of my project with the content:

    const path = require('path'); // eslint-disable-line import/no-extraneous-dependencies

    module.exports = { resolve: { alias: { '@': path.resolve(__dirname, 'src'), }, extensions: ['.js', '.vue'], }, };

  3. in .eslintrs.js:

    rules: { 'import/extensions': [ 'error', 'always', { js: 'never', vue: 'never', }, ], }, settings: { 'import/resolver': { webpack: { config: 'webpack.config.js', }, }, },

I still would like to have the Intellisense working, but for now I will continue just doing that. Already lost more time than I should in this problem.

Upvotes: 0

Samiullah Khan
Samiullah Khan

Reputation: 894

I have setup jsconfig.json in following manner and it works

{
  "compilerOptions": {
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  }
}

Upvotes: 18

pegiadise
pegiadise

Reputation: 689

You 'd be needing a jsconfig.json file for the Intellisense to kick in with webpack aliases. You can check the linked article.

https://medium.com/@justintulk/solve-module-import-aliasing-for-webpack-jest-and-vscode-74007ce4adc9

Upvotes: 7

Related Questions