how to get intellisense for methods of modules which are imported from an alias in .vue

Question

In .vue and .js, I can enjoy the intellisense of vscode when developing. But I found it doesn't work any more when I use an alias. So I have searched for a while on blogs, found a solution, which is to configure a 'jsconfig.json' as below.

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  }
}

it worked in the .js file but didn't work in .vue file. Does anyone know how to resolve it ?

Does work in .js

Not work in .vue

Answer 1

With vue-cli the alias is defined in the webpack-config (since @vue/cli uses webpack under the hood). So instead of jsconfig.json (delete it! just do it!) , I would:

1: Install the webpack resolver for eslint:

npm i eslint-import-resolver-webpack

2: Reference the plugin from your .eslintrc.js

"settings": {
  "import/resolver": "webpack"
},

Done!

This is my complete .eslintrc.js just to be thorough:

module.exports = {
  "settings": {
    "import/resolver": "webpack"
  },
  parserOptions: {
    parser: "babel-eslint"
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/recommended"
  ],
  "env": {
    "browser": true,
    "node": true
  },
  rules: {}
}

If any issues remains I would check the eslint-settings in vscode settings.json:

"eslint.enable": true,
"eslint.provideLintTask": true,
"eslint.workingDirectories": ["src"],
"eslint.validate": ["javascript","javascriptreact","vue"],