Add settings to allow initial indentation for script and style

[jez9999]

Volar uses the VS Code settings for indentation of code, but it doesn't put an initial indent in for the script or style tags in vue files. Could you add in a couple of settings that allows us to have that indent? I know the Vue default style may not have it, but to my eyes it looks horrible having opening and close tags with no indent. I'd like to have the indent option for auto-formatting.

[cabal95]

We are running into this as well. To my personal aesthetics I also prefer the script tag to be indented - though I could live with it. The problem for us is we use a mixed environment of C# and TS/Vue code. Some of those C# bits are WebForms and other languages/frameworks that aren't supported in VS Code (more specifically, easily running them is not supported).

As a result, we have a mix of users on VS2022 and VS Code. The issue is that VS2022 indents the script tag in the .vue files since it just sees it as an XML/HTML file and that is the standard formatting it does. I looked and could not find a setting to change this. So when people auto format the document on VS 2022, it adds the 4 character indentation inside the script tag. But then when people auto-format in VS Code, it removes the 4 character indentation.

So it would be nice to be able to configure Volar to add/keep the indentation so it matches - or at least is a very close match.

[jez9999]

I notice that Vetur had two options, vetur.format.scriptInitialIndent and vetur.format.styleInitialIndent, so this is actually a regression from Vetur. 😢

[jez9999]

Was trying to implement this myself, but I couldn't even figure out how to debug the VS Code Volar Vue formatting engine! From what I can tell from the system overview diagram, though, this feature would probably need to be implemented invscode-vue-language-features or Language Clients, intercept the reformatted code it got back from vscode-css-languageservice and @volar/typescript-language-service - services that presumably have no way of saying "just add one extra level of intendation to everything" - and manually add a level of indentation to the start of each line before returning it.

[johnsoncodehk]

@jez9999 You can add a new VSCode setting and fetch and use it at here. https://github.com/johnsoncodehk/volar/blob/2758510a8e519563f16ce023c700ab98b8b65ad8/packages/vue-language-service/src/plugins/typescript.ts#L246-L252

[jez9999]

@johnsoncodehk Right but how do you debug the formatting code? When I open the Volar project and hit F5, it opens a new VS Code window, but inside that window there is no Volar code formatter configured for .vue files.

[johnsoncodehk]

@jez9999 You need to open an other workspace such as github.com/johnsoncodehk/volar-starter to the new VSCode window, or just open new untitled vue document on the window for testing.

[jez9999]

@johnsoncodehk That appears to work but I now have a new problem; it doesn't appear to be changing indentation at all for script contents when I format a document. I could've sworn it was doing so yesterday! I'm not sure what's changed. See the GIF screencap.

[jez9999]

Also, no breakpoints are binding in typescript.ts. Is there a build step I need to go through first for debugging?

[jez9999]

PR submitted.

[jez9999]

@johnsoncodehk Thanks for merging! However, I think your refactor means that "Format Selection" will reformat an entire section of a .vue file if any of that section is selected, rather than just formatting the code within the selected range. What I tried to do was only format the code in the selected range. This is admittedly pretty difficult for style and JSON, but at least with Typescript/Javascript you might want to go back to the method I used of passing the indent through to onRange in packages/vue-language-service/src/plugins/typescript.ts, which then sets tsOptions.baseIndentSize - this is actually built into the TS formatter, so can reliably change base indent just for the selected range without reformatting the entire script section.

[jez9999]

It's also causing the entire <template> section to get reformatted rather than just the selected section. Presumably this can be fixed just be returning the <template> formatting to the previous behaviour when "html": true is set.

[jez9999]

Another idea that might work in a more general sense is to have an algorithm like:

• Send document and range to parser
• If edits array is empty and baseIndent is true, calculate start of beginning line in selection and apply base indent to that and all other lines in selection (parser thinks code is OK, meaning it doesn't have the base indent)
• If edits exist, for each edit:
  • Replace \n in edit with \n${baseIndentCharacters}
  • If range begins at the start of a line, prefix baseIndentCharacters
  • Apply edit

[michaeldaw]

The new setting "volar.format.initialIndent" seems to be ignored. The default is for only HTML to have the initial indent, but in my experience, the initial indent is applied everywhere (in script setup files, at least), whether they are set to 'false' or not.

Additionally, this new feature seems to add the initial indent not just at the beginning of the script tag, but after new lines in the interior of the script tag code. I'm afraid it's become somewhat frustrating for me and I've had to revert back to 0.40.1 to restore the original functionality.

I've tried explicitly setting each language to false in the setting, but it still adds the initial indent in each section of the script setup file.

This behavior starts in 0.40.2.

Given that it changes the original functionality, I don't think this feature should be implemented without the ability to turn it off.

[jez9999]

Odd, I'm running 0.40.13 and this config gets rid of all the indentation:

"volar.format.initialIndent": {
        "html": false,
        "typescript": false,
        "javascript": false,
        "typescriptreact": false,
        "javascriptreact": false,
        "css": false,
        "scss": false,
        "json": false,
        "jsonc": false,
    }

[jez9999]

I think if you select all and format selection it will remove the indentation. The specific bug seems to be the indentation given when you hit Enter, which does seem to give indentation if these are set to false. Perhaps worth opening an issue on that specific behaviour?

[michaeldaw]

Yes, formatting the document after the fact removes the indentation, but having to type "enter + backspace" every time the user would have normally just had to type "enter" harms productivity.

This feature isn't complete as long as this bug exists, so I thought it would be better to detail the problem here rather than create a new issue. But I'll open a new issue if that's appropriate.