Improve formatting of `.json` and `.yml` files #1605

devansh016 · 2024-10-18T05:00:17Z

Summary

Relevant technical choices

The following files have been formatted by using npm run format-js
Note: .yml and .json files were not ignored to ensure they are properly formatted as well.

.github/dependabot.yml
.github/workflows/codeql-analysis.yml
.github/workflows/deploy-plugins.yml
.github/workflows/js-lint.yml
.github/workflows/php-lint.yml
.github/workflows/php-test-plugins.yml
.github/workflows/pr-validation.yml
.github/workflows/props-bot.yml
.github/workflows/spell-check.yml
.wp-env.json
composer.json
package-lock.json
package.json
plugins.json
plugins/performance-lab/.wordpress-org/blueprints/blueprint.json
tsconfig.json

github-actions · 2024-10-18T05:04:44Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: devansh016 <[email protected]>
Co-authored-by: westonruter <[email protected]>
Co-authored-by: mukeshpanchal27 <[email protected]>
Co-authored-by: thelovekesh <[email protected]>
Co-authored-by: swissspidy <[email protected]>
Co-authored-by: felixarntz <[email protected]>
Co-authored-by: phanduynam <[email protected]>
Co-authored-by: dilipom13 <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

westonruter · 2024-10-18T05:06:47Z

Let's also do linting of JSON and YML files in the lint-staged config so this doesn't happen again. Also, why isn't the formatting not causing a failure on the GHA checks?

westonruter · 2024-10-18T05:20:00Z

Will Dependabot updates undo the changes to composer.json, package-lock.json, and package.json?

.wp-env.json

devansh016 · 2024-10-18T07:02:22Z

Also, why isn't the formatting not causing a failure on the GHA checks?

npm run lint-js doesn't check for .yml and .json file and hence not causing a failure on the GHA checks.

thelovekesh · 2024-10-18T07:04:04Z

I think we squash and merge this one and include an ignore commit for the merge commit to hide it in git blame. Ref: https://docs.github.com/en/repositories/working-with-files/using-files/viewing-a-file#ignore-commits-in-the-blame-view.

swissspidy · 2024-10-18T07:11:52Z

We should exclude generated lock files from Prettier, just to avoid conflicts

thelovekesh · 2024-10-18T07:28:33Z

We should exclude generated lock files from Prettier, just to avoid conflicts

Yes, we should ignore any auto-generated files. @devansh016 can you please add a https://prettier.io/docs/en/ignore.html with such files?

westonruter · 2024-10-18T14:39:47Z

See also WordPress/gutenberg#30714 in which Gutenberg started applying formatting to JSON files.

.editorconfig

Co-authored-by: Mukesh Panchal <[email protected]>

westonruter · 2024-10-21T19:20:41Z

Will Dependabot updates undo the changes to composer.json, package-lock.json, and package.json?

I think we still need to confirm Dependabot's behavior. We wouldn't want it constantly reverting tabs back to spaces.

devansh016 · 2024-10-22T14:18:55Z

Will Dependabot updates undo the changes to composer.json, package-lock.json, and package.json?

I think we still need to confirm Dependabot's behavior. We wouldn't want it constantly reverting tabs back to spaces.

Dependabot generally respects the indentation style in package.json when updating the lockfile so it should not revert tabs back to spaces. Ref

…mat-files-using-npm-run-format-js

…ansh016/wp-performance into Format-files-using-npm-run-format-js

.prettierrc.js

…mat-files-using-npm-run-format-js

felixarntz · 2025-04-14T17:15:28Z

.editorconfig

-indent_size = 4
-tab_width = 4
-indent_style = tab
 insert_final_newline = true
 trim_trailing_whitespace = true
+indent_style = tab


Why this change? The tab width for actual code (PHP and JS) should be 4, so I don't see why this needs to be removed here.

It doesn't apply to .json and .yml, but then we should have specific rules for these file types.

