From 7f455be5af4a83a63c6b3e399d820b8d97159484 Mon Sep 17 00:00:00 2001 From: fisker Cheung Date: Thu, 15 Jan 2026 19:54:18 +0800 Subject: [PATCH] Improve syntax highlight for Flow syntax (#18645) Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> --- changelog_unreleased/flow/18511.md | 2 +- changelog_unreleased/flow/18616.md | 2 +- changelog_unreleased/flow/18629.md | 2 +- changelog_unreleased/flow/18630.md | 2 +- scripts/generate-changelog.js | 1 + website/blog/2017-05-03-1.3.0.md | 16 ++++++++-------- website/blog/2017-08-29-1.6.0.md | 8 ++++---- website/blog/2017-11-07-1.8.0.md | 2 +- website/blog/2017-12-05-1.9.0.md | 2 +- website/blog/2018-01-10-1.10.0.md | 10 +++++----- website/blog/2018-05-27-1.13.0.md | 8 ++++---- website/blog/2018-11-07-1.15.0.md | 2 +- website/blog/2019-01-20-1.16.0.md | 2 +- website/blog/2019-11-09-1.19.0.md | 5 +++-- website/blog/2020-03-21-2.0.0.md | 6 +++--- website/blog/2020-08-24-2.1.0.md | 2 +- website/blog/2020-11-20-2.2.0.md | 14 +++++++------- website/blog/2021-05-09-2.3.0.md | 5 ++--- website/blog/2021-09-09-2.4.0.md | 2 +- website/blog/2022-03-16-2.6.0.md | 2 +- website/blog/2023-07-05-3.0.0.md | 12 ++++++------ website/blog/2023-11-13-3.1.0.md | 2 +- website/blog/2024-06-01-3.3.0.md | 6 +++--- website/blog/2025-02-09-3.5.0.md | 2 +- website/blog/2025-11-27-3.7.0.md | 4 ++-- website/docusaurus.config.js | 1 + 26 files changed, 62 insertions(+), 60 deletions(-) diff --git a/changelog_unreleased/flow/18511.md b/changelog_unreleased/flow/18511.md index 77d6a62d1..0705cc8e7 100644 --- a/changelog_unreleased/flow/18511.md +++ b/changelog_unreleased/flow/18511.md @@ -1,7 +1,7 @@ #### Add support for Flow match instance patterns and Flow records (#18511 by @gkz) -```jsx +```flow // Input record R { num: number, diff --git a/changelog_unreleased/flow/18616.md b/changelog_unreleased/flow/18616.md index ed1b66096..efc7f527a 100644 --- a/changelog_unreleased/flow/18616.md +++ b/changelog_unreleased/flow/18616.md @@ -1,7 +1,7 @@ #### Improve comment format in inexact tuples (#18616 by @fisker) -```jsx +```flow // Input type A = [// comment ...]; diff --git a/changelog_unreleased/flow/18629.md b/changelog_unreleased/flow/18629.md index 8309b8951..0e297a9e2 100644 --- a/changelog_unreleased/flow/18629.md +++ b/changelog_unreleased/flow/18629.md @@ -1,7 +1,7 @@ #### Fix dangling comment print in components (#18629 by @fisker) -```jsx +```flow // Input component A( // comment diff --git a/changelog_unreleased/flow/18630.md b/changelog_unreleased/flow/18630.md index 4159fa992..0ebc9e730 100644 --- a/changelog_unreleased/flow/18630.md +++ b/changelog_unreleased/flow/18630.md @@ -1,7 +1,7 @@ #### Fix dangling comment print in hooks (#18630 by @fisker) -```jsx +```flow // Input hook A( // comment diff --git a/scripts/generate-changelog.js b/scripts/generate-changelog.js index 92c776919..81cfcde0a 100755 --- a/scripts/generate-changelog.js +++ b/scripts/generate-changelog.js @@ -159,6 +159,7 @@ function getSyntaxFromCategory(category) { case "mdx": return "mdx"; case "flow": + return "flow"; case "javascript": case "api": case "misc": diff --git a/website/blog/2017-05-03-1.3.0.md b/website/blog/2017-05-03-1.3.0.md index 4254867b1..e3f8bede3 100644 --- a/website/blog/2017-05-03-1.3.0.md +++ b/website/blog/2017-05-03-1.3.0.md @@ -50,7 +50,7 @@ When I started working on prettier, I had a hunch that people were hungry for to The `--trailing-comma=all` option is supposed to add trailing commas everywhere possible, but as an oversight we forgot to do it for flow generics. -```ts +```flow // Before type Errors = Immutable.Map< Ahohohhohohohohohohohohohohooh, @@ -69,7 +69,7 @@ type Errors = Immutable.Map< The phase after printing things correctly is to tweak the output to make it closer to the way people write code in practice. Inlining optional flow types is a small thing that makes a difference. -```ts +```flow // Before type Cursor = Promise< ?{ @@ -90,7 +90,7 @@ type Cursor = Promise -```js +```flow // Before export type AdamPlacementValidationSingleErrorKey = 'SOME_FANCY_TARGETS.GLOBAL_TARGET'; @@ -104,7 +104,7 @@ export type AdamPlacementValidationSingleErrorKey = Another example of small thing where we can improve the display of flow code. For function default arguments we put a space around `=` but didn't around flow generics. -```ts +```flow // Before class PolyDefault {} @@ -117,7 +117,7 @@ class PolyDefault {} I'm trying to figure out something to write here, but ... it just looks weird! -```ts +```flow // Before const selectorByPath: Path @@ -140,7 +140,7 @@ const selectorByPath: Path => SomethingSelector< We were a bit too lenient around parenthesis for optional flow types. In one case in the entire Facebook codebase, it generated code with different semantics. As part of this fix, we hardened the list of types that can be written without parenthesis. -```ts +```flow // Before type X = ?(number, number) => number => void; @@ -153,7 +153,7 @@ type X = (?(number, number) => number) => void; It is a parse error to add a trailing comma without parenthesis for arguments of arrow function types. We found one case in Facebook codebase when this happened, it's a very rare occurrence. -```ts +```flow // Before type IdeConnectionFactory = child_process$ChildProcess, @@ -170,7 +170,7 @@ type IdeConnectionFactory = This one is an example where the way the AST is structured is not our favor. Instead of having a list of elements inside of a type, the AST is structured in a way where normal keys and array keys each have their own group. In order to restore the initial order, we're now reading from the original source :( -```ts +```flow // Before type Foo = { [key: string]: void, diff --git a/website/blog/2017-08-29-1.6.0.md b/website/blog/2017-08-29-1.6.0.md index b0c1abff1..25e7a4277 100644 --- a/website/blog/2017-08-29-1.6.0.md +++ b/website/blog/2017-08-29-1.6.0.md @@ -422,7 +422,7 @@ data[key]('foo') The flow team introduced two very exciting features under a new syntax. We now support them in prettier. I've personally been waiting for [opaque types](https://medium.com/flow-type/hiding-implementation-details-with-flows-new-opaque-type-aliases-feature-40e188c2a3f9) for a veerrryyyy long time! -```ts +```flow // Before Syntax error @@ -436,7 +436,7 @@ export type * from "module"; We've been doing this on JavaScript objects since the early days of prettier but forgot to apply the same thing to Flow and TypeScript types. -```ts +```flow // Before type A = { "string": "A"; @@ -453,7 +453,7 @@ type A = { Oopsy, we were dropping the generic in this very specific case. -```ts +```flow // Before type myFunction = A => B; @@ -466,7 +466,7 @@ type myFunction = (A) => B; Parenthesis... someday we'll get all of them fixed :) -```ts +```flow // Before const actionArray: () => void[] = []; diff --git a/website/blog/2017-11-07-1.8.0.md b/website/blog/2017-11-07-1.8.0.md index fe467eebb..70f19926f 100644 --- a/website/blog/2017-11-07-1.8.0.md +++ b/website/blog/2017-11-07-1.8.0.md @@ -430,7 +430,7 @@ find('.org-lclp-edit-copy-url-banner__link')[0] This was a minor alignment bug in intersection types, and has now been fixed. -```js +```tsx // Before type intersectionTest = { propA: X diff --git a/website/blog/2017-12-05-1.9.0.md b/website/blog/2017-12-05-1.9.0.md index 18208d7a1..68d03e78e 100644 --- a/website/blog/2017-12-05-1.9.0.md +++ b/website/blog/2017-12-05-1.9.0.md @@ -191,7 +191,7 @@ It won't break empty type parameters (`foo: Type<>`) anymore. We were accidentally dropping flow mixins, this has been fixed, but only for the `babylon` parser. -```js +```flow // Before class Foo extends Bar {} diff --git a/website/blog/2018-01-10-1.10.0.md b/website/blog/2018-01-10-1.10.0.md index a5d2b4202..3e5f0ed68 100644 --- a/website/blog/2018-01-10-1.10.0.md +++ b/website/blog/2018-01-10-1.10.0.md @@ -120,15 +120,15 @@ var c = 0xAE_FE_2F; Flow [type annotation comments](https://flow.org/en/docs/types/comments/#toc-comment-type-annotation) are a nice way to get type checking without having to transpile your files. Before this release, Prettier, using the flow parser, would not print the type annotation as comments, making it impossible to use that feature. Now, Prettier will correctly detect if the type annotation was a comment and print accordingly for `/*: ... */` type comments. Work is in progress for `/*:: ... */` comments. -```ts +```flow // Input -let foo /*: string */ = "a"; +let foo: string = "a"; // Before let foo: string = "a"; // After -let foo /*: string */ = "a"; +let foo: string = "a"; ``` #### Print comment after arrow function params ([#3444]) by [@duailibe] @@ -136,7 +136,7 @@ let foo /*: string */ = "a"; If you are using the babylon parser, there are different kind of issues with flow comments where comments are moved around. One of them was fixed during this release. We're now getting closer to be able to support that feature. -```ts +```flow // Before const run = (cmd /*: string */ /*: Promise */) => {}; @@ -149,7 +149,7 @@ const run = (cmd /*: string */) /*: Promise */ => {}; In the [last release](https://prettier.io/blog/2017/12/05/1.9.0.html) we added a new `arrowParens` option. One place were it was overlooked is in flow function type annotations. Now when `arrowParens` is set to `always` we will put parenthesis around single arguments. -```ts +```flow // --arrow-parens always // Before diff --git a/website/blog/2018-05-27-1.13.0.md b/website/blog/2018-05-27-1.13.0.md index 287c2273c..be35cf10b 100644 --- a/website/blog/2018-05-27-1.13.0.md +++ b/website/blog/2018-05-27-1.13.0.md @@ -271,7 +271,7 @@ do { In versions 1.12 and earlier, Prettier would incorrectly remove `mixins` and `implements` from flow libdef classes, which would change the meaning of the code. This has been fixed in 1.13. -```js +```flow // Input declare class A implements B {} declare class C mixins D {} @@ -296,21 +296,21 @@ New features added to Flow are now supported by Prettier: - inline interfaces - ```ts + ```flow type A = interface { p: string}; ``` - explicit type arguments - ```ts + ```flow fnCall("name"); ``` - proto modifier syntax - ```ts + ```flow declare class A { proto: T } ``` diff --git a/website/blog/2018-11-07-1.15.0.md b/website/blog/2018-11-07-1.15.0.md index 677c7ad59..e954a837d 100644 --- a/website/blog/2018-11-07-1.15.0.md +++ b/website/blog/2018-11-07-1.15.0.md @@ -433,7 +433,7 @@ This syntax is now supported in Prettier 1.15. [inexact]: https://medium.com/flow-type/on-the-roadmap-exact-objects-by-default-16b72933c5cf -```ts +```flow type T = { a: number, ... diff --git a/website/blog/2019-01-20-1.16.0.md b/website/blog/2019-01-20-1.16.0.md index 36ebc1d4d..04bfde436 100644 --- a/website/blog/2019-01-20-1.16.0.md +++ b/website/blog/2019-01-20-1.16.0.md @@ -113,7 +113,7 @@ To address this issue, we added the `babel-flow` parser option, which uses Babel but prefers Flow syntax when ambiguities arise. -```js +```flow // Input const Theme = React.createContext<"light" | "dark">("light"); diff --git a/website/blog/2019-11-09-1.19.0.md b/website/blog/2019-11-09-1.19.0.md index 7ab4e097e..8712750f7 100644 --- a/website/blog/2019-11-09-1.19.0.md +++ b/website/blog/2019-11-09-1.19.0.md @@ -557,10 +557,11 @@ const foo = [abc, def, ghi, jkl, mno, pqr, stu, vwx, yz] as ( #### Add support for enums ([#6833] by [@gkz]) -```js +```flow // Input enum E of string { - A = "a", B = "b" + A = "a", + B = "b", } // Prettier 1.19 diff --git a/website/blog/2020-03-21-2.0.0.md b/website/blog/2020-03-21-2.0.0.md index 69c379601..df54b09e8 100644 --- a/website/blog/2020-03-21-2.0.0.md +++ b/website/blog/2020-03-21-2.0.0.md @@ -791,7 +791,7 @@ const a: T = 1; A new AST node type was introduced in flow@0.114.0, now it's recognized. -```jsx +```flow // Input const x: symbol = Symbol(); @@ -805,7 +805,7 @@ const x: symbol = Symbol(); #### Add support for decorators ([#7482](https://github.com/prettier/prettier/pull/7482) by [@fisker](https://github.com/fisker)) -```jsx +```flow // Input /* @flow */ @decorator4 @@ -837,7 +837,7 @@ class Foo { #### Fix private class field declarations ([#7484](https://github.com/prettier/prettier/pull/7484) by [@fisker](https://github.com/fisker)) -```js +```flow // Input class Foo { #privateProp: number; diff --git a/website/blog/2020-08-24-2.1.0.md b/website/blog/2020-08-24-2.1.0.md index fa49eefca..4493e6a5d 100644 --- a/website/blog/2020-08-24-2.1.0.md +++ b/website/blog/2020-08-24-2.1.0.md @@ -874,7 +874,7 @@ let f: (((?A) => B)) => B; Do not add a trailing semicolon if default exporting a Flow Enum. -```jsx +```flow // Input export default enum B {} diff --git a/website/blog/2020-11-20-2.2.0.md b/website/blog/2020-11-20-2.2.0.md index 0ad029130..f64bec924 100644 --- a/website/blog/2020-11-20-2.2.0.md +++ b/website/blog/2020-11-20-2.2.0.md @@ -451,7 +451,7 @@ type a = { In practice, this means that as long as your Flow files have the pragma, it's safe to use the `.js` extension for them. Prettier will correctly parse and print them without any additional configuration. Previously, the pragma was recognized by the parser, but there existed minor correctness issues with the printer. E.g. it's not safe to unquote number keys in Flow. -```jsx +```flow // Input (with --parser babel) // @flow f({ "2": 2 }) @@ -470,7 +470,7 @@ f({ "2": 2 }); Previously, was not supported. Now, the following is formatted: -```jsx +```flow // Input enum E { A, @@ -491,7 +491,7 @@ enum E { #### `this` parameter annotations ([#9457](https://github.com/prettier/prettier/pull/9457) by [@dsainati1](https://github.com/dsainati1), [#9489](https://github.com/prettier/prettier/pull/9489) by [@fisker](https://github.com/fisker)) -```jsx +```flow // Input function f(this: string, a: number) { } @@ -515,7 +515,7 @@ type T = (this: boolean, a: number) => boolean; Add support for `BigIntLiteralTypeAnnotation` and `BigIntTypeAnnotation` in Flow. -```jsx +```flow // Input const foo: bigint = 1n; const bar: baz<1n> = 1n; @@ -532,7 +532,7 @@ const bar: baz<1n> = 1n; #### Treat more simple types as non-breaking in generic type annotations ([#9543](https://github.com/prettier/prettier/pull/9543) by [@fisker](https://github.com/fisker)) -```jsx +```flow // Input const foo1: Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo = a const foo2: Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo<"STRING"> = a; @@ -558,7 +558,7 @@ const foo3: Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo #### Fix missing parentheses around `prettier-ignore`d type assertions ([#9553](https://github.com/prettier/prettier/pull/9553) by [@fisker](https://github.com/fisker)) -```jsx +```flow // Input transform( // prettier-ignore @@ -581,7 +581,7 @@ transform( #### Improve comment types detection ([#9563](https://github.com/prettier/prettier/pull/9563) by [@fisker](https://github.com/fisker)) -```jsx +```flow // Input foo/*::*/(baz); class Foo { diff --git a/website/blog/2021-05-09-2.3.0.md b/website/blog/2021-05-09-2.3.0.md index f0ebe593f..0456de9c5 100644 --- a/website/blog/2021-05-09-2.3.0.md +++ b/website/blog/2021-05-09-2.3.0.md @@ -1064,7 +1064,7 @@ interface Foo { #### Fix missing semicolon in `declare export * from …` ([#9767](https://github.com/prettier/prettier/pull/9767) by [@fisker](https://github.com/fisker)) -```jsx +```flow // Input declare export * from "ES6_ExportAllFrom_Source2"; @@ -1079,7 +1079,7 @@ declare export * from "ES6_ExportAllFrom_Source2"; `this` type annotation is supported since [Babel 7.13](https://babeljs.io/blog/2021/02/22/7.13.0#new-flow-features-12193httpsgithubcombabelbabelpull12193-12234httpsgithubcombabelbabelpull12234). -```js +```flow // Input var foo: (this: boolean) => void; @@ -1088,7 +1088,6 @@ SyntaxError: Unexpected token, expected ")" (1:15) // Prettier 2.3 var foo: (this: boolean) => void; - ``` #### Fix range formatting issues ([#10505](https://github.com/prettier/prettier/pull/10505) by [@thorn0](https://github.com/thorn0)) diff --git a/website/blog/2021-09-09-2.4.0.md b/website/blog/2021-09-09-2.4.0.md index ee8c2e8b9..e3c5e7df4 100644 --- a/website/blog/2021-09-09-2.4.0.md +++ b/website/blog/2021-09-09-2.4.0.md @@ -216,7 +216,7 @@ type Example = { #### Always put a semicolon before Flow variance sigils ([#11398](https://github.com/prettier/prettier/pull/11398) by [@noppa](https://github.com/noppa)) -```jsx +```flow // Input class A { +one = function() {}; diff --git a/website/blog/2022-03-16-2.6.0.md b/website/blog/2022-03-16-2.6.0.md index d03633427..b4688f791 100644 --- a/website/blog/2022-03-16-2.6.0.md +++ b/website/blog/2022-03-16-2.6.0.md @@ -520,7 +520,7 @@ type Foo = [ #### Fix Flow's class declaration's `static` indexer formatting ([#12009](https://github.com/prettier/prettier/pull/12009) by [@gkz](https://github.com/gkz)) -```jsx +```flow // Input declare class A { static [string]: boolean; diff --git a/website/blog/2023-07-05-3.0.0.md b/website/blog/2023-07-05-3.0.0.md index 104a4639f..591d005aa 100644 --- a/website/blog/2023-07-05-3.0.0.md +++ b/website/blog/2023-07-05-3.0.0.md @@ -179,7 +179,7 @@ For historical reasons, Prettier used to recognize Flow syntax in JS files when Being a kind of preprocessor, [Flow comments](https://flow.org/blog/2015/02/20/Flow-Comments/) AKA [comment types](https://flow.org/en/docs/types/comments/) are processed on the token level and can't be represented in an AST in the general case. Flow builds the AST as if these special comment tokens didn't exist. Example: -```js +```flow /*:: if */ (x) + y; ``` @@ -1391,7 +1391,7 @@ type Foo = { This behavior has been unified with how TypeScript is formatted. -```jsx +```flow // Input declare function bla (props: { a: boolean, b: string, c: number }): Promise> @@ -1411,7 +1411,7 @@ declare function bla(props: { #### Support conditional type and infer type ([#14573](https://github.com/prettier/prettier/pull/14573) by [@SamChou19815](https://github.com/SamChou19815)) -```jsx +```flow // Input type TestReturnType any> = T extends (...args: any[]) => infer R ? R : any; @@ -1428,9 +1428,9 @@ type TestReturnType any> = T extends ( #### Support Mapped Types and keyof ([#14619](https://github.com/prettier/prettier/pull/14619) by [@jbrown215](https://github.com/jbrown215)) -```jsx +```flow // Input -type Mapped = {[key in keyof O]:number}; +type Mapped = { [key in keyof O]: number }; // Prettier 2.8 // Does not parse @@ -1442,7 +1442,7 @@ type Mapped = { [key in keyof O]: number }; #### Support type guards ([#14767](https://github.com/prettier/prettier/pull/14767) by [@panagosg7](https://github.com/panagosg7)) -```jsx +```flow // Input function isString (x: mixed): x is string { return typeof x === "string"; } diff --git a/website/blog/2023-11-13-3.1.0.md b/website/blog/2023-11-13-3.1.0.md index 2749ce46e..7bb4d6738 100644 --- a/website/blog/2023-11-13-3.1.0.md +++ b/website/blog/2023-11-13-3.1.0.md @@ -431,7 +431,7 @@ type satisfies never; #### Support `as` and `satisfies` expressions for Flow ([#15130](https://github.com/prettier/prettier/pull/15130) by [@gkz](https://github.com/gkz)) -```jsx +```flow // Input const x = y as T; diff --git a/website/blog/2024-06-01-3.3.0.md b/website/blog/2024-06-01-3.3.0.md index 62f3df2b7..da06cee57 100644 --- a/website/blog/2024-06-01-3.3.0.md +++ b/website/blog/2024-06-01-3.3.0.md @@ -16,7 +16,7 @@ If you appreciate Prettier and would like to support our work, please consider s #### `declare namespace` printing support ([#16066](https://github.com/prettier/prettier/pull/16066) by [@SamChou19815](https://github.com/SamChou19815)) -```jsx +```flow // Input declare namespace foo { declare var bar: string; @@ -34,7 +34,7 @@ declare namespace foo { #### Component syntax printing support ([#16191](https://github.com/prettier/prettier/pull/16191) by [@SamChou19815](https://github.com/SamChou19815)) -```jsx +```flow // Input component MyComponent(a: string, b: number) renders SomeComponent { return ; @@ -60,7 +60,7 @@ hook useMyHook(a: string) { Adds support for big int [Flow Enums](https://flow.org/en/docs/enums/). -```jsx +```flow // Input enum E { A = 0n, diff --git a/website/blog/2025-02-09-3.5.0.md b/website/blog/2025-02-09-3.5.0.md index 2b06723b9..d23c5e9ca 100644 --- a/website/blog/2025-02-09-3.5.0.md +++ b/website/blog/2025-02-09-3.5.0.md @@ -169,7 +169,7 @@ br_triggers_expression_break = ( #### Support `const` type parameters in Flow ([#16947](https://github.com/prettier/prettier/pull/16947) by [@gkz](https://github.com/gkz)) -```jsx +```flow function f(): void {} // Prettier 3.4 diff --git a/website/blog/2025-11-27-3.7.0.md b/website/blog/2025-11-27-3.7.0.md index 073547c80..deeacc105 100644 --- a/website/blog/2025-11-27-3.7.0.md +++ b/website/blog/2025-11-27-3.7.0.md @@ -1165,7 +1165,7 @@ type SuperLongTypeNameLoremIpsumLoremIpsumBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBla = #### Add basic support for "match" syntax ([#17681](https://github.com/prettier/prettier/pull/17681) by [@fisker](https://github.com/fisker)) {#change-17681} -```jsx +```flow // Input const e = match (a) { 1 => true, @@ -1192,7 +1192,7 @@ const e = match (a) { #### Add support for opaque type with lower and upper bound ([#17792](https://github.com/prettier/prettier/pull/17792) by [@SamChou19815](https://github.com/SamChou19815)) {#change-17792} -```jsx +```flow // Input opaque type Counter super empty extends Box = Container; opaque type Counter super Box = Container; diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index fe98c2a5b..3c304ccef 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -268,6 +268,7 @@ const config = { "vim", "scss", "less", + "flow", ], theme: prismThemes.github, darkTheme: prismThemes.dracula,