[Bug] Identify and apply a single JSON formatting

[tschaffter]

Is there an existing issue for this?

• I have searched the existing issues

What product(s) are you seeing the problem on?

Sage Monorepo

Current behavior

It appears that there are two different formatting styles being used for JSON files. This inconsistency unnecessarily increases the amount of code to review in PRs, making the review process more cumbersome.

Observations

Files that have seen their format changing:

• tsconfig.base.json
  • The PR feat(agora): initial migration of packages and services (AG-1532) #2785 is formatting the file using the "compact" format (created by @sagely1 ).
  • The PR feat(agora): migrate Agora to spec-first development workflow #2767 previously formatted this file using the "expanded" format (created by @tschaffter )
  • The format of this file changes between different commits of @tschaffter, indicating that this issue originates at least from a configuration issue.
• project.json

Expected behavior

No response

Anything else?

Cc: @sagely1

Commit ID

No response

Are you developing inside the dev container?

• I am using the dev container

Code of Conduct

• I agree to follow this project's Code of Conduct

[tschaffter]

Formatting when saving file in VS Code

In my environment, opening and saving the file tsconfig.base.json is saved using the expanded format. I tried to manually compact a line but saving the file reverted it back to the expanded format.

This formatting on saving is configured in vscode/settings.json and relies on the VS Code extension Prettier - Code formatter.

For some reason, the extension does not seem to be installed in my dev container:

This extension is disabled in this workspace because it is defined to run in the Remote Extension Host. Please install the extension in 'Dev Container: Sage Dev Container @ tschaffter-devcontainers-20240404' to enable.

Note that there are other extensions specified for the dev container that show this message:

This extension is enabled in the Local Extension Host because it prefers to run there.

Stepping outside of the dev container to be in the EC2 (SSH):

Closing the remote connection to be on my local VS Code client. That's where the Prettier extension is actually installed.

For the bug at hand, I'm going to assume that the Prettier VS Code extension works the same way independently on where it is installed.

The type of file detected by VS Code (this is not a formatter):

Back inside the dev container, the Prettier extension is not recognized as a valid value when the extension is installed outside of the dev container (in this case directly on the VS Code client):

After installing the Prettier extension inside the container, the are two changes: 1) the formatter ID is now valid in vscode/settings.json and a Prettier button is included in the footer of VS Code.

Other observations:

• Installing the Prettier extension inside the dev container does not remove the Prettier extension directly installed in the VS Code client.

[tschaffter]

See microsoft/vscode#189221

Setting json.format.enable as suggested by @aeschli completely blocks JSON formatting, not only the formatting provided by vscode.json-language-features as requested by the OP. This means that Prettier doesn't work either.

[tschaffter]

Whatever I do, it seems that the default VS Code formatter for JSON kicks in, even if I configure settings.json to use the Prettier extension. Unless I set json.format.enable to false, but then I know that Prettier won't work either.

vscode.json-language-features syntax:
https://github.com/Microsoft/vscode/blob/main/extensions/json/syntaxes/JSON.tmLanguage.json

Prettier CLI generates a format ("compact") different from the format created when saving the file in VS Code ("expanded").

...
      "@sagebionetworks/shared/charts": ["libs/shared/typescript/charts/src/index.ts"],
      "@sagebionetworks/shared/charts-angular": [
        "libs/shared/typescript/charts-angular/src/index.ts"
      ],
      "@sagebionetworks/shared/util": ["libs/shared/typescript/util/src/index.ts"],
      "@sagebionetworks/shared/web-components": [
        "libs/shared/typescript/web-components/src/index.ts"
      ]
    }
  },
  "exclude": ["node_modules", "tmp"]
}

I know that the Prettier service (VS Code extension) is reading the correct config file as it prints:

["INFO" - 11:00:09 PM] Using config file at /workspaces/sage-monorepo/.prettierrc

Confirmed that the Prettier CLI reads the config file .prettierrc.

[tschaffter]

I found that specifying multiple languages for the same config as illustrated in microsoft/vscode#138076 prevents Prettier from formatting JSON and JSONC files.

This does not work, i.e. the default VS Code JSON formatter is applied instead of Prettier (yet the syntax is valid according to the issue referenced above):

  "[json][jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },

But this works:

  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },

[tschaffter]

My VS Code version: 1.92.2