Formatter workflow?

I’m trying to use VSCode to edit Theia’s source code, and I’m running into the following issue:

Whenever I make a change to a file and save, the entire formatting of the file is changed, e.g. to a different indentation style.

To avoid this, I unchecked “Editor: format on save” in VSCode’s workspace settings. However, the file that stores those settings (.vscode/settings.json) is under version control, so I have to deal with a working copy change that I don’t want to commit.

What is the proper way to set up formatting for Theia?

[original thread by Nathan Ridge]

make a PR which fixes formatting according to out settings, we will review and merge it

[Nathan Ridge]

I don’t mean that there’s a particular file that doesn’t seem to follow the project’s formatting conventions. I mean that, no matter which file I edit, VSCode’s “format on save” feature will completely reformat the file into a different style, e.g. 2-space indentation instead of 4-space.

Clearly, “format on save” is applying a different set of formatting settings than what the project uses, leading me to believe that I haven’t configured something properly.

It could be that the VS Code config is out of sync. Many devs use other editors such as Theia resp. Gitpod. You could create a PR with an updated config.

[Nathan Ridge]

How would I prepare such a PR?

I meant adjusting the vscode settings file, so that it doesn’t reformat the code. and proposing those settings in a pull request.

[Nathan Ridge]

Ah, ok. I can certainly do that.

I figured a preferable solution would be to get the VSCode formatter to actually reformat the code to the prevailing style, but perhaps the tooling story is not there for that to work yet.

Looking at the Theia repo, the settings seem to be in-sync, and for both “editor.tabsize” is set to 4. Strange that vscode does not respect it.

@nridge can you confirm that you do not have user-level vscode preferences that might override those in the Theia repo? On linux this would be in ~/.vscode/settings.json

btw we can delete .theia/settings.json, Theia can read settings from .vscode fodler

[Nathan Ridge]

@marc-dumais My understanding is that workspace preferences override user preferences, not the other way around. Anyways, I changed the tab size in the User Settings from 2 to 4, and it had no effect: Theia code was still formatted with 2 spaces.

[Nathan Ridge]

Ok, I figured out the problem: the 2-space formatting was being done by the clang-format plugin. It looks like, despite being primarily a C++ formatting tool, clang-format can also format Javascript (and by extension Typescript), and by default it uses some built-in formatting settings which include 2-space indentation. Disabling the clang-format plugin in the Theia workspace fixes the problem.

[Nathan Ridge]

Perhaps what we should do then, is commit a .clang-format file to the Theia repo that tells clang-format to leave JS/TS files alone?

Hi @nridge surprisingly (at least to me) clang-format takes-over formatting for a lot more than C/C++; including Java and as you mention JS/TS. Should it not, however, respect the VS Code formatting settings for these languages it supports? We explicitly set the indent for TypeScript to 4 in .vsode/settings.json

Another potential solution that does not require adding a new file in the repo: add the following preference to “.vscode/settings.json”: “clang-format.language.typescript.enable”: false

[Nathan Ridge]

@marc-dumais clang-format itself only understands .clang-format files for configuration. The vscode plugin could in principle translate the vscode settings to a .clang-format file before invoking the tool, but it doesn’t currently do that.

[Nathan Ridge]

Disabling clang-format via the plugin’s setting is a good idea, I’ll do that.

[Nathan Ridge]

Posted https://github.com/theia-ide/theia/pull/6137 for this.