Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Formats json and yml files using npm run format #1605

Open
wants to merge 14 commits into
base: trunk
Choose a base branch
from

Conversation

devansh016
Copy link
Contributor

@devansh016 devansh016 commented Oct 18, 2024

Summary

Fixes #1603

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

@westonruter 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 devansh016 marked this pull request as ready for review October 18, 2024 05:04
Copy link

github-actions bot commented Oct 18, 2024

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: mukeshpanchal27 <[email protected]>
Co-authored-by: thelovekesh <[email protected]>
Co-authored-by: swissspidy <[email protected]>
Co-authored-by: felixarntz <[email protected]>
Co-authored-by: westonruter <[email protected]>

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

@westonruter
Copy link
Member

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
Copy link
Member

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

}
}
}
"core": null,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Per https://github.com/WordPress/performance/blob/trunk/.editorconfig#L23-L25 the json config it should use two space not tab 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems that when running npm run format-js, the .editorconfig settings are not being applied, which is causing JSON files to use tabs instead of 2 spaces as specified in the .editorconfig. It appears the command is currently using the .prettierrc configuration instead.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When both .editorconfig and .prettierrc are present, Prettier gives precedence to .prettierrc. You can override config for yml and json to change this behavior from the Prettier config file - https://prettier.io/docs/en/configuration.html#configuration-overrides

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems strange that we have to apply a manual override for the default Prettier configuration used by wp-scripts, as that is the de facto standard.

Our .editorconfig file looks quite different from what's in core or Gutenberg. They both use tabs for JSON files for example.

So I think we should rather update our .editorconfig rather than the Prettier config.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I noticed that too the other week. FWIW the .editorconfig we use is old, and a long time ago I believe this was common in WP land to use two spaces for those kinds of files. But since Gutenberg provides centralized tooling that dictates otherwise, I feel like it would make sense to align with that.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have updated the .editorconfig file to align with the settings used in Core and Gutenberg, where JSON files use tabs instead of 2 spaces. This should prevent conflicts with the existing Prettier configuration and ensure consistency across the project.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks. Can we then remove this .prettierrc.js override for yml files? We should be able to use the default config for those too, no?

@devansh016
Copy link
Contributor Author

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
Copy link
Member

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
Copy link
Member

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

@thelovekesh
Copy link
Member

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
Copy link
Member

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

.editorconfig Outdated Show resolved Hide resolved
.editorconfig Outdated Show resolved Hide resolved
@westonruter
Copy link
Member

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
Copy link
Contributor Author

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

…ansh016/wp-performance into Format-files-using-npm-run-format-js
.prettierrc.js Outdated
Comment on lines 1 to 16
// Import the default config file and expose it in the project root.
// Useful for editor integrations.
const wpPrettierConfig = require( '@wordpress/prettier-config' );

module.exports = {
...wpPrettierConfig,
overrides: [
{
files: '*.yml',
options: {
useTabs: false,
tabWidth: 2,
},
},
],
};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need this override?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@swissspidy When both .editorconfig and .prettierrc are present, Prettier gives precedence to .prettierrc. Further the recommended indentation for YAML files is two spaces per level, so we override it here.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But the default Prettier config should be correct for our needs, and the editorconfig should match the Prettier config 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@swissspidy The default Prettier configuration should suffice for our needs, and ensuring that the .editorconfig aligns with it eliminates the need for overrides. I have remove this overrides and now the .yml files formating looks similar to one in gutenberg project ref.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
no milestone PRs that do not have a defined milestone for release [Type] Bug An existing feature is broken
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Running npm run format-js formats more files than expected
6 participants