My DX battle between, eslint, volar and prettier.

Eslint and Prettier are widely known linter and formatter respectively. On start of vue3, volar has been recommended to be the de-facto tool to be installed when developing using vue, especially vue 3. Now, eslint and prettier is actually not included when installing volar especially when installing from the vscode extensions marketplace. If you are using vscode, you have to install eslint and prettier separately as an extension, but the real reason is that volar is actually an LSP. LSP being language server protocol, is the API you talk to in order to get correct contexts in your current codebase.

That function that you have? TreeSitter can know that it's a function, but not know if it actually exists on your codebase.

That dropdown that you see when you try to import another vue file into your current open file? Yes, that is the LSPs work, not eslint, not prettier, and yes additional code-completion or auto-completion is needed to make it work, but still it has to communicate with your LSP.

The thing is that volar ships with it's own formatter, and if you're careful not to use eslint as your formatter like the eslint devs themselves is saying, then there's not much of a problem with that. The issue for me personally is that volar have a very long html lines because it does not respect the lineWidth settings. It follows the 'vscode-html-languageservice' that it has shipped with.

This is actually not a problem but a personal preference, this preference is especially stronger when you are using tailwindcss which almost always forces you to go above the 80 or 100 character line limit. So just add prettier and make it the formatter right? Well not so easy, as it can have issues when not done correctly, you have to disable volar ONLY for formatting, you still need the deep parse linting and auto completion of imports or some snippets specific to vue files that volar have. Disabling if you are using nvim, is not that hard especially when you're using mason, as you can just disable formatting for a specific LSP and it had worked on my end quite well.

Well it doesn't end there, the next issue I had is that I had to restart the LSP everytime I create a new vue file. LSP, volar in particular stops working unless I restart it. The quick fix is just write a keybinding to Restart LSP which does save some time, but still not the root issue, just a fix. Running shows me an error

The language server html triggers a registerCapability handler despite dynamicRegistration set to false. Report upstream, this warning is harmless

It might be harmless perhaps, but it's a step towards a solution, we got the possible problem. After scouring the internet for a while, came across about the same problem, but this time it's from a Svelte LSP, but it's the same issue. It is an LSP issue and the porting has some issues or some setting that we need to change, the question is, which one. Another issue deeper, then we have the actual setting that we need to enable directly from the LSP in order to fix it, although the error says dynamicRegistration was set to false, it's not actually the main issue. The other issue is that setting the workspaceFolders to true, is the one trigger, it is the reason that will change the dynamicRegistration settings. There are some that I've seen where this has worked, without ( based on what I've seen ) updating the workspaceFolders.

This is just a quick dirty story that I be writing here, I know it's kind of all over the place, but these are the foundations to solve an issue which I find to be incredibly annoying, and lets me enjoy the world of programming. Problems branch out, and branches have roots, and finding that root is all exhausting, frustrating at times, and so much fun, all at the same time.