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

Enforce curly braces in eslint config #26886

Closed
wants to merge 2 commits into from
Closed

Conversation

talldan
Copy link
Contributor

@talldan talldan commented Nov 11, 2020

Description

On a few PRs recently I've noticed the eslint 'curly' rule that requires curly braces for if, else, for, while, or do statements isn't resulting in errors.

The cause is prettier's eslint config which purposely disabled some rules that could cause a conflict with prettier's formatting.

However, the docs mention that some of these rules can be re-enabled when configured in a particular way:
https://github.com/prettier/eslint-config-prettier#curly

Curly is one of those rules if configured using the 'all' option, which just happens to be what WordPress also requires.

How has this been tested?

  1. Checkout this PR
  2. Write an if statement in your editor without curly braces
  3. There should be a linting error (some editors may need to be restarted for the rule to take effect)

Screenshots

Screenshot 2020-11-11 at 6 37 17 pm

Types of changes

Bug fix (non-breaking change which fixes an issue)

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@talldan talldan added [Type] Bug An existing feature does not function as intended [Tool] ESLint plugin /packages/eslint-plugin labels Nov 11, 2020
@talldan talldan self-assigned this Nov 11, 2020
@github-actions
Copy link

Size Change: 0 B

Total Size: 1.19 MB

ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.77 kB 0 B
build/api-fetch/index.js 3.42 kB 0 B
build/autop/index.js 2.83 kB 0 B
build/blob/index.js 664 B 0 B
build/block-directory/index.js 8.71 kB 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/index.js 133 kB 0 B
build/block-editor/style-rtl.css 11.2 kB 0 B
build/block-editor/style.css 11.1 kB 0 B
build/block-library/editor-rtl.css 8.91 kB 0 B
build/block-library/editor.css 8.91 kB 0 B
build/block-library/index.js 147 kB 0 B
build/block-library/style-rtl.css 8.1 kB 0 B
build/block-library/style.css 8.1 kB 0 B
build/block-library/theme-rtl.css 792 B 0 B
build/block-library/theme.css 793 B 0 B
build/block-serialization-default-parser/index.js 1.87 kB 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/blocks/index.js 48 kB 0 B
build/components/index.js 171 kB 0 B
build/components/style-rtl.css 15.3 kB 0 B
build/components/style.css 15.3 kB 0 B
build/compose/index.js 9.87 kB 0 B
build/core-data/index.js 14.8 kB 0 B
build/data-controls/index.js 821 B 0 B
build/data/index.js 8.73 kB 0 B
build/date/index.js 11.2 kB 0 B
build/deprecated/index.js 768 B 0 B
build/dom-ready/index.js 571 B 0 B
build/dom/index.js 4.46 kB 0 B
build/edit-navigation/index.js 11.1 kB 0 B
build/edit-navigation/style-rtl.css 881 B 0 B
build/edit-navigation/style.css 885 B 0 B
build/edit-post/index.js 306 kB 0 B
build/edit-post/style-rtl.css 6.43 kB 0 B
build/edit-post/style.css 6.42 kB 0 B
build/edit-site/index.js 22.6 kB 0 B
build/edit-site/style-rtl.css 3.95 kB 0 B
build/edit-site/style.css 3.95 kB 0 B
build/edit-widgets/index.js 26.3 kB 0 B
build/edit-widgets/style-rtl.css 3.16 kB 0 B
build/edit-widgets/style.css 3.16 kB 0 B
build/editor/editor-styles-rtl.css 476 B 0 B
build/editor/editor-styles.css 478 B 0 B
build/editor/index.js 42.5 kB 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.85 kB 0 B
build/element/index.js 4.62 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/index.js 6.86 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.16 kB 0 B
build/html-entities/index.js 623 B 0 B
build/i18n/index.js 3.57 kB 0 B
build/is-shallow-equal/index.js 713 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.1 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.31 kB 0 B
build/notices/index.js 1.77 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.43 kB 0 B
build/priority-queue/index.js 790 B 0 B
build/redux-routine/index.js 2.83 kB 0 B
build/reusable-blocks/index.js 3.05 kB 0 B
build/rich-text/index.js 13.4 kB 0 B
build/server-side-render/index.js 2.77 kB 0 B
build/shortcode/index.js 1.69 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.83 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