@felixarntz
When both .editorconfig and .prettierrc are present, Prettier gives precedence to .prettierrc, which ensures PHP and JS files retain their intended 4-space/tab indentation.

I removed the global indent_size = 4 from .editorconfig since it was unintentionally being inherited by .json and .yml files. These files conventionally follow 2-space indentation, so I added specific overrides for them instead.

These updates follow the coding standards defined in the WordPress Core and Gutenberg repositories to stay aligned with WordPress development practices.

Please let me know if you'd like me to make any adjustments or if there's anything I might have missed. Thanks!

Following up on this, I am still not sure about it.

You mention it was removed because it made .json and .yml files use the indent of 4, but that's exactly what is currently happening: All .json and .yml files use the indent of 4. So from that perspective, I don't see why having this here would be problematic.

Looking back at this more carefully, I realize I may have overcomplicated the situation. The global indent_size = 4 shouldn't actually cause issues with .json and .yml files if we have proper Prettier configuration in place, since Prettier takes precedence for formatting.

But still we should keep the .editorconfig aligned with WordPress Core and Gutenberg repositories for consistency.

swissspidy · 2025-04-15T13:31:39Z

Note that there are now some merge conflicts too

codecov · 2025-06-03T07:26:18Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 68.02%. Comparing base (d1663c9) to head (ebeefd3).
Report is 3 commits behind head on trunk.

Additional details and impacted files

@@           Coverage Diff           @@
##            trunk    #1605   +/-   ##
=======================================
  Coverage   68.02%   68.02%           
=======================================
  Files          92       92           
  Lines        7627     7627           
=======================================
  Hits         5188     5188           
  Misses       2439     2439

