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