Fix to add parentheses for TSTypeQuery in some case #14042

onishi-kohei · 2022-12-21T13:24:34Z

Description

Fix to add parentheses for TSTypeQuery in some case (#13546)

I added an if statement with the parent type the example sentence had.

a as (typeof node.children)[number]

a as (typeof node.children)[]

a as ((typeof node.children)[number])[]

Checklist

I’ve added tests to confirm my change works.
(If changing the API or CLI) I’ve documented the changes I’ve made (in the docs/ directory).
(If the change is user-facing) I’ve added my changes to changelog_unreleased/*/XXXX.md file following changelog_unreleased/TEMPLATE.md.
I’ve read the contributing guidelines.

✨Try the playground for this PR✨

fisker · 2022-12-23T12:19:54Z

Need add tests https://github.com/prettier/prettier/blob/main/CONTRIBUTING.md#tests

thorn0 · 2022-12-25T17:07:32Z

tests/format/typescript/typeof/typeof.ts

@@ -0,0 +1,4 @@
+// https://github.com/typescript-eslint/typescript-eslint/pull/4382


Please remove this comment

thorn0 · 2022-12-25T17:08:21Z

Please add a changelog entry. See https://github.com/prettier/prettier/blob/main/CONTRIBUTING.md#other

onishi-kohei · 2022-12-26T00:00:07Z

I am grateful to @thorn0 and @fisker for their support.

fisker · 2022-12-29T02:30:47Z

src/language-js/needs-parens.js

+        parent.type === "TSArrayType"
+      ) {
+        return true;
+      }


We need check the property name here, in this case name === "objectType".

Prettier pr-14042
Playground link

--parser typescript

Input:

a as (typeof node.children)[number] a as (number)[typeof node.children]

Output:

a as (typeof node.children)[number]; a as number[(typeof node.children)];

a as (typeof node.children)[]

this property name was elementType
May I add a case like the code below?

return ( name === "objectType" || name === "elementType" && (parent.type === "TSIndexedAccessType" || parent.type === "TSArrayType") )

No, should be

return ( (name === "objectType" && parent.type === "TSIndexedAccessType") || (name === "elementType" && parent.type === "TSArrayType") )

Fixed in this commit.　7035317

fisker · 2022-12-29T02:37:15Z

src/language-js/needs-parens.js

+      ) {
+        return true;
+      }
+    // fallthrough


I don't think TSTypeQuery(TypeScript node type) can be a child of NullableTypeAnnotation(flow node type). This should not fallthrough.

sosukesuzuki

LGTM except for the review comments that remain now.

fisker

Thanks for working on this.

fisker · 2022-12-30T06:30:40Z

@onishi-kohei

There should be other cases need add parens, for example:

a as (typeof node.children)!

if you are interested thoses types in this branch may give you the idea to improve.

And don't send PRs from your main branch next time.

Specifically, parentheses around typeof statements. See https://github.com/prettier/prettier/blob/main/CHANGELOG.md#add-parentheses-for-tstypequery-to-improve-readability-14042-by-onishi-kohei and prettier/prettier#14042.

This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [prettier](https://prettier.io) ([source](https://github.com/prettier/prettier)) | devDependencies | patch | [`2.8.1` -> `2.8.2`](https://renovatebot.com/diffs/npm/prettier/2.8.1/2.8.2) | --- ### Release Notes <details> <summary>prettier/prettier</summary> ### [`v2.8.2`](https://github.com/prettier/prettier/blob/HEAD/CHANGELOG.md#282) [Compare Source](prettier/prettier@2.8.1...2.8.2) [diff](prettier/prettier@2.8.1...2.8.2) ##### Don't lowercase link references ([#13155](prettier/prettier#13155) by [@DerekNonGeneric](https://github.com/DerekNonGeneric) & [@fisker](https://github.com/fisker))  ```markdown  We now don't strictly follow the release notes format suggested by [Keep a Changelog]. [Keep a Changelog]: https://example.com/  We now don't strictly follow the release notes format suggested by [Keep a Changelog]. [keep a changelog]: https://example.com/   <Same as input> ``` ##### Preserve self-closing tags ([#13691](prettier/prettier#13691) by [@dcyriller](https://github.com/dcyriller))  ```hbs {{! Input }} <div /> <div></div> <custom-component /> <custom-component></custom-component> <i /> <i></i> <Component /> <Component></Component> {{! Prettier 2.8.1 }} <div></div> <div></div> <custom-component></custom-component> <custom-component></custom-component> <i></i> <i></i> <Component /> <Component /> {{! Prettier 2.8.2 }} <div /> <div></div> <custom-component /> <custom-component></custom-component> <i /> <i></i> <Component /> <Component /> ``` ##### Allow custom "else if"-like blocks with block params ([#13930](prettier/prettier#13930) by [@jamescdavis](https://github.com/jamescdavis)) [#13507](prettier/prettier#13507) added support for custom block keywords used with `else`, but failed to allow block params. This updates printer-glimmer to allow block params with custom "else if"-like blocks.  ```hbs {{! Input }} {{#when isAtWork as |work|}} Ship that {{work}}! {{else when isReading as |book|}} You can finish {{book}} eventually... {{else}} Go to bed! {{/when}} {{! Prettier 2.8.1 }} {{#when isAtWork as |work|}} Ship that {{work}}! {{else when isReading}} You can finish {{book}} eventually... {{else}} Go to bed! {{/when}} {{! Prettier 2.8.2 }} {{#when isAtWork as |work|}} Ship that {{work}}! {{else when isReading as |book|}} You can finish {{book}} eventually... {{else}} Go to bed! {{/when}} ``` ##### Preserve empty lines between nested SCSS maps ([#13931](prettier/prettier#13931) by [@jneander](https://github.com/jneander))  ```scss /* Input */ $map: ( 'one': ( 'key': 'value', ), 'two': ( 'key': 'value', ), ) /* Prettier 2.8.1 */ $map: ( 'one': ( 'key': 'value', ), 'two': ( 'key': 'value', ), ) /* Prettier 2.8.2 */ $map: ( 'one': ( 'key': 'value', ), 'two': ( 'key': 'value', ), ) ``` ##### Fix missing parentheses when an expression statement starts with `let[` ([#14000](prettier/prettier#14000), [#14044](prettier/prettier#14044) by [@fisker](https://github.com/fisker), [@thorn0](https://github.com/thorn0))  ```jsx // Input (let[0] = 2); // Prettier 2.8.1 let[0] = 2; // Prettier 2.8.1 (second format) SyntaxError: Unexpected token (1:5) > 1 | let[0] = 2; | ^ 2 | // Prettier 2.8.2 (let)[0] = 2; ``` ##### Fix semicolon duplicated at the end of LESS file ([#14007](prettier/prettier#14007) by [@mvorisek](https://github.com/mvorisek))  ```less // Input @variable: { field: something; }; // Prettier 2.8.1 @variable: { field: something; }; ; // Prettier 2.8.2 @variable: { field: something; }; ``` ##### Fix no space after unary minus when followed by opening parenthesis in LESS ([#14008](prettier/prettier#14008) by [@mvorisek](https://github.com/mvorisek))  ```less // Input .unary_minus_single { margin: -(@a); } .unary_minus_multi { margin: 0 -(@a); } .binary_minus { margin: 0 - (@a); } // Prettier 2.8.1 .unary_minus_single { margin: - (@a); } .unary_minus_multi { margin: 0 - (@a); } .binary_minus { margin: 0 - (@a); } // Prettier 2.8.2 .unary_minus_single { margin: -(@a); } .unary_minus_multi { margin: 0 -(@a); } .binary_minus { margin: 0 - (@a); } ``` ##### Do not change case of property name if inside a variable declaration in LESS ([#14034](prettier/prettier#14034) by [@mvorisek](https://github.com/mvorisek))  ```less // Input @var: { preserveCase: 0; }; // Prettier 2.8.1 @var: { preservecase: 0; }; // Prettier 2.8.2 @var: { preserveCase: 0; }; ``` ##### Fix formatting for auto-accessors with comments ([#14038](prettier/prettier#14038) by [@fisker](https://github.com/fisker))  ```jsx // Input class A { @dec() // comment accessor b; } // Prettier 2.8.1 class A { @dec() accessor // comment b; } // Prettier 2.8.1 (second format) class A { @dec() accessor; // comment b; } // Prettier 2.8.2 class A { @dec() // comment accessor b; } ``` ##### Add parentheses for TSTypeQuery to improve readability ([#14042](prettier/prettier#14042) by [@onishi-kohei](https://github.com/onishi-kohei))  ```tsx // Input a as (typeof node.children)[number] a as (typeof node.children)[] a as ((typeof node.children)[number])[] // Prettier 2.8.1 a as typeof node.children[number]; a as typeof node.children[]; a as typeof node.children[number][]; // Prettier 2.8.2 a as (typeof node.children)[number]; a as (typeof node.children)[]; a as (typeof node.children)[number][]; ``` ##### Fix displacing of comments in default switch case ([#14047](prettier/prettier#14047) by [@thorn0](https://github.com/thorn0)) It was a regression in Prettier 2.6.0.  ```jsx // Input switch (state) { default: result = state; // no change break; } // Prettier 2.8.1 switch (state) { default: // no change result = state; break; } // Prettier 2.8.2 switch (state) { default: result = state; // no change break; } ``` ##### Support type annotations on auto accessors via `babel-ts` ([#14049](prettier/prettier#14049) by [@sosukesuzuki](https://github.com/sosukesuzuki)) [The bug that `@babel/parser` cannot parse auto accessors with type annotations](babel/babel#15205) has been fixed. So we now support it via `babel-ts` parser.  ```tsx class Foo { accessor prop: number; } ``` ##### Fix formatting of empty type parameters ([#14073](prettier/prettier#14073) by [@fisker](https://github.com/fisker))  ```jsx // Input const foo: bar</* comment */> = () => baz; // Prettier 2.8.1 Error: Comment "comment" was not printed. Please report this error! // Prettier 2.8.2 const foo: bar</* comment */> = () => baz; ``` ##### Add parentheses to head of `ExpressionStatement` instead of the whole statement ([#14077](prettier/prettier#14077) by [@fisker](https://github.com/fisker))  ```jsx // Input ({}).toString.call(foo) === "[object Array]" ? foo.forEach(iterateArray) : iterateObject(foo); // Prettier 2.8.1 ({}.toString.call(foo) === "[object Array]" ? foo.forEach(iterateArray) : iterateObject(foo)); // Prettier 2.8.2 ({}).toString.call(foo.forEach) === "[object Array]" ? foo.forEach(iterateArray) : iterateObject(foo); ``` ##### Fix comments after directive ([#14081](prettier/prettier#14081) by [@fisker](https://github.com/fisker))  ```jsx // Input "use strict" /* comment */; // Prettier 2.8.1 (with other js parsers except `babel`) Error: Comment "comment" was not printed. Please report this error! // Prettier 2.8.2 <Same as input> ``` ##### Fix formatting for comments inside JSX attribute ([#14082](prettier/prettier#14082) with by [@fisker](https://github.com/fisker))  ```jsx // Input function MyFunctionComponent() { <button label=/*old*/"new">button</button> } // Prettier 2.8.1 Error: Comment "old" was not printed. Please report this error! // Prettier 2.8.2 function MyFunctionComponent() { <button label=/*old*/ "new">button</button>; } ``` ##### Quote numeric keys for json-stringify parser ([#14083](prettier/prettier#14083) by [@fisker](https://github.com/fisker))  ```jsx // Input {0: 'value'} // Prettier 2.8.1 { 0: "value" } // Prettier 2.8.2 { "0": "value" } ``` ##### Fix removing commas from function arguments in maps ([#14089](prettier/prettier#14089) by [@sosukesuzuki](https://github.com/sosukesuzuki))  ```scss /* Input */ $foo: map-fn( ( "#{prop}": inner-fn($first, $second), ) ); /* Prettier 2.8.1 */ $foo: map-fn(("#{prop}": inner-fn($first $second))); /* Prettier 2.8.2 */ $foo: map-fn( ( "#{prop}": inner-fn($first, $second), ) ); ``` ##### Do not insert space in LESS property access ([#14103](prettier/prettier#14103) by [@fisker](https://github.com/fisker))  ```less // Input a { color: @colors[@white]; } // Prettier 2.8.1 a { color: @colors[ @white]; } // Prettier 2.8.2 <Same as input> ``` </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  Co-authored-by: cabr2-bot <cabr2.help@gmail.com> Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1708 Reviewed-by: Epsilon_02 <epsilon_02@noreply.codeberg.org> Co-authored-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org> Co-committed-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org>

SamuelMS · 2023-01-17T23:58:10Z

@onishi-kohei Does this interact cleanly with keyof typeof? I'm seeing new errors in 2.8.3:

{
  // ...
  accept: typeof MIME_TYPES[keyof typeof MIME_TYPES][];
}

14:11 Error: Replace `typeof·MIME_TYPES` with `(typeof·MIME_TYPES)` prettier/prettier

The type is ugly but is tied to a third-party library. Parentheses that are added by hand are stripped by prettier automatically.

onishi-kohei · 2023-01-18T13:55:12Z

@SamuelMS
I have verified that the following code did not generate an error.

// Input
export type A = {
  a?: {
    [
      x: string
    ]: typeof SomeLongLongLongTypeName[keyof typeof SomeLongLongLongTypeName];
  } | null;
};

https://github.com/prettier/prettier/blob/main/CHANGELOG.md#typescript-avoid-trailing-commas-on-index-signatures-with-only-one-parameter-7836-by-bakkot

thorn0 · 2023-01-18T14:03:11Z

@SamuelMS Make sure you don't have a caret (^) in front of Prettier's version in your package.json. See https://prettier.io/docs/en/install.html#summary

zomars · 2023-01-27T02:18:02Z

Can we disable this option?

SamuelMS · 2023-02-03T06:17:10Z

@onishi-kohei You're right, this was an environment issue – IDEA silently persisted a cached version of an older version of prettier around.

onishi-kohei added 2 commits December 21, 2022 22:11

add TSTypeQuery to needsParens

4357463

fix to lint prettier

8bd1d57

add test

6075690

thorn0 reviewed Dec 25, 2022

View reviewed changes

onishi-kohei added 2 commits December 26, 2022 08:24

remove comment

13d63c2

add changelog

20e5a29

onishi-kohei and others added 4 commits December 28, 2022 20:26

fix lint

2fa910b

remove template comments at top in changelog

338124e

Fix changelog

15096f1

Add new line

57d3a18

fisker reviewed Dec 29, 2022

View reviewed changes

fisker requested changes Dec 29, 2022

View reviewed changes

onishi-kohei added 2 commits December 29, 2022 13:12

check objectType

59a7a56

remove fallthrough comment

f3f7503

sosukesuzuki reviewed Dec 29, 2022

View reviewed changes

check property name

7035317

fisker approved these changes Dec 29, 2022

View reviewed changes

Simplify changelog

7ea60a6

sosukesuzuki approved these changes Dec 30, 2022

View reviewed changes

sosukesuzuki merged commit 369bf2a into prettier:main Dec 30, 2022

fisker mentioned this pull request Jan 5, 2023

Add parentheses for TSTypeQuery in some case #13546

Closed

ST-DDT mentioned this pull request Jan 10, 2023

chore(deps): update dependency prettier to v2.8.3 faker-js/faker#1726

Merged

1 task

kachkaev mentioned this pull request Jan 12, 2023

prettier 2.8.2 adds superfluous parentheses to TSTypeOperator #14162

Closed

fisker mentioned this pull request Jan 14, 2023

Add parentheses for TSTypeOperator #14140

Closed

blumamir mentioned this pull request Jan 15, 2023

ci: fix lint open-telemetry/opentelemetry-js-contrib#1355

Merged

jiftechnify mentioned this pull request Jan 20, 2023

Chore(deps-dev): bump prettier from 2.7.1 to 2.8.3 jiftechnify/eject-enum#104

Closed

fisker mentioned this pull request Feb 1, 2023

Typescript typeof invalid formatting #14283

Closed

prettier locked as resolved and limited conversation to collaborators Feb 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix to add parentheses for TSTypeQuery in some case #14042

Fix to add parentheses for TSTypeQuery in some case #14042

onishi-kohei commented Dec 21, 2022 •

edited

fisker commented Dec 23, 2022

thorn0 Dec 25, 2022

thorn0 commented Dec 25, 2022

onishi-kohei commented Dec 26, 2022

fisker Dec 29, 2022 •

edited

onishi-kohei Dec 29, 2022 •

edited

fisker Dec 29, 2022 •

edited

onishi-kohei Dec 29, 2022

fisker Dec 29, 2022

sosukesuzuki left a comment

fisker left a comment

fisker commented Dec 30, 2022

SamuelMS commented Jan 17, 2023

onishi-kohei commented Jan 18, 2023 •

edited

thorn0 commented Jan 18, 2023

zomars commented Jan 27, 2023

SamuelMS commented Feb 3, 2023

		@@ -0,0 +1,4 @@
		// https://github.com/typescript-eslint/typescript-eslint/pull/4382

Fix to add parentheses for TSTypeQuery in some case #14042

Fix to add parentheses for TSTypeQuery in some case #14042

Conversation

onishi-kohei commented Dec 21, 2022 • edited

Description

Checklist

fisker commented Dec 23, 2022

thorn0 Dec 25, 2022

Choose a reason for hiding this comment

thorn0 commented Dec 25, 2022

onishi-kohei commented Dec 26, 2022

fisker Dec 29, 2022 • edited

Choose a reason for hiding this comment

onishi-kohei Dec 29, 2022 • edited

Choose a reason for hiding this comment

fisker Dec 29, 2022 • edited

Choose a reason for hiding this comment

onishi-kohei Dec 29, 2022

Choose a reason for hiding this comment

fisker Dec 29, 2022

Choose a reason for hiding this comment

sosukesuzuki left a comment

Choose a reason for hiding this comment

fisker left a comment

Choose a reason for hiding this comment

fisker commented Dec 30, 2022

SamuelMS commented Jan 17, 2023

onishi-kohei commented Jan 18, 2023 • edited

thorn0 commented Jan 18, 2023

zomars commented Jan 27, 2023

SamuelMS commented Feb 3, 2023

onishi-kohei commented Dec 21, 2022 •

edited

fisker Dec 29, 2022 •

edited

onishi-kohei Dec 29, 2022 •

edited

fisker Dec 29, 2022 •

edited

onishi-kohei commented Jan 18, 2023 •

edited