I am experiencing an issue with the autocomplete feature in VSCode. I am developing a React app and not using TypeScript. After setting up path aliases, the auto-import functionality is not working correctly, and I’m looking for help.
📌 Environment
- VSCode version : 1.92.1
- OS version : Windows 10
I am using React + Vite + JavaScript.
Problem Situation
-
When writing the import statement directly, I can not see any path suggestions.
image 1 -
When importing specific components, multiple paths are suggested. Additionally, some of the paths using the alias ‘@’ appear at the bottom.
image 2-1
image 2-2 -
When I select a recommended file path from the list, I import the file using destructuring. However, I have written the statement
export default Input
.
image 3
steps I have set up
vite.config.js
configuration
export default defineConfig({
plugins: [react()],
resolve: {
alias: [
{ find: "@", replacement: "/src"}
]
}
})
jsconfig.json
configuration
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
]
}
}
}
- Vscode preference setting change – Import Module Specifier(non-relative)
vscode setting image
hky035 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.