After exclusively using PHPStorm/Webstorm for years, I recently made the switch back to Visual Studio Code. The main reason behind this decision was the lightweight nature of VSCode and its widespread availability as a free tool, unlike paid services.
I started anew with Vite + Vue3 setup.
However, I encountered various issues related to imports, CTRL+Click navigation, and autocompletes.
In my Vite.config file, I included settings to enable aliases:
import { defineConfig } from "vite";
import { fileURLToPath, URL } from "url";
import vue from "@vitejs/plugin-vue";
import path from "path";
export default defineConfig({
resolve: {
extensions: [".js", ".json", ".vue", ".scss", ".css"],
fallback: {
crypto: path.resolve("crypto-browserify"),
stream: path.resolve("stream-browserify"),
},
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
img: path.resolve(__dirname, "./public/img"),
},
},
plugins: [vue()],
test: {},
server: {
port: 8080,
},
build: {
sourcemap: false,
minify: false,
assetsDir: "chunks",
},
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "sass:math"; @import "./src/assets/scss/v2/legacy.scss"; @import "./src/assets/scss/common.scss";`,
},
},
},
});
With this configuration in place, I could import using the "@" alias, but lacked intellisense functionality. Imports and CTRL+click features were not working as expected.
Subsequently, by adding a jsconfig.json file:
{
"compilerOptions": {
"target": "ESNext",
"baseUrl": ".",
"paths": {
"@/": ["src/*"]
}
}
}
I regained the ability to import components using "@" and benefitted from full intellisense and CTRL+click capabilities. However, I faced a setback as I lost intellisense support for node_modules.
So, while the vite/jsconfig setup provided intellisense for "@" alias, it compromised the import capabilities of node_modules.
Removing the vite.config alias configuration and jsconfig file restored intellisense for node_modules, albeit at the cost of project-specific intellisense.
I am seeking guidance on resolving this dilemma. Any assistance would be greatly appreciated.
To gain a better understanding, I have eliminated all npm import extensions from my setup.