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

Question

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.

Revive

Answer 1

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

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

Strow

I have added this code in tsconfig.json, but still the imports are not recognized. – Voyeurism

it worked but the path is the relative path – Renovate

If this does not work right away, try refreshing the VS Code by using Reload Windows (i.e. by holding command + shift + P, then search and select Developer: Reload Window – Twelvemonth

This will also work if VS Code go to functions are not working (i.e. right-click on the function name and select Go To Definition OR hold command and click on a function name to go to its definition) – Twelvemonth

If you got an error in VS code on line "src/*" i.e. Non-relative paths are not allowed use "baseUrl": "." inside compilerOptions (e.g. above paths object) as your jsconfig.json or tsconfig.json must be at the root of the project – Twelvemonth

Add baseUrl along with paths "compilerOptions": { "baseUrl": "./", "paths": { "@/*": [ "src/*" ] } } – Renewal

Answer 2

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

Cloyd

Answer 3

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.

Waistline