@talldan
Copy link
Contributor Author

talldan commented Nov 11, 2020

Looks like a few to fix in the codebase as well. I can sort those out tomorrow.

@gziolo
Copy link
Member

gziolo commented Nov 11, 2020

I think we decided to get rid of all overrides to let Prettier do all formatting work. How is Prettier behaving in the setup proposed, will it reformat code to omit curly braces for short lines?

@talldan
Copy link
Contributor Author

talldan commented Nov 11, 2020

@gziolo Thanks for the context, I wasn't aware that we had some overrides previously.

It worked fine in my testing with a long line, no issues with the automated fix.

@gziolo
Copy link
Member

gziolo commented Nov 12, 2020

It's a bit inconvenient for me as a developer that when I have a line like:

if ( ! onIndexChange ) return;

ESLint errors complaining about the stylistic issue, but running Prettier doesn't fix it. We can discuss it with a wider group of folks on WordPress Slack in #core-js channel. I'm personally against this proposal.

@talldan
Copy link
Contributor Author

talldan commented Nov 12, 2020

@gziolo Is that using a prettier plugin for your editor? I use the eslint one and it handles both linting fixes and prettier fixes, including the curly braces.

@talldan
Copy link
Contributor Author

talldan commented Nov 12, 2020

fmt

@gziolo
Copy link
Member

gziolo commented Nov 12, 2020

Is that using a prettier plugin for your editor? I use the eslint one and it handles both linting fixes and prettier fixes, including the curly braces.

I see what you did. I have the regular Prettier integration with VSC. I also tried npm run format-js. In both cases, it doesn't format the code as intended. This is also what people using @wordpress/scripts will use by default. This is why I'm hesitant to introduce this change.

@talldan
Copy link
Contributor Author

talldan commented Nov 16, 2020

I looked into this further, as an option could be to contribute upstream to wp-prettier or prettierx, but I wanted to double-check if this is in prettier's scope. According to prettier's docs (https://prettier.io/docs/en/rationale.html), this isn't something that should be formatted:

Prettier only prints code. It does not transform it.
Here are a few examples of things that are out of scope for Prettier:

With an item in that list being:

Adding/removing {} and return where they are optional.

As this is a WordPress project, I do think we should be doing our best to enforce WordPress coding standards, which is why I think we should improve this.

Is the issue that you feel this is too strict for users of wp-scripts? Should we have a way of optionally declaring a stricter ruleset, which we could use for gutenberg? I'm just trying to understand the context behind your comments @gziolo.

@gziolo
Copy link
Member

gziolo commented Nov 16, 2020

For the full context, let's include the link to the current coding standards:
https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/#blocks-and-curly-braces

I raised this issue for discussion during the next weekly WordPress Core JS chat.

I doubt that the Prettier project would accept any new flags. We tried several times with WordPress spacing rules and were forced to use wp-prettier fork because of their rejection. Again, I think that we should update Coding Standards to align with what Prettier does rather than adding exceptions. In fact, we removed many exceptions when introducing Prettier, so we might miss this case because we didn't have any occurrences of shorter notation in the codebase at that time.

@gziolo
Copy link
Member

gziolo commented Nov 17, 2020

We discussed this PR during in the #core-js channel on WordPress Slack (link requires registration at https://make.wordpress.org/chat/.

This PR reports 55 violations that are fixable with the ESLint rule propose:

55 errors and 2 warnings potentially fixable with the --fix option.

We didn't come up with any conclusion yet but people expressed that they are fine deferring the formatting to the tool - Prettier. It would be great to stay aligned with PHP coding standards but it feels like they are diverging anyway.

@talldan
Copy link
Contributor Author

talldan commented Nov 20, 2020

Closing based on feedback.

@talldan talldan closed this Nov 20, 2020
@talldan talldan deleted the fix/eslint-curly-rule branch November 20, 2020 06:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Tool] ESLint plugin /packages/eslint-plugin [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants