VSCode Vue3 Vite Javascript Import Alias Hell - Can't get this to work as expected
Asked Answered
R

0

7

I just can't get a break. With my current setup I can import files using my @ alias BUT I can't click+cmd to "Go to definition" on anything that is .vue unless I don't use the "@" alias - without the alias it works for .vue files ALSO I suddenly lost all intellisense/imports/recognition on node_modules package (even if I remove the include/exclude from the JSConfig.

If I comment/delete my JSConfig my nodemodules intellisense returns but I can't click+cmd to "Go to definition" on both .js and .vue files

So no matter what I do I can't get this to work

My expected result is

  • auto complete using @ alias
  • click+cmd to go to file on both .js and .vue files
  • auto complete from node_modules working as intended and recognized

I've spent too many hours on this. I'm totally lost

below are my specifications

jsconfig.json

{
    "compilerOptions": {
        "target": "ES6",
        "paths": {
            "@/*": ["src/*"]
        }
    },
    "exclude": ["dist", "node_modules"],
    "include": ["src/**/*", "src/**/*.js", "src/**/*.vue"]
}

vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
// https://vitejs.dev/config/
/// <reference types="vitest" />
export default defineConfig({
    resolve: {
        extensions: [".js", ".json", ".vue", ".scss", ".css"],
        fallback: {
            crypto: path.resolve("crypto-browserify"),
            stream: path.resolve("stream-browserify"),
        },
        alias: {
            "@": path.resolve(__dirname, "./src"),
        },
    },
    plugins: [vue()],
    test: {},
    server: {
        port: 8080,
    },
    build: {
        sourcemap: false,
        assetsDir: "chunks",
    },
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `@use  "sass:math"; @import "./src/assets/scss/v2/legacy.scss"; @import "./src/assets/scss/common.scss";`,
            },
        },
    },
});

VS Code settings that has todo with imports using Volar and Path Intellisense extension and AutoImports extension (both)


  //* Intellisense
  "volar.autoCompleteRefs": true,
  "volar.codeLens.scriptSetupTools": true,
  "volar.codeLens.pugTools": true,
  "path-intellisense.autoTriggerNextSuggestion": true,
  "path-intellisense.extensionOnImport": true,
  "path-intellisense.autoSlashAfterDirectory": true,
  "path-intellisense.mappings": {
    "@": "${workspaceFolder}/src"
  },
  "autoimport.doubleQuotes": true,
  "autoimport.filesToScan": "**/*.{ts,tsx,js,vue,scss,css}",
  "autoimport.showNotifications": true
Rodas answered 21/11, 2022 at 17:22 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.