Clarify common configuration of nx format:check

[spotlesscoder]

Documentation issue

• [ ] Reporting a typo
• [ ] Reporting a documentation bug
• [X] Documentation improvement
• [X] Documentation feedback

Is there a specific documentation page you are reporting?

Enter the URL or documentation section here. https://nx.dev/nx-api/nx/documents/format-check

Additional context or description

I usually have some config files for third party tools in my nx repos. For example: a cspell.json Unfortunately, VS Code does the formatting on save different from the way prettier does it

It often happens that someone files a PR that reformats some files unnecessarily This creates a lot of noise when this is overlooked or accepted actively in a PR and then the next person comes and does a proper npx nx format before filing the next PR, again reformatting files.

So I wanted to add npx nx run-many --target=format:check to the CI pipeline to fail the build on a PR when the format was not done properly before filing the PR

Unfortunately, the build is still green because format:check seems to ignore files like <repo_root>/cspell.json Looking into the docs, I didn't find out how to configure format:check so that it checks all files in the repo (except those in .prettierignore)

Provide any additional details here as needed.

[isaacplmann]

Is cspell.json listed in .nxignore or .gitignore?

[isaacplmann]

Also, does it make a difference if you run nx format:check --all?

[spotlesscoder]

It is not listed in .gitignore and there is no .nxignore in the repo. Indeed, the file appears when I run nx format:check --all but so do theapps/<projectname>/.next/** files Adding apps/<projectname>/.next to .nxignore also did not help (I gues the purpose of --all is to turn of the .nxignore?)

[spotlesscoder]

By the way - is there a recommended way to make the JSON formatting done by npx nx format to match the formatting vs code does with the prettier plugin?

VS Code formats it something like this (with array elements in newlines even for short array lines)

{
  // ... other props
    "dictionaries": [
    "en_us",
    "en-gb",
    "de-de"
  ],
  "ignorePaths": [
    "dist/**",
    "node_modules",
    "target"
  ],
  // ... other props
}

while with npx nx format it looks like this

{
  // ... other props
  "dictionaries": ["en_us", "en-gb", "de-de"],
  "ignorePaths": ["dist/**", "node_modules", "target"],
  // ... other props
}

While I want the CI pipeline to raise an error, I don't want colleagues to be frustrated when they forgot to run npx nx format before pushing after editing the cspell.json Currently, every PR seems to change the formatting from one variant to the other back and forth

I'm fine with the way vs code does it but I want to match npx nx format to match this formatting

[isaacplmann]

I wouldn't expect nx run-many --target=format:check to do anything, unless you've manually defined format:check tasks on each of your projects.

The nx format:check command runs prettier --list-different <pattern> under the hood. <pattern> includes every project root, nx.json and root tsconfig files If you pass --all then <pattern> is just .

All of this should respect the .prettierignore file.

I recommend a single global format:check where you run nx format:check --all and add all folders that should not be formatted to the root level .prettierignore.

[isaacplmann]

I don't think prettier has an option to change how it formats arrays. See their options philosophy: https://prettier.io/docs/en/option-philosophy

You'll have better luck creating a .vscode/settings.json and making VS Code use prettier to format things.

I think this might do it:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

[spotlesscoder]

Yeah, I just saw that my vs code uses

"[json]": {
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },

That's probably the guilty part here. Probably the colleagues have the same setting

Also, to avoid deletion of newlines at the end of files and all sorts of whitespace-related problems, which creates a lot of noise in the diffs, I recommend adding to the .vscode/settings.json

  "files.trimFinalNewlines": true,
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,

[spotlesscoder]

However, after adding the .vscode/settings.json to the workspace, nothing changed in the behavior

vs code underlines the esbenp.prettier-vscode in the defaultFormatter settings with a yellow line - saying that this is not a supported value The plugin dbaeumer.vscode-eslint is accepted as valid setting

[spotlesscoder]

Double time stupid me - the esbenp.prettier-vscode plugin in vs code was installed but not activated, that was why it was neither working nor accepted as valid config value

[spotlesscoder]

I'm going crazy .. now with the same settings, the behavior changed again to the old one. Seems like the .vscode/settings.json does not completely take precedence over user settings in this case:

workspace .vscode/settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // eleminate problems like unnecessary deletions of newlines at EOF in pull requests after saving file in vs code
  "files.trimFinalNewlines": true,
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  // explicitly override formatters in case some user settings dictate non-standard formatters
  // if this does not work, double check whether the formatter is not only installed but also enabled
  "[javascript][json][jsonc][typescript][typescriptreact][yaml]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

The old setting in my user's settings.json was still active:

"[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },

only if I moved the jsonc to it's own block in the workspace .vscode/settings.json it overwrites my user setting:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // eleminate problems like unnecessary deletions of newlines at EOF in pull requests after saving file in vs code
  "files.trimFinalNewlines": true,
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  // explicitly override formatters in case some user settings dictate non-standard formatters
  // if this does not work, double check whether the formatter is not only installed but also enabled
  "[javascript][json][typescript][typescriptreact][yaml]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}