The plugins doesn't work for vue files for me.

[adampolyanskiy]

Discussed in #254

^{Originally posted by adampolyanskiy September 7, 2023}
Good time of the day, everyone. I have troubles running the plugin for .vue files.
Here is the prettier config:
{ "$schema": "https://json.schemastore.org/prettierrc", "semi": true, "tabWidth": 2, "singleQuote": true, "printWidth": 100, "trailingComma": "none", "singleAttributePerLine": true, "bracketSameLine": true, "plugins": ["@trivago/prettier-plugin-sort-imports"], "importOrderParserPlugins": ["typescript"], "importOrder": [ "^vue(.*)$", "^@/app/(.*)$", "^@/pages/(.*)$", "^@/modules/(.*)$", "^@/entities/(.*)$", "^@/shared/(.*)$", "<THIRD_PARTY_MODULES>", "^[./]" ], "importOrderSeparation": true, "importOrderSortSpecifiers": true }

It works totally fine for .ts files, but when I try to run it on a file like this:
src/app/App.vue

`<script setup lang="ts">
import AppHeader from '@/modules/header';
import { theme } from '@/app/providers';
</script>

stub <style scoped></style>`

It doesn't work.
Here is package.json dependencies:

"dependencies": { "@tanstack/vue-query": "^4.34.0", "ant-design-vue": "^4.0.1", "lodash-es": "^4.17.21", "pinia": "^2.1.6", "vue": "^3.3.4", "vue-router": "^4.2.4" }, "devDependencies": { "@rushstack/eslint-patch": "^1.3.2", "@trivago/prettier-plugin-sort-imports": "^4.2.0", "@tsconfig/node18": "^18.2.0", "@types/jsdom": "^21.1.1", "@types/lodash-es": "^4.17.9", "@types/node": "^18.17.5", "@vitejs/plugin-vue": "^4.3.1", "@vue/eslint-config-prettier": "^8.0.0", "@vue/eslint-config-typescript": "^11.0.3", "@vue/test-utils": "^2.4.1", "@vue/tsconfig": "^0.4.0", "eslint": "^8.46.0", "eslint-plugin-vue": "^9.16.1", "husky": "^8.0.3", "jsdom": "^22.1.0", "lint-staged": "^14.0.1", "npm-run-all": "^4.1.5", "prettier": "^3.0.0", "typescript": "~5.1.6", "unplugin-vue-components": "^0.25.2", "vite": "^4.4.9", "vitest": "^0.34.2", "vue-tsc": "^1.8.8" }

What could be an issue?

[gyohza]

To me it works well as long as I'm using Prettier's VS Code extension - but whenever I try

npx prettier -w **/*.vue

It will seldom work on a few files that are not deeply nested - 1 nesting, tops - whilst ignoring most of the project. There's a chance that this is related to file count rather than the nesting itself, but so far I wasn't able to tell.

For the time being, I installed Prettier globally and used find to process one file at a time and it worked, albeit with very poor performance:

find ./src -name *.vue -type f -exec prettier -w {} \;

You can use npx prettier there, but performance is already sucky as it is, it will only get worse via npx. I'm not a great shell programmer, so maybe there's some improvement that could be done. You could also point to the prettier binary inside your project's node_modules if you don't want to install it globally.

[adampolyanskiy]

Okay, the problem was that I had Volar VS Code extension as default formatter for vue files instead of Prettier. =)