Feat request: absolute path for auto import

[nereuseng]

• I have searched through existing issues
• I have read through docs
• I have read FAQ

Info

• Platform: Window 10 1809
• Vetur version: 0.18.0
• VS Code version: 1.32.3

Problem

Currently the auto import is imported in relative path, is that any possible to add support auto import in absolute path or with alias?
Example:

1. absolute path:

import { getStoreUserData } from './store/getter.types.js'

2. with alias

import { getStoreUserData } from '@/store/getter.types.js'

Besides, I find that another extension auto import was working in previous version, but It was broken after new version installed. Is that any possible to disable?

Thank you so much for contributing such a great work, I hope It will getting better!

[octref]

If you add path mapping, does it work? https://github.com/vuejs/vetur/blob/master/docs/FAQ.md#vetur-cant-recognize-components-imported-using-webpacks-alias

[nereuseng]

Nope. Alias work on importing .vue file, but not working on auto import.

[praveenpuglia]

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["webpack-env", "jest"],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": ["node_modules"]
}

Extension Version

Name: Vetur
Id: octref.vetur
Description: Vue tooling for VS Code
Version: 0.22.3
Publisher: Pine Wu
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=octref.vetur

What's Happening

With the above tsconfig.json here's what I get.

• Aliases work when the import path is typed manually. So I write @/ and then hit Ctrl + Space and I get the autocompletion as expected.

• If somewher in the code, say a method, I try to access anything that's exported in some other file and TS knows about it, it allows me to automatically import it. BUT, when it does that, it doesn't use absolute path starting from say @/.

• In a TS file however, if I try to import anything that's exported in a file that doesn't exist in the same directory, VSCode does full path completion. Here's a screenshot.

• In a TS file itself however, if I import something that exists in file that resides in same directory, VSCode uses relative path like...

import something from './something.js';

What do I expect?

I would love the autocompletion inside the .vue file for a TS/JS project to always use absolute path, with the root alias.

Why?

With relative paths, it becomes a pain to figure out at what level a thing is and then moving those file while refactoring becomes an even bigger pain because VSCode's automatic file path updates don't work for .vue files.

With an absolute path, it's absolutely easy to move around things.

[IWANABETHATGUY]

maybe you should try this vscode-extension https://marketplace.visualstudio.com/items?itemName=IWANABETHATGUY.path-alias

[octref]

Fixed by #1753.