Flag	Coverage Δ
multisite	`68.02% <ø> (ø)`
single	`36.98% <ø> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

… Format-files-using-npm-run-format-js

westonruter · 2025-06-10T14:39:40Z

.prettierrc.js

Is this any different than the .prettierrc?

No, functionally they're identical in this case. Both .prettierrc.js and .prettierrc contain the same configuration options and produce the same formatting results.
We can remove .prettierrc.js here

Alternatively, it could be added to package.json:

"prettier": "@wordpress/prettier-config",

westonruter · 2025-06-10T14:42:15Z

The following files are now being formatted when running npm run format-js:

.eslintrc.js 19ms
.github/dependabot.yml 11ms
.github/workflows/bump-wordpress-tested-up-to.yml 3ms
.github/workflows/codeql-analysis.yml 2ms
.github/workflows/deploy-plugins.yml 5ms
.github/workflows/e2e-test.yml 1ms
.github/workflows/js-lint.yml 1ms
.github/workflows/php-lint.yml 2ms
.github/workflows/php-test-plugins.yml 4ms
.github/workflows/pr-validation.yml 1ms
.github/workflows/props-bot.yml 2ms
.github/workflows/spell-check.yml 0ms
.prettierrc.js 2ms
.wp-env.json 1ms
.wp-env.override.json 1ms
bin/plugin/cli.js 6ms
bin/plugin/commands/changelog.js 11ms
bin/plugin/commands/readme.js 4ms
bin/plugin/commands/since.js 4ms
bin/plugin/commands/versions.js 2ms
bin/plugin/config.js 0ms
bin/plugin/lib/logger.js 1ms
bin/plugin/lib/milestone.js 2ms
codecov.yml 0ms
composer.json 1ms
lint-staged.config.js 1ms
package.json 0ms
plugins.json 0ms
plugins/auto-sizes/tests/e2e/specs/improve-calculate-sizes.spec.js 2ms
plugins/embed-optimizer/detect.js 1ms
plugins/embed-optimizer/lazy-load.js 1ms
plugins/image-prioritizer/detect.js 2ms
plugins/image-prioritizer/lazy-load-bg-image.js 1ms
plugins/image-prioritizer/lazy-load-video.js 1ms
plugins/image-prioritizer/tests/test-cases/preload-links-with-one-half-stale-group/url-metrics.json 6ms
plugins/optimization-detective/detect.js 11ms
plugins/optimization-detective/tests/data/url-metrics/tablet-viewport-half-stale.json 5ms
plugins/optimization-detective/types.ts 58ms
plugins/performance-lab/.wordpress-org/blueprints/blueprint.json 0ms
plugins/performance-lab/includes/admin/plugin-activate-ajax.js 2ms
plugins/view-transitions/js/types.ts 2ms
plugins/view-transitions/js/view-transitions.js 3ms
tools/e2e/playwright.config.ts 2ms
tools/webpack/utils.js 2ms
tsconfig.json 0ms
webpack.config.js 4ms

westonruter

This LGTM. @swissspidy could you second?

felixarntz

@devansh016 Thank you for the iterations.

I'm still slightly confused by some of the changes in this PR, which seem misaligned / inconsistent in itself.

felixarntz · 2025-06-10T15:00:59Z

.editorconfig

-indent_size = 4
-tab_width = 4
-indent_style = tab
 insert_final_newline = true
 trim_trailing_whitespace = true
+indent_style = tab


Following up on this, I am still not sure about it.

You mention it was removed because it made .json and .yml files use the indent of 4, but that's exactly what is currently happening: All .json and .yml files use the indent of 4. So from that perspective, I don't see why having this here would be problematic.

felixarntz · 2025-06-10T15:03:10Z

.editorconfig

+[*.{yml,yaml}]
 indent_style = space
 indent_size = 2


This is confusing to me. As far as I can tell, all the .yml files were now updated to use indent size 4, which looks right. But then why does this say indent size 2 here? 🤔

You're absolutely right about the inconsistency. Looking at the actual formatting changes in this PR, all .yml files are indeed using an indent size of 4, which aligns with the existing codebase standards.

The indent_size = 2 in the .editorconfig is misleading since Prettier takes precedence and formats these files with 4-space indentation. I initially copied this configuration from the Gutenberg and Core repositories, but it seems now .editorconfig file may not be updated correctly in them.

For consistency and clarity, we should update this to indent_size = 4 to accurately reflect how the files are actually being formatted. This way, the .editorconfig and the actual file formatting are aligned, even though Prettier is the one enforcing the formatting rules.

Would you prefer I update it to indent_size = 4, or we could remove the YAML-specific configuration entirely since Prettier is handling the formatting?

Probably add indent_size = 4 since then the editor will automatically format it properly without requiring Prettier to run, potentially.

Formats json and yml files using npm run format

f101786

westonruter added no milestone PRs that do not have a defined milestone for release [Type] Bug An existing feature is broken labels Oct 18, 2024

devansh016 marked this pull request as ready for review October 18, 2024 05:04

devansh016 requested review from mukeshpanchal27, felixarntz and thelovekesh as code owners October 18, 2024 05:04

mukeshpanchal27 requested changes Oct 18, 2024

View reviewed changes

.wp-env.json Show resolved Hide resolved

devansh016 added 3 commits October 18, 2024 12:12

Adds override config for yml and json

3fed57a

Formats json and yml files

eaaa59d

Add singleQuote for yml files

a3ae0e1

Ignores generated lock files

d336d2a

devansh016 added 4 commits October 21, 2024 15:02

Updates .editorconfig as per core and Gutenberg

90ac758

Formats using npm run format-js

1d13a44

Updates patterns to ignore

a565773

Overides .yml config to use 2 spaces

afc3339

devansh016 requested a review from mukeshpanchal27 October 21, 2024 10:21

mukeshpanchal27 reviewed Oct 21, 2024

View reviewed changes

.editorconfig Outdated Show resolved Hide resolved

mukeshpanchal27 reviewed Oct 21, 2024

View reviewed changes

.editorconfig Outdated Show resolved Hide resolved

Adds file end line and update WordPress coding standards URL

4a9d135

Co-authored-by: Mukesh Panchal <[email protected]>

devansh016 requested a review from mukeshpanchal27 October 28, 2024 08:20

devansh016 added 2 commits October 28, 2024 13:53

Merge branch 'trunk' of github.com:devansh016/wp-performance into For…

f9a6838

…mat-files-using-npm-run-format-js

Merge branch 'Format-files-using-npm-run-format-js' of github.com:dev…

6773f8e

…ansh016/wp-performance into Format-files-using-npm-run-format-js

swissspidy reviewed Nov 4, 2024

View reviewed changes

.prettierrc.js Outdated Show resolved Hide resolved

devansh016 added 2 commits November 19, 2024 17:11

Merge branch 'trunk' of github.com:devansh016/wp-performance into For…

376b0fd

…mat-files-using-npm-run-format-js

Removes yml file override from prettier config

9356e5a

This comment was marked as spam.

Sign in to view

felixarntz reviewed Apr 14, 2025

View reviewed changes

felixarntz requested a review from swissspidy April 14, 2025 17:15

swissspidy changed the title ~~Formats json and yml files using npm run format~~ Improve formatting of .json and .yml files Apr 15, 2025

westonruter mentioned this pull request Jun 3, 2025

Running npm run format-js formats more files than expected #1603

Open

Merge branch 'trunk' into Format-files-using-npm-run-format-js

9f687fd

devansh016 requested a review from westonruter as a code owner June 3, 2025 07:17

devansh016 requested a review from felixarntz June 3, 2025 07:58

devansh016 and others added 4 commits June 6, 2025 17:43

Merge branch 'trunk' into Format-files-using-npm-run-format-js

278fd9a

Merge branch 'trunk' of https://github.com/WordPress/performance into…

3432198

… Format-files-using-npm-run-format-js

Update package-lock.json

981e5e5

Ignore build files in plugins and fix path to ignore minified files

7c0f56c

westonruter reviewed Jun 10, 2025

View reviewed changes

westonruter approved these changes Jun 10, 2025

View reviewed changes

felixarntz reviewed Jun 10, 2025

View reviewed changes

devansh016 added 2 commits June 10, 2025 21:22

Remove duplicate prettier config file

d59caf6

Update indent size to 4 for yml and yaml

ebeefd3

Improve formatting of .json and .yml files #1605

Are you sure you want to change the base?

Improve formatting of .json and .yml files #1605

Uh oh!

Conversation

devansh016 commented Oct 18, 2024 • edited by westonruter Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Relevant technical choices

Uh oh!

github-actions bot commented Oct 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

westonruter commented Oct 18, 2024

Uh oh!

westonruter commented Oct 18, 2024

Uh oh!

Uh oh!

devansh016 commented Oct 18, 2024

Uh oh!

thelovekesh commented Oct 18, 2024

Uh oh!

swissspidy commented Oct 18, 2024

Uh oh!

thelovekesh commented Oct 18, 2024

Uh oh!

westonruter commented Oct 18, 2024

Uh oh!

Uh oh!

Uh oh!

westonruter commented Oct 21, 2024

Uh oh!

devansh016 commented Oct 22, 2024

Uh oh!

Uh oh!

This comment was marked as spam.

Choose a reason for hiding this comment

Uh oh!

devansh016 Jun 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

devansh016 Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

swissspidy commented Apr 15, 2025

Uh oh!

codecov bot commented Jun 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

westonruter commented Jun 10, 2025

Uh oh!

westonruter left a comment

Choose a reason for hiding this comment

Uh oh!

felixarntz left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Improve formatting of `.json` and `.yml` files #1605

Improve formatting of `.json` and `.yml` files #1605

devansh016 commented Oct 18, 2024 •

edited by westonruter

Loading

github-actions bot commented Oct 18, 2024 •

edited

Loading

devansh016 Jun 3, 2025 •

edited

Loading

devansh016 Jun 10, 2025 •

edited

Loading

codecov bot commented Jun 3, 2025 •

edited

Loading