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.

[simonhaenisch]

Probably due to the newer versions of the Volar/Vue tooling. See #98.

[linkurzweg]

I got the same problem now. Weirdly enough it seemed to be working for a while. @simonhaenisch do you plan to fix this?

Edit: Managed to get it working for now by explicitly adding @volar/vue-typescript to the devDependencies of my project.

[simonhaenisch]

Regarding the original issue: IIRC there was a breaking change in one of the later minor versions of @volar/vue-typescript, maybe i need to add an upper boundary to the peer dependency range.

Managed to get it working for now by explicitly adding @volar/vue-typescript

This requirement is documented in the readme:

prettier-plugin-organize-imports/readme.md

Lines 73 to 75 in 16df387

	### Vue.js
	Make sure that you have the optional peer dependency `@volar/vue-typescript` installed.

[linkurzweg]

This requirement is documented in the readme

Ah, sorry about that. I probably read that in the readme when I originally installed the plugin, forgot about it and then later removed the volar package because of the renaming 😅