Unable to auto-format imports in Vue SFCs

[brandonleichty]

Description

I'm running into issues getting the imports automatically sort in Vue SFCs. As the docs suggestion, I've installed @volar/vue-typescript (and have also tried @vue/typescript)—but that didn't resolve the issue.

I've attempted to get the auto-sorting working in both an existing project, and a completely fresh Vue project (see steps to reproduce below).

Maybe I'm missing an obvious config option?

Note 📝: I am able to auto-sort the imports when using this native VSCode option:

 "editor.codeActionsOnSave": {
    "source.organizeImports": true
  },

Steps to reproduce

1. Create a brand new Vue project with npm init vue@latest
2. Make these selections:

Vue.js - The Progressive JavaScript Framework

✔ Project name: … prettier-plugin-organize-imports-vue-example
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

3. Install the dependancies with npm install
4. Run npm install --save-dev prettier-plugin-organize-imports
5. Modify the .prettierrc.json to look like this:

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none",
  "plugins": ["prettier-plugin-organize-imports"]
}

Results

Non-Vue (.ts, .js, etc.) files are correctly having their imports auto-formatted. However, the imports in .vue files aren't auto-formatting.