Indentation of component with the same name as an HTML element is incorrect #5279
Labels
good reproduction ✨
This issue provides a good reproduction, we will be able to investigate it first
🍰 p2-nice-to-have
Comments
KazariEX
added
good reproduction ✨
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Vue - Official extension or vue-tsc version
2.2.8
VSCode version
1.98.2
Vue version
3.5.x
TypeScript version
System Info
package.json dependencies
{ "private": true, "type": "module", "scripts": { "build": "vite build", "build:ssr": "vite build && vite build --ssr", "dev": "vite", "format": "prettier --write resources/", "format:check": "prettier --check resources/", "lint": "eslint . --fix" }, "devDependencies": { "@eslint/js": "^9.19.0", "@types/node": "^22.13.5", "@vue/eslint-config-typescript": "^14.3.0", "eslint": "^9.17.0", "eslint-config-prettier": "^10.0.1", "eslint-plugin-vue": "^9.32.0", "prettier": "^3.4.2", "prettier-plugin-organize-imports": "^4.1.0", "prettier-plugin-tailwindcss": "^0.6.11", "typescript-eslint": "^8.23.0", "vite-plugin-vue-devtools": "^7.7.2", "vue-tsc": "^2.2.4" }, "dependencies": { "@formkit/auto-animate": "^0.8.2", "@headlessui/vue": "^1.7.23", "@inertiajs/vue3": "^2.0.0-beta.3", "@tailwindcss/vite": "^4.0.14", "@vitejs/plugin-vue": "^5.2.1", "@vueuse/core": "^12.0.0", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "concurrently": "^9.0.1", "laravel-vite-plugin": "^1.0", "lucide": "^0.468.0", "lucide-vue-next": "^0.468.0", "radix-vue": "^1.9.11", "reka-ui": "^2.0.2", "tailwind-merge": "^2.6.0", "tailwindcss": "^4.0.14", "tailwindcss-animate": "^1.0.7", "typescript": "^5.2.2", "vite": "^6.2.0", "vue": "^3.5.13", "ziggy-js": "^2.4.2" }, "optionalDependencies": { "@rollup/rollup-linux-x64-gnu": "4.9.5", "@tailwindcss/oxide-linux-x64-gnu": "^4.0.1", "lightningcss-linux-x64-gnu": "^1.29.1" } }Steps to reproduce
What is expected?
When using a custom component (or any component with a closing tag?), the LSP formatter should always indent the children of that component.
What is actually happening?
I'm using InertiaJS to build my app. One of the components that ships with the library is
<Link></Link>to facilitate single page routing. However, because that component has the same name as a native HTML element, I think it is getting caught by the formatter to not be indented, which makes sense because a native<link />tag in the document<head>is self closing.This is reproducible in the SFC playground.
https://play.vuejs.org/#eNp9UsFOwzAM/RWTS0GCVghO0E0CNAkQAgSTuOQyWq/LliZRko5JVf8dJ13HQGg32++5fq8vLbsxJl03yK5Y7gorjAeHvjEgZ6oaceYdZ2OuRG209dCCxTl0MLe6hoTWkh30JNRqO0+z0ISvJtdccVVo5TzUroJR2D9O7lFKDR/ayvIoOeEqz/rTdIgaj7WRM4/UAeSL83HbxuWuyzPq4lQo03hYn9W6REkyCecMsh4M1/uqFOvxdCEcuIVuZAmfCEKVqDyWaZ4FNNKiXirzbO82OyXzJH0uqnTptKI/1AY2Z4WujZBoX4wXZI2zK4hIwGbk7Osxzrxt8HSYFwssVv/Ml24TZpy9WnRo18jZDvMzW6Hv4cn7M26o3oHkvJHEPgC+odOyCRp72m2jSpK9x4tqH2KAQlVTN9l4VG4wFYQGZhf5nFGgdwes/8i9SC/jHlcd/cXhMfx9YuNDsQ/ZUOmk9kO028x+B9V9AwAz6wo=
Is this even fixable? I would "simply" rename the component, but since it comes from a library, I'm essentially making a wrapper/abstraction just to appease the formatter! 😓
Would it be possible to tell the formatter to always indent children if that tag has a closing tag?
Thanks!
Link to minimal reproduction
https://play.vuejs.org/#eNp9UsFOwzAM/RWTS0GCVghO0E0CNAkQAgSTuOQyWq/LliZRko5JVf8dJ13HQGg32++5fq8vLbsxJl03yK5Y7gorjAeHvjEgZ6oaceYdZ2OuRG209dCCxTl0MLe6hoTWkh30JNRqO0+z0ISvJtdccVVo5TzUroJR2D9O7lFKDR/ayvIoOeEqz/rTdIgaj7WRM4/UAeSL83HbxuWuyzPq4lQo03hYn9W6REkyCecMsh4M1/uqFOvxdCEcuIVuZAmfCEKVqDyWaZ4FNNKiXirzbO82OyXzJH0uqnTptKI/1AY2Z4WujZBoX4wXZI2zK4hIwGbk7Osxzrxt8HSYFwssVv/Ml24TZpy9WnRo18jZDvMzW6Hv4cn7M26o3oHkvJHEPgC+odOyCRp72m2jSpK9x4tqH2KAQlVTN9l4VG4wFYQGZhf5nFGgdwes/8i9SC/jHlcd/cXhMfx9YuNDsQ/ZUOmk9kO028x+B9V9AwAz6wo=
Any additional comments?
No response
The text was updated successfully, but these errors were encountered: