CODEWITHSUNDEEP
reactjsvisual-studio-codevite
hky035
hky035

Reputation: 1

VSCode Autocomplete Issue - Problem with Path Aliases

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

  1. When writing the import statement directly, I can not see any path suggestions.

image 1

  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

  1. 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

  1. vite.config.js configuration
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      { find: "@", replacement: "/src"}
    ]
  }
})
  1. jsconfig.json configuration
{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    }
}
  1. Vscode preference setting change - Import Module Specifier(non-relative)

vscode setting image

Upvotes: 0

Views: 157

Answers (0)

Related Questions