Sorting Auto Import Suggestions on VSCode

Are you’re frustrated because VSCode recommends you the wrong import when they have the same name?

Yeah me too, but I found a solution 👀. Turns out there’s a plugin for that! You can actually sort and re-order import suggestions.

Let me guide you through the installation process

Step-by-step Guide

The plugin is called ts-plugin-sort-import-suggestions.

Install it as a dev dependency

pnpm add --save-dev ts-plugin-sort-import-suggestions

Make sure you have typescript in your package.json. If you don’t have them you can install them
```
pnpm add --save-dev typescript
```

Add this to your tsconfig

You can customize the imports that you want to move up and down

tsconfig.json

"compilerOptions": {
  "plugins": [
    {
      "name": "ts-plugin-sort-import-suggestions",
      "moveUpPatterns": ["@/", "\\.{1,2}/"],
      "moveDownPatterns": ["@radix-ui", "lucide-react"]
    }
  ]
}

Add workspace typescript setting

This plugin is installed on the workspace typescript, so we need to make sure we are using the workspace version.

Command Palette (Cmd + Shift + P) > TypeScript: Select TypeScript Version... > Use Workspace Version

If you can’t find the option, make sure you’re opening a typescript file (can be any file)
Reload the VSCode

Sometimes it doesn’t work automatically, reloading VSCode usually works

Result

Now it's sorted nicely!