Description
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
- Create a component with the same name as a native HTML element that does not cause indentation for the next element (see example). Example: `This is a custom Link component
- Trigger the Vue SFC LSP formatter.
- Assert the next line is not indented
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.
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
Any additional comments?
No response