Switch to oxidized flow parser (#19398)

Co-authored-by: fisker <lionkay@gmail.com>

changelog_unreleased/flow/19398.md

@@ -0,0 +1,15 @@
+#### Preserve Flow comment syntax and improve parser performance (#19398 by @SamChou19815)
+
+Prettier now uses Flow's Rust-backed parser. This preserves Flow comment syntax annotations instead of printing them as regular Flow syntax. In local parser-only benchmarks, `flow-parser/oxidized` parsed Prettier's valid Flow fixtures in 266.4ms median time, compared with 422.6ms for the old parser, and parsed `flow_parser.js` in 1298.0ms, compared with 2269.6ms.
+
+<!-- prettier-ignore -->
+```flow
+// Input
+function foo<T>(bar /*: T[] */, baz /*: T */) /*: S */ {}
+
+// Prettier stable
+function foo<T>(bar: T[], baz: T): S {}
+
+// Prettier main
+function foo<T>(bar /*: T[] */, baz /*: T */) /*: S */ {}
+```

package.json

@@ -73,7 +73,7 @@
     "fast-json-stable-stringify": "2.1.0",
     "file-entry-cache": "11.1.3",
     "find-cache-directory": "6.0.0",
-    "flow-parser": "0.318.0",
+    "flow-parser": "0.320.0",
     "get-east-asian-width": "1.6.0",
     "get-stdin": "9.0.0",
     "graphql": "17.0.1",

scripts/build/esbuild-plugins/throw-warnings.js

@@ -110,17 +110,6 @@ export default function esbuildPluginThrowWarnings({
             continue;
           }
 
-          if (
-            [
-              "node_modules/flow-parser/flow_parser.js",
-              "dist/_parser-flow.js.umd.js",
-              "dist/_parser-flow.js.esm.mjs",
-            ].includes(warning.location.file) &&
-            warning.id === "duplicate-case"
-          ) {
-            continue;
-          }
-
           console.log(warning);
           throw new Error(warning.text);
         }

scripts/build/packages/plugin-hermes.js

@@ -1,4 +1,5 @@
 import path from "node:path";
+import { outdent } from "outdent";
 import { DIST_DIR, PACKAGES_DIRECTORY } from "../../utilities/index.js";
 import { createJavascriptModuleBuilder } from "../builders/javascript-module.js";
 import { getPackageFile } from "../utilities.js";
@@ -27,21 +28,25 @@ const mainModule = {
           {
             module: getPackageFile("hermes-parser/dist/HermesParser.js"),
             process(text) {
-              text =
-                'const Buffer = globalThis.Buffer ?? require("buffer/").Buffer;' +
-                text;
+              text = outdent`
+                const Buffer = globalThis.Buffer ?? require("buffer/").Buffer;
+
+                ${text}
+              `;
               return text;
             },
           },
           {
             module: getPackageFile("hermes-parser/dist/HermesParserWASM.js"),
             process(text) {
+              text = outdent`
+                const Buffer = globalThis.Buffer ?? require("buffer/").Buffer;
+
+                ${text}
+              `;
               text = text.replaceAll("process.argv", "[]");
               text = text.replaceAll('require("fs")', "undefined");
               text = text.replaceAll('require("path")', "undefined");
-              text =
-                'const Buffer = globalThis.Buffer ?? require("buffer/").Buffer;' +
-                text;
 
               return text;
             },

scripts/build/packages/prettier.js

@@ -258,29 +258,30 @@ const pluginFiles = [
     input: "src/plugins/flow.js",
     replaceModule: [
       {
-        module: require.resolve("flow-parser"),
+        module: getPackageFile("flow-parser/oxidized/FlowParser.js"),
         process(text) {
-          const { fsModuleNameVariableName } = text.match(
-            /,(?<fsModuleNameVariableName>[\p{ID_Start}_$][\p{ID_Continue}$]*)="fs",/u,
-          ).groups;
+          text = outdent`
+            const Buffer = globalThis.Buffer ?? require("buffer/").Buffer;
 
-          text = text
-            .replaceAll(`require(${fsModuleNameVariableName})`, "{}")
-            .replaceAll('require("fs")', "{}")
-            .replaceAll('require("constants")', "{}");
+            ${text}
+          `;
+          return text;
+        },
+      },
+      {
+        module: getPackageFile("flow-parser/oxidized/FlowParserWASM.js"),
+        process(text) {
+          text = outdent`
+            const Buffer = globalThis.Buffer ?? require("buffer/").Buffer;
 
-          const { globalThisVariableName } = text.match(
-            /\(function\((?<globalThisVariableName>[\p{ID_Start}$][\p{ID_Continue}$]*)\)\{"use strict";/u,
-          ).groups;
-
-          // flow-parser adds a global error handler cause the error stack been huge
-          // https://github.com/facebook/flow/issues/9299
-          // NOTE: Can't reproduce in flow-parser@0.298.0, but the code still there
-          // NOTE2: This is not tested
-          text = text.replaceAll(`${globalThisVariableName}.process`, "({})");
+            ${text}
+          `;
+          text = text.replaceAll("process.argv", "[]");
+          text = text.replaceAll('require("fs")', "undefined");
+          text = text.replaceAll('require("path")', "undefined");
           text = text.replaceAll(
-            `${globalThisVariableName}.addEventListener`,
-            "(() =>{})",
+            'require("crypto")',
+            `require(${JSON.stringify(path.join(import.meta.dirname, "../shims/crypto-random-fill-sync.cjs"))})`,
           );
 
           return text;

scripts/build/shims/crypto-random-fill-sync.cjs

@@ -0,0 +1,25 @@
+"use strict";
+
+// eslint-disable-next-line no-redeclare
+const { crypto } = globalThis;
+
+if (crypto && typeof crypto.getRandomValues === "function") {
+  module.exports = {
+    randomFillSync(view) {
+      crypto.getRandomValues(view);
+      return view;
+    },
+  };
+}
+
+let state = 0x9e3779b9;
+module.exports = {
+  randomFillSync(view) {
+    for (let index = 0; index < view.length; index++) {
+      state = Math.imul(state ^ (state >>> 15), state | 1);
+      state ^= state + Math.imul(state ^ (state >>> 7), state | 61);
+      view[index] = (state ^ (state >>> 14)) & 255;
+    }
+    return view;
+  },
+};

scripts/generate-flow-estree-type-definition.js

@@ -6,7 +6,7 @@ import * as prettier from "../node_modules/prettier/index.mjs";
 
 const PROJECT_ROOT = new URL("../", import.meta.url);
 const FLOW_TYPES = new URL(
-  "./node_modules/hermes-estree/dist/types.js.flow",
+  "./node_modules/flow-estree/dist/types.js.flow",
   PROJECT_ROOT,
 );
 const FLOW_TYPES_DTS = new URL(
@@ -63,7 +63,7 @@ if (diagnostics.length > 0) {
 
 function toDts(text) {
   // Useless directive
-  text = text.replaceAll("'use strict';", "  ");
+  text = text.replaceAll("'use strict';", "");
 
   // `{+foo: string}` -> `{foo: string}`
   text = text.replaceAll(/(?<=\n)(?<indention>[ {2}]+)\+/g, "$<indention>");
@@ -77,18 +77,12 @@ function toDts(text) {
     "$<type> & ",
   );
 
-  // `$ReadOnlyArray<?T>` -> `ReadonlyArray<T | null>`
+  // `ReadonlyArray<?T>` -> `ReadonlyArray<T | null>`
   text = text.replaceAll(
-    /\$ReadOnlyArray<\?(\w+)>/g,
-    "ReadonlyArray<$1 | null>",
+    /ReadonlyArray<\?(?<type>\w+)>/g,
+    "ReadonlyArray<$<type> | null>",
   );
 
-  // `$ReadOnlyArray<T>` -> `ReadonlyArray<T>`
-  text = text.replaceAll("$ReadOnlyArray<", "ReadonlyArray<");
-
-  // `$ReadOnly<T>` -> `Readonly<T>`
-  text = text.replaceAll("$ReadOnly<", "Readonly<");
-
   // `{[string]: T}` -> `{[key: string]: T}`
   text = text.replaceAll(
     /(?<=\n)(?<indention>[ {2}]+)\[(?<type>string)\](?=: )/g,

scripts/sync-flow-tests.cjs

@@ -2,7 +2,7 @@
 
 const fs = require("fs");
 const path = require("path");
-const flowParser = require("flow-parser");
+const { parse: flowParse } = require("flow-parser/oxidized");
 const fastGlob = require("fast-glob");
 
 const DEFAULT_SPEC_CONTENT = "runFormatTest(import.meta);\n";
@@ -11,15 +11,19 @@ const FLOW_TESTS_DIR = path.join(__dirname, "../tests/format/flow/flow-repo");
 
 function tryParse(file, content) {
   // Keep this sync with `/src/language-js/parse/flow.js`
-  const ast = flowParser.parse(content, {
-    comments: false,
-    enums: true,
-    match: true,
-    components: true,
-    // assert_operator: true,
-    esproposal_decorators: true,
-    pattern_matching: true,
-    records: true,
+  const ast = flowParse(content, {
+    sourceFilename: file,
+    flow: "all",
+    babel: false,
+    tokens: false,
+    allowReturnOutsideFunction: true,
+    enableEnums: true,
+    enableExperimentalFlowMatchSyntax: true,
+    enableExperimentalComponentSyntax: true,
+    // assertOperator: true,
+    enableExperimentalDecorators: true,
+    enableExperimentalFlowRecordSyntax: true,
+    throwOnParseErrors: false,
   });
 
   if (ast.errors.length > 0) {

src/language-js/parentheses/needs-parentheses.js

@@ -380,10 +380,12 @@ function needsParentheses(path, options) {
         (key === "constraint" &&
           node.type === "TSConditionalType" &&
           parent.type === "TSTypeParameter") ||
-        (key === "bound" &&
+        (key === "typeAnnotation" &&
           node.type === "ConditionalTypeAnnotation" &&
-          parent.type === "TypeParameter" &&
-          parent.usesExtendsBound)
+          parent.type === "TypeAnnotation" &&
+          path.grandparent.type === "TypeParameter" &&
+          path.grandparent.bound === parent &&
+          path.grandparent.usesExtendsBound)
       ) {
         return true;
       }

src/language-js/parse/flow.js

@@ -1,55 +1,47 @@
-import flowParser from "flow-parser";
+import { parse as flowParse } from "flow-parser/oxidized/index.js";
 import createError from "../../common/parser-create-error.js";
 import postprocess from "./postprocess/index.js";
 import createParser from "./utilities/create-parser.js";
 
-// https://github.com/facebook/flow/tree/main/packages/flow-parser#options
+// https://github.com/facebook/flow/blob/7c64d4b077bc6fc45c12cee3cfa7368fdb2186ce/packages/flow-parser/oxidized-src/ParserOptions.js#L15
 // Keep this sync with `/scripts/sync-flow-test.js`
 const parseOptions = {
-  /* Basic options */
-  // `types` (boolean, default true) - enable parsing of Flow types
-  // types: true,
-  // `use_strict` (boolean, default false) - treat the file as strict, without needing a "use strict" directive
-  // use_strict: false,
-  // `comments` (boolean, default `true`) - attach comments to AST nodes (`leadingComments` and `trailingComments`)
-  comments: false,
-  // `all_comments` (boolean, default `true`) - include a list of all comments from the whole program
-  // all_comments: true,
-  // `tokens` (boolean, default `false`) - include a list of all parsed tokens in a top-level `tokens` property
-  // tokens: false,
-
-  /* Language features */
-  // `enums` (boolean, default `false`) - enable parsing of enums https://flow.org/en/docs/enums/
-  enums: true,
-  // `match` (boolean, default `false`) - enable parsing of match expressions and match statements https://flow.org/en/docs/match/
-  match: true,
-  // `components` (boolean, default `false`) - enable parsing of Flow component syntax
-  components: true,
+  flow: "all",
+  babel: false,
+  tokens: false,
+  allowReturnOutsideFunction: true,
+  // `enableEnums` (boolean, default `true`) - enable parsing of enums https://flow.org/en/docs/enums/
+  enableEnums: true,
+  // `enableExperimentalFlowMatchSyntax` (boolean, default `true`) - enable parsing of match expressions and match statements https://flow.org/en/docs/match/
+  enableExperimentalFlowMatchSyntax: true,
+  // `enableExperimentalComponentSyntax` (boolean, default `true`) - enable parsing of Flow component syntax
+  enableExperimentalComponentSyntax: true,
   // TODO: Support it
-  // `assert_operator` (boolean, default `false`) - enable parsing of the assert operator
-  // assert_operator: true,
-  // `esproposal_decorators` (boolean, default `false`) - enable parsing of decorators
-  esproposal_decorators: true,
-  // Undocumented
-  pattern_matching: true,
-  // Undocumented
-  records: true,
+  // `assertOperator` (boolean, default `false`) - enable parsing of the assert operator
+  // assertOperator: true,
+  // `enableExperimentalDecorators` (boolean, default `true`) - enable parsing of decorators
+  enableExperimentalDecorators: true,
+  // `enableExperimentalFlowRecordSyntax` (boolean, default `true`) - enable parsing of records
+  enableExperimentalFlowRecordSyntax: true,
 };
 
 function createParseError(error) {
-  const { message, loc } = error;
+  let { message, loc } = error;
 
   /* c8 ignore next 3 */
   if (!loc) {
     return error;
   }
 
-  const { start, end } = loc;
+  const { line, column } = loc;
+  const suffix = ` (${line}:${column})`;
+  if (message.endsWith(suffix)) {
+    message = message.slice(0, -suffix.length);
+  }
 
   return createError(message, {
     loc: {
-      start: { line: start.line, column: start.column + 1 },
-      end: { line: end.line, column: end.column + 1 },
+      start: { line, column: column + 1 },
     },
     cause: error,
   });
@@ -57,13 +49,16 @@ function createParseError(error) {
 
 function parse(text, options) {
   const filepath = options?.filepath;
+  const sourceFilename =
+    typeof filepath === "string" ? filepath : "prettier.js.flow";
 
-  const ast = flowParser.parse(text, {
-    filename: typeof filepath === "string" ? filepath : "prettier.js.flow",
-    ...parseOptions,
-  });
-  const [error] = ast.errors;
-  if (error) {
+  let ast;
+  try {
+    ast = flowParse(text, {
+      sourceFilename,
+      ...parseOptions,
+    });
+  } catch (error) {
     throw createParseError(error);
   }
 

src/language-js/parse/postprocess/index.js

@@ -181,14 +181,6 @@ function postprocess(ast, options) {
             delete node.assertions;
           }
           break;
-
-        // Since flow@0.313.0, `TypeParameter.bound` is a bare type node without the `TypeAnnotation` wrapper
-        // https://github.com/facebook/flow/blob/HEAD/Changelog.md#03130
-        case "TypeParameter":
-          if (astType !== "flow" && node.bound?.type === "TypeAnnotation") {
-            node.bound = node.bound.typeAnnotation;
-          }
-          break;
       }
     },
     onLeave(node) {

src/language-js/print/type-parameters.js

@@ -161,8 +161,6 @@ function printTypeParameter(path, options, print) {
   if (node.bound) {
     if (node.usesExtendsBound) {
       parts.push(" extends ");
-    } else {
-      parts.push(": ");
     }
 
     parts.push(printTypeAnnotationProperty(path, print, "bound"));

src/language-js/traverse/visitor-keys.evaluate.js

@@ -1,7 +1,7 @@
 import { VISITOR_KEYS as babelVisitorKeys } from "@babel/types";
 import { visitorKeys as tsVisitorKeys } from "@typescript-eslint/visitor-keys";
 import { visitorKeys as angularVisitorKeys } from "angular-estree-parser";
-import flowVisitorKeys from "hermes-parser/dist/generated/ESTreeVisitorKeys.js";
+import { FlowVisitorKeys as flowVisitorKeys } from "flow-parser/oxidized/index.js";
 import {
   addVisitorKeys,
   generateReferenceSharedVisitorKeys,
@@ -21,15 +21,6 @@ const additionalVisitorKeys = {
   TSJSDocUnknownType: [],
   TSJSDocNullableType: ["typeAnnotation"],
   TSJSDocNonNullableType: ["typeAnnotation"],
-
-  // Flow
-  // `SatisfiesExpression` is a private feature https://github.com/facebook/hermes/issues/1808#issuecomment-3392476828
-  SatisfiesExpression: ["expression", "typeAnnotation"],
-
-  // https://github.com/facebook/flow/commit/9c815177852e5695c02306c86830a865223c9fb5
-  EnumBody: ["members"],
-
-  DeclareVariable: ["declarations"],
 };
 
 const excludeVisitorKeys = {
@@ -48,6 +39,26 @@ const excludeNodeTypes = [
   // https://github.com/typescript-eslint/typescript-eslint/blob/d2d7ace4e52bedf07482fd879d8e31a52b38fc26/packages/visitor-keys/tests/visitor-keys.test.ts#L14-L18
   "ExperimentalRestProperty",
   "ExperimentalSpreadProperty",
+
+  // From flow-parser
+  "AbstractMethodDefinition",
+  "AbstractPropertyDefinition",
+  "ConstructorTypeAnnotation",
+  "DeclareClassExtendsCall",
+  "DeclareMethodDefinition",
+  "ExportAssignment",
+  "ExternalModuleReference",
+  "ImportEqualsDeclaration",
+  "ImportType",
+  "NamespaceExportDeclaration",
+  "NonNullExpression",
+  "ObjectTypePrivateField",
+  "ParameterProperty",
+  "RendersMaybeType",
+  "RendersStarType",
+  "RendersType",
+  "TemplateLiteralTypeAnnotation",
+  "TupleTypeElement",
 ];
 
 let visitorKeys = unionVisitorKeys(

src/language-js/types/flow-estree.d.ts

@@ -1,5 +1,5 @@
 // ! Do NOT edit !
-// Generated from 'node_modules/hermes-estree/dist/types.js.flow'
+// Generated from 'node_modules/flow-estree/dist/types.js.flow'
 // Run `node scripts/generate-flow-estree-type-definition.js` to update
 // spell-checker: disable
 
@@ -11,6 +11,50 @@
  *
  * @flow strict
  * @format
+ * @generated
+ */
+
+/*
+ * !!! GENERATED FILE !!!
+ *
+ * DESIGN NOTE — please read before editing.
+ *
+ * This file is a VERBATIM MIRROR of upstream
+ *   xplat/static_h/tools/hermes-parser/js/hermes-estree/src/types.js
+ * with our header swapped in. It is **not** schema-derived generation —
+ * the body is byte-for-byte from upstream after the upstream header is
+ * stripped. The `@generated` tag means "do not hand-edit" — to update,
+ * edit upstream's types.js (or upstream the change first) and re-run the
+ * regeneration command below.
+ *
+ * The codegen step ALSO performs a SCHEMA cross-check: every concrete
+ * NodeDef in `node_kinds.rs` must have a matching `export interface` or
+ * `export type` in upstream's types.js (or appear in
+ * `KNOWN_TYPES_WITHOUT_INTERFACE` in codegen.rs with attribution). On any
+ * drift, codegen FAILS the build with a non-zero exit and lists the
+ * missing kinds. There is no synthesis or soft-warning path — upstream
+ * already contains all Flow-only nodes today, so the cross-check exists
+ * solely to prevent future drift between the Rust SCHEMA and upstream.
+ *
+ * Schema-derivable per-node interfaces are NOT independently generated
+ * because upstream's interfaces carry hand-curated child unions (e.g.
+ * `Expression`, `Statement`, `BindingName`, `MemberExpression` refinement
+ * splits, `MethodDefinition` discriminator splits, per-property
+ * nullability) that the Rust schema does not encode and should not encode
+ * — the Rust schema is the source of truth for *binary serialization*
+ * between the Rust parser and the JS deserializer; the upstream Flow
+ * types are the source of truth for *consumer typings*. See
+ * `generate_estree_types` in `flow_parser_wasm/src/bin/codegen.rs` for
+ * the implementation.
+ *
+ * To regenerate (run from the fbsource root):
+ *
+ *   buck run fbcode//flow/rust_port/crates/flow_parser_wasm:codegen -- \
+ *     --estree-types > \
+ *     fbcode/flow/packages/flow-estree/src/types.js
+ *
+ * To regenerate against a different upstream copy, set
+ * `HERMES_ESTREE_TYPES_JS` to an absolute path before invoking codegen.
  */
 
 /**
@@ -1793,12 +1837,14 @@ export interface DeclareHook extends BaseNode {
       typeAnnotation: HookTypeAnnotation;
     };
   };
+  implicitDeclare: boolean;
 }
 
 export interface DeclareVariable extends BaseNode {
   type: "DeclareVariable";
-  id: Identifier;
+  declarations: ReadonlyArray<VariableDeclarator>;
   kind: "var" | "let" | "const";
+  implicitDeclare: boolean;
 }
 
 export interface DeclareEnum extends BaseNode {
@@ -1815,6 +1861,7 @@ export interface DeclareFunction extends BaseNode {
       typeAnnotation: FunctionTypeAnnotation;
     };
   };
+  implicitDeclare: boolean;
   predicate: InferredPredicate | DeclaredPredicate | null;
 }
 
@@ -1826,8 +1873,11 @@ export interface DeclareModule extends BaseNode {
 
 export interface DeclareNamespace extends BaseNode {
   type: "DeclareNamespace";
+  global: boolean;
   id: Identifier;
   body: BlockStatement;
+  implicitDeclare: boolean;
+  keyword: "namespace" | "module";
 }
 
 export interface DeclareInterface extends BaseInterfaceDeclaration {

tests/config/format-test/failed-format-tests.js

@@ -16,7 +16,9 @@ const unstableTests = new Map(
       (options) => options.proseWrap === "always",
     ],
     "flow/hook/declare-hook.js",
+    "flow/hook/comments-before-arrow.js",
     "flow/hook/hook-type-annotation.js",
+    "flow/comments/type_annotations.js",
     "typescript/prettier-ignore/mapped-types.ts",
     "typescript/prettier-ignore/issue-14238.ts",
     "js/for-of/comments.js",

tests/format/flow/_errors_/__snapshots__/format.test.js.snap

@@ -5,36 +5,41 @@ exports[`async-arrow-invalid.js format 1`] = `
   2 |
   3 | <T> async () => {}
 > 4 |
-    | ^"
+    | ^
+Cause: Unexpected token ILLEGAL (4:0)"
 `;
 
 exports[`function-async.js format 1`] = `
 "Unexpected token \`;\`, expected the token \`=>\` (2:11)
   1 | // Flow can't parse this since \`v0.128.0\`, #8661
 > 2 | async<T>();
-    |           ^"
+    |           ^
+Cause: Unexpected token \`;\`, expected the token \`=>\` (2:10)"
 `;
 
 exports[`invalid_keyword_symbol.js format 1`] = `
 "Unexpected reserved type (1:6)
 > 1 | type symbol = number;
-    |      ^^^^^^
-  2 |"
+    |      ^
+  2 |
+Cause: Unexpected reserved type (1:5)"
 `;
 
 exports[`module-attributes-static.js format 1`] = `
 "Unexpected token \`type\`, expected the token \`{\` (1:33)
 > 1 | import foo from "foo.json" with type: "json";
-    |                                 ^^^^
-  2 |"
+    |                                 ^
+  2 |
+Cause: Unexpected token \`type\`, expected the token \`{\` (1:32)"
 `;
 
 exports[`newline-before-arrow.js format 1`] = `
 "Illegal newline before arrow (2:1)
   1 | async x
 > 2 | => x
-    | ^^
-  3 |"
+    | ^
+  3 |
+Cause: Illegal newline before arrow (2:0)"
 `;
 
 exports[`number.js format 1`] = `
@@ -42,13 +47,15 @@ exports[`number.js format 1`] = `
   1 | // https://github.com/babel/babel/pull/11854
   2 |
 > 3 | a = 09e1_1;
-    |     ^^^^
-  4 |"
+    |     ^
+  4 |
+Cause: Unexpected token ILLEGAL (3:4)"
 `;
 
 exports[`spread-with-optional.js format 1`] = `
 "Tuple spread elements cannot be optional. (1:17)
 > 1 | type T = [...foo?: S]; // ERROR
     |                 ^
-  2 |"
+  2 |
+Cause: Tuple spread elements cannot be optional. (1:16)"
 `;

tests/format/flow/_errors_/ambient/__snapshots__/format.test.js.snap

@@ -3,13 +3,15 @@
 exports[`ambient.js format 1`] = `
 "Const must be initialized (1:7)
 > 1 | const foo: string;
-    |       ^^^^^^^^^^^
-  2 |"
+    |       ^
+  2 |
+Cause: Const must be initialized (1:6)"
 `;
 
 exports[`ambient.unknown format 1`] = `
 "Const must be initialized (1:7)
 > 1 | const foo: string;
-    |       ^^^^^^^^^^^
-  2 |"
+    |       ^
+  2 |
+Cause: Const must be initialized (1:6)"
 `;

tests/format/flow/_errors_/import-reflection/__snapshots__/format.test.js.snap

@@ -3,15 +3,17 @@
 exports[`valid-flow-default-import.js format 1`] = `
 "Unexpected identifier, expected the keyword \`from\` (1:15)
 > 1 | import module foo from "./module.wasm";
-    |               ^^^
+    |               ^
   2 | import bar from "./module.wasm";
-  3 |"
+  3 |
+Cause: Unexpected identifier, expected the keyword \`from\` (1:14)"
 `;
 
 exports[`valid-ts-default-import.js format 1`] = `
 "Unexpected identifier, expected the keyword \`from\` (1:15)
 > 1 | import module foo from "./module.wasm";
-    |               ^^^
+    |               ^
   2 | import bar from "./module.wasm";
-  3 |"
+  3 |
+Cause: Unexpected identifier, expected the keyword \`from\` (1:14)"
 `;

tests/format/flow/_errors_/interface/__snapshots__/format.test.js.snap

@@ -10,7 +10,8 @@ Cause: Unexpected token, expected "{" (1:12)"
 exports[`snippet: #0 format[flow] 1`] = `
 "Unexpected identifier, expected the token \`{\` (1:13)
 > 1 | interface A mixins B {}
-    |             ^^^^^^"
+    |             ^
+Cause: Unexpected identifier, expected the token \`{\` (1:12)"
 `;
 
 exports[`snippet: #1 format[babel-flow] 1`] = `
@@ -23,7 +24,8 @@ Cause: Unexpected token, expected "{" (1:12)"
 exports[`snippet: #1 format[flow] 1`] = `
 "Unexpected identifier, expected the token \`{\` (1:13)
 > 1 | interface A implements B {}
-    |             ^^^^^^^^^^"
+    |             ^
+Cause: Unexpected identifier, expected the token \`{\` (1:12)"
 `;
 
 exports[`snippet: #2 format[babel-flow] 1`] = `
@@ -36,7 +38,8 @@ Cause: Unexpected token, expected "{" (1:20)"
 exports[`snippet: #2 format[flow] 1`] = `
 "Unexpected identifier, expected the token \`{\` (1:21)
 > 1 | declare interface A mixins B {}
-    |                     ^^^^^^"
+    |                     ^
+Cause: Unexpected identifier, expected the token \`{\` (1:20)"
 `;
 
 exports[`snippet: #3 format[babel-flow] 1`] = `
@@ -49,5 +52,6 @@ Cause: Unexpected token, expected "{" (1:20)"
 exports[`snippet: #3 format[flow] 1`] = `
 "Unexpected identifier, expected the token \`{\` (1:21)
 > 1 | declare interface A implements B {}
-    |                     ^^^^^^^^^^"
+    |                     ^
+Cause: Unexpected identifier, expected the token \`{\` (1:20)"
 `;

tests/format/flow/_errors_/invalid-match/__snapshots__/format.test.js.snap

@@ -3,7 +3,8 @@
 exports[`snippet: #0 format[flow] 1`] = `
 "\`match\` argument must not be empty (1:7)
 > 1 | match () {}
-    |       ^^"
+    |       ^
+Cause: \`match\` argument must not be empty (1:6)"
 `;
 
 exports[`snippet: #0 format[hermes] 1`] = `
@@ -18,7 +19,8 @@ match () {}
 exports[`snippet: #1 format[flow] 1`] = `
 "\`match\` argument cannot contain spread elements (1:8)
 > 1 | match (...b) {}
-    |        ^^^^"
+    |        ^
+Cause: \`match\` argument cannot contain spread elements (1:7)"
 `;
 
 exports[`snippet: #1 format[hermes] 1`] = `

tests/format/flow/_errors_/record/__snapshots__/format.test.js.snap

@@ -3,7 +3,8 @@
 exports[`snippet: #0 format[flow] 1`] = `
 "Unexpected token \`{\`, expected the token \`;\` (1:24)
 > 1 | const a = not_a_record {}
-    |                        ^"
+    |                        ^
+Cause: Unexpected token \`{\`, expected the token \`;\` (1:23)"
 `;
 
 exports[`snippet: #0 format[hermes] 1`] = `

tests/format/flow/comments/__snapshots__/format.test.js.snap

@@ -17,14 +17,14 @@ const run = (cmd /*: string */) /*: Promise<void> */ => {}
 
 =====================================output=====================================
 // Error
-const a = (data: Object) => {};
+const a = (data /*: Object */) => {};
 
 // OK
-const b = (data: Object, secondData: Object) => {};
+const b = (data /*: Object */, secondData /*: Object */) => {};
 
-const c = (data: /* this is an object */ Object) => {};
+const c = (data /*: /* this is an object *-/ Object */) => {};
 
-const run = (cmd: string): Promise<void> => {};
+const run = (cmd /*: string */) /*: Promise<void> */ => {};
 
 ================================================================================
 `;
@@ -44,11 +44,11 @@ parsers: ["flow"]
 (a : c /* b */ );
 
 =====================================output=====================================
+a; /* b */ /*: c */
 (a /* b */ : c);
-(a /* b */ : c);
-(a /* b */ : c);
-(a /* b */ : c);
-(a /* b */ : c);
+a; /* b */ /*  : c */
+a; /* b */ /*:: : c */
+a; /* b */ /*  :: : c */
 
 (a: /* b */ c);
 (a: c /* b */);
@@ -69,9 +69,9 @@ class A {
 
 =====================================output=====================================
 class A {
-  x: string;
+  x; /*: string */
 
-  method(a: T, b: T): T {}
+  method(a /*: T */, b /*: T */) /*: T */ {}
 }
 
 ================================================================================
@@ -85,7 +85,7 @@ parsers: ["flow"]
 function foo<T>(bar  /*: T[] */, baz  /*: T */) /*: S */ {}
 
 =====================================output=====================================
-function foo<T>(bar: T[], baz: T): S {}
+function foo<T>(bar /*: T[] */, baz /*: T */) /*: S */ {}
 
 ================================================================================
 `;
@@ -104,10 +104,10 @@ function f2(a : /* b */ c ){}
 function f2(a : c /* b */ ){}
 
 =====================================output=====================================
-function f1(a /* b */ : c) {}
+function f1(a /* b */ /*: c */) {}
 function f2(a /* b */ : c) {}
-function f3(a /* b */ : c) {}
-function f4(a /* b */ : c) {}
+function f3(a /* b */ /*  : c */) {}
+function f4(a /* b */ /*:: : c */) {}
 
 function f2(a: /* b */ c) {}
 function f2(a: c /* b */) {}
@@ -133,17 +133,17 @@ foo/*::<bar>*/(baz);
 foo/*::<bar>*/();
 
 =====================================output=====================================
-const Component = branch<Props, ExternalProps>(
-  ({ src }) => !src,
+const Component = branch(
+  /*::     <Props, ExternalProps> */ ({ src }) => !src,
   // $FlowFixMe
   renderNothing,
 )(BaseComponent);
 
-const C = b<A>(foo) + c<B>(bar);
+const C = b(/*:: <A> */ foo) + c(/*:: <B> */ bar);
 
-foo<bar>(baz);
+foo(/*::<bar>*/ baz);
 
-foo<bar>();
+foo /*::<bar>*/();
 
 ================================================================================
 `;
@@ -257,8 +257,8 @@ let foo /*: Groups<T> */;
 let bar /*: string */ = 'a';
 
 =====================================output=====================================
-let foo: Groups<T>;
-let bar: string = "a";
+let foo; /*: Groups<T> */
+let bar /*: string */ = "a";
 
 ================================================================================
 `;
@@ -321,18 +321,18 @@ new (window.Request/*: Class<Request> */)("");
 const x = (input /*: string */) /*: string */ => {};
 
 =====================================output=====================================
-new (window.Request: Class<Request>)("");
+new window.Request /*: Class<Request> */("");
 
-(this: any).foo = 5;
+this /*: any */.foo = 5;
 
-(this: any).foo = 5;
+this /*    : any */.foo = 5;
 
 // This next example illustrates that Prettier will not remove a line break
 // and unintentionally create a type annotation that was not there before.
 this /*
 : any */.foo = 5;
 
-const x = (input: string): string => {};
+const x = (input /*: string */) /*: string */ => {};
 
 ================================================================================
 `;
@@ -347,7 +347,7 @@ class Foo {
   bar( data: Array<string>) {}
 }
 =====================================output=====================================
-foo<bar>(baz);
+foo(/*::<bar>*/ baz);
 class Foo {
   bar(data: Array<string>) {}
 }
@@ -371,7 +371,10 @@ type PropTypes = {|
 |};
 =====================================output=====================================
 import type { OneType } from "./oneFile.js";
-import type { HelloType } from "./otherFile.js";
+/*::
+import type { HelloType } from './otherFile.js'
+*/
+
 type PropTypes = {|
   TestComponent: React.AbstractComponent<any>,
   hello: HelloType,

tests/format/flow/flow-repo/union_new/__snapshots__/format.test.js.snap

@@ -43,7 +43,7 @@ type Children = Array<Child>;
 class Thunk {}
 class VirtualNode {
   children: Child | Children;
-  constructor(type, children: Children) {
+  constructor(type, children /*:Children*/) {
     this.children = children.length === 1 ? children[0] : children;
   }
 }

tests/format/flow/hook/__snapshots__/format.test.js.snap

@@ -50,7 +50,7 @@ a = () /*
 1 *\\/ => void
 \`\`\`
 */
-type A1 = hook () => /* 11 */ void;
+type A1 = /* 11 */ hook () => void;
 type A2 = hook () => /* 12 */ void;
 type A3 = hook () => /* 13 */ void;
 

tests/format/flow/ternary/__snapshots__/format.test.js.snap

@@ -55,5 +55,6 @@ exports[`arrows.js format[flow] 1`] = `
     |                      ^
   7 | (a ? (b += c) : d => e); // a ? (b += c) : (d => e)
   8 |
-  9 | (a ? (b = c) : d => e : f); // a ? ((b = c): d => e) : f"
+  9 | (a ? (b = c) : d => e : f); // a ? ((b = c): d => e) : f
+Cause: Unexpected token \`)\`, expected the token \`:\` (6:21)"
 `;

tests/format/flow/type-parameters/flow-only/__snapshots__/format.test.js.snap

@@ -51,8 +51,8 @@ type A</* comment */T :string> = B;
 type A<T: string /* comment */> = B;
 type A<T: /* comment */ string> = B;
 type A<T: /* comment */ string> = B;
-type A<T: /* comment */ string> = B;
-type A<T: /* comment */ string> = B;
+type A<T /* comment */ : string> = B;
+type A<T /* comment */ : string> = B;
 type A</* comment */ T: string> = B;
 
 ================================================================================

tests/format/js/_errors_/async-await/__snapshots__/format.test.js.snap

@@ -53,13 +53,15 @@ exports[`snippet: #0 format[flow] 1`] = `
   1 | async function foo() {
 > 2 |   function bar(x = await 2) {}
     |                          ^
-  3 | }"
+  3 | }
+Cause: Unexpected number, expected the token \`,\` (2:25)"
 `;
 
 exports[`snippet: #0 format[flow] 2`] = `
 "\`await\` is not allowed in async function parameters. (1:12)
 > 1 | async (x = await (2)) => {};
-    |            ^^^^^"
+    |            ^
+Cause: \`await\` is not allowed in async function parameters. (1:11)"
 `;
 
 exports[`snippet: #0 format[meriyah] 1`] = `
@@ -95,7 +97,8 @@ Cause: Await expression cannot be a default value"
 exports[`snippet: #1 format[flow] 1`] = `
 "\`await\` is not allowed in async function parameters. (1:12)
 > 1 | async (x = await 2) => {};
-    |            ^^^^^"
+    |            ^
+Cause: \`await\` is not allowed in async function parameters. (1:11)"
 `;
 
 exports[`snippet: #1 format[meriyah] 1`] = `
@@ -129,7 +132,8 @@ Cause: Unexpected token !"
 exports[`snippet: #2 format[flow] 1`] = `
 "Unexpected token \`!\`, expected the end of an expression statement (\`;\`) (1:25)
 > 1 | f = async (a) => await a! ** 6;
-    |                         ^"
+    |                         ^
+Cause: Unexpected token \`!\`, expected the end of an expression statement (\`;\`) (1:24)"
 `;
 
 exports[`snippet: #2 format[meriyah] 1`] = `
@@ -163,7 +167,8 @@ Cause: Unexpected token !"
 exports[`snippet: #3 format[flow] 1`] = `
 "Unexpected token \`!\`, expected the end of an expression statement (\`;\`) (1:14)
 > 1 | f = (a) => +a! ** 6;
-    |              ^"
+    |              ^
+Cause: Unexpected token \`!\`, expected the end of an expression statement (\`;\`) (1:13)"
 `;
 
 exports[`snippet: #3 format[meriyah] 1`] = `
@@ -197,7 +202,8 @@ Cause: Unexpected token !"
 exports[`snippet: #4 format[flow] 1`] = `
 "Unexpected token \`!\`, expected the token \`)\` (1:22)
 > 1 | async (a) => (await a!) ** 6;
-    |                      ^"
+    |                      ^
+Cause: Unexpected token \`!\`, expected the token \`)\` (1:21)"
 `;
 
 exports[`snippet: #4 format[meriyah] 1`] = `
@@ -231,7 +237,8 @@ Cause: Unexpected token **"
 exports[`snippet: #5 format[flow] 1`] = `
 "Invalid left-hand side in exponentiation expression (1:2)
 > 1 | (-+5 ** 6);
-    |  ^^^"
+    |  ^
+Cause: Invalid left-hand side in exponentiation expression (1:1)"
 `;
 
 exports[`snippet: #5 format[meriyah] 1`] = `
@@ -265,7 +272,8 @@ Cause: Unexpected token **"
 exports[`snippet: #6 format[flow] 1`] = `
 "Invalid left-hand side in exponentiation expression (1:17)
 > 1 | f = async () => await 5 ** 6;
-    |                 ^^^^^^^"
+    |                 ^
+Cause: Invalid left-hand side in exponentiation expression (1:16)"
 `;
 
 exports[`snippet: #6 format[meriyah] 1`] = `
@@ -299,7 +307,8 @@ Cause: Unexpected token **"
 exports[`snippet: #7 format[flow] 1`] = `
 "Invalid left-hand side in exponentiation expression (1:17)
 > 1 | f = async () => await -5 ** 6;
-    |                 ^^^^^^^^"
+    |                 ^
+Cause: Invalid left-hand side in exponentiation expression (1:16)"
 `;
 
 exports[`snippet: #7 format[meriyah] 1`] = `
@@ -333,7 +342,8 @@ Cause: Shorthand property assignments are valid only in destructuring patterns"
 exports[`snippet: #8 format[flow] 1`] = `
 "Unexpected token \`=\` (1:15)
 > 1 | async({ foo33 = 1 });
-    |               ^"
+    |               ^
+Cause: Unexpected token \`=\` (1:14)"
 `;
 
 exports[`snippet: #8 format[meriyah] 1`] = `

tests/format/js/_errors_/class-property-named-constructor/__snapshots__/format.test.js.snap

@@ -40,8 +40,9 @@ exports[`snippet: #0 format[flow] 1`] = `
 "Classes may not have fields named \`constructor\`. (2:3)
   1 | class Foo {
 > 2 |   constructor
-    |   ^^^^^^^^^^^
-  3 | }"
+    |   ^
+  3 | }
+Cause: Classes may not have fields named \`constructor\`. (2:2)"
 `;
 
 exports[`snippet: #0 format[hermes] 1`] = `
@@ -129,8 +130,9 @@ exports[`snippet: #1 format[flow] 1`] = `
 "Classes may not have fields named \`constructor\`. (2:3)
   1 | class Foo {
 > 2 |   'constructor'
-    |   ^^^^^^^^^^^^^
-  3 | }"
+    |   ^
+  3 | }
+Cause: Classes may not have fields named \`constructor\`. (2:2)"
 `;
 
 exports[`snippet: #1 format[hermes] 1`] = `
@@ -218,8 +220,9 @@ exports[`snippet: #2 format[flow] 1`] = `
 "Classes may not have fields named \`constructor\`. (2:3)
   1 | class Foo {
 > 2 |   'constructor'
-    |   ^^^^^^^^^^^^^
-  3 | }"
+    |   ^
+  3 | }
+Cause: Classes may not have fields named \`constructor\`. (2:2)"
 `;
 
 exports[`snippet: #2 format[hermes] 1`] = `
@@ -307,8 +310,9 @@ exports[`snippet: #3 format[flow] 1`] = `
 "Unexpected string, expected the token \`(\` (2:12)
   1 | class Foo {
 > 2 |   accessor 'constructor'
-    |            ^^^^^^^^^^^^^
-  3 | }"
+    |            ^
+  3 | }
+Cause: Unexpected string, expected the token \`(\` (2:11)"
 `;
 
 exports[`snippet: #3 format[hermes] 1`] = `
@@ -396,8 +400,9 @@ exports[`snippet: #4 format[flow] 1`] = `
 "Unexpected string, expected the token \`(\` (2:12)
   1 | class Foo {
 > 2 |   accessor 'constructor'
-    |            ^^^^^^^^^^^^^
-  3 | }"
+    |            ^
+  3 | }
+Cause: Unexpected string, expected the token \`(\` (2:11)"
 `;
 
 exports[`snippet: #4 format[hermes] 1`] = `
@@ -485,8 +490,9 @@ exports[`snippet: #5 format[flow] 1`] = `
 "Unexpected identifier, expected the token \`(\` (2:12)
   1 | class Foo {
 > 2 |   accessor constructor
-    |            ^^^^^^^^^^^
-  3 | }"
+    |            ^
+  3 | }
+Cause: Unexpected identifier, expected the token \`(\` (2:11)"
 `;
 
 exports[`snippet: #5 format[hermes] 1`] = `

tests/format/js/_errors_/explicit-resource-management/__snapshots__/format.test.js.snap

@@ -11,8 +11,9 @@ Cause: Unexpected token, expected ")" (1:23)"
 exports[`invalid-for-await-using-binding-of-of.js format[flow] 1`] = `
 "Unexpected token \`await\`, expected the token \`(\` (1:5)
 > 1 | for await (using of of of);
-    |     ^^^^^
-  2 |"
+    |     ^
+  2 |
+Cause: Unexpected token \`await\`, expected the token \`(\` (1:4)"
 `;
 
 exports[`invalid-for-using-binding-in.js format[babel] 1`] = `
@@ -26,8 +27,9 @@ Cause: For-in loop may not start with 'using' declaration. (1:5)"
 exports[`invalid-for-using-binding-in.js format[flow] 1`] = `
 "Unexpected identifier, expected the token \`;\` (1:12)
 > 1 | for (using foo in {});
-    |            ^^^
-  2 |"
+    |            ^
+  2 |
+Cause: Unexpected identifier, expected the token \`;\` (1:11)"
 `;
 
 exports[`invalid-for-using-binding-of-in.js format[babel] 1`] = `
@@ -41,8 +43,9 @@ Cause: Unexpected token (1:14)"
 exports[`invalid-for-using-binding-of-in.js format[flow] 1`] = `
 "Unexpected token \`in\` (1:15)
 > 1 | for (using of in []);
-    |               ^^
-  2 |"
+    |               ^
+  2 |
+Cause: Unexpected token \`in\` (1:14)"
 `;
 
 exports[`invalid-for-using-binding-of-of.js format[babel] 1`] = `
@@ -56,8 +59,9 @@ Cause: Unexpected token, expected ")" (1:17)"
 exports[`invalid-for-using-binding-of-of.js format[flow] 1`] = `
 "Unexpected token \`of\`, expected the token \`)\` (1:18)
 > 1 | for (using of of of);
-    |                  ^^
-  2 |"
+    |                  ^
+  2 |
+Cause: Unexpected token \`of\`, expected the token \`)\` (1:17)"
 `;
 
 exports[`invalid-using-binding-let.js format[babel] 1`] = `
@@ -74,9 +78,10 @@ exports[`invalid-using-binding-let.js format[flow] 1`] = `
 "Unexpected token \`let\`, expected the end of an expression statement (\`;\`) (2:9)
   1 | {
 > 2 |   using let = h();
-    |         ^^^
+    |         ^
   3 | }
-  4 |"
+  4 |
+Cause: Unexpected token \`let\`, expected the end of an expression statement (\`;\`) (2:8)"
 `;
 
 exports[`invalid-using-binding-pattern.js format[babel] 1`] = `
@@ -98,5 +103,6 @@ exports[`invalid-using-binding-pattern.js format[flow] 1`] = `
     |         ^
   3 |   using [ bar ] = g();
   4 |   for (using { qux } of h());
-  5 |   for (using [ quux ] of i());"
+  5 |   for (using [ quux ] of i());
+Cause: Unexpected token \`{\`, expected the end of an expression statement (\`;\`) (2:8)"
 `;

tests/format/js/_errors_/export-name/__snapshots__/format.test.js.snap

@@ -52,7 +52,8 @@ Cause: An export name cannot include a lone surrogate."
 exports[`snippet: #0 format[flow] 1`] = `
 "Unexpected string, expected an identifier (1:10)
 > 1 | import { "\\uD83C" as b } from "./foo";
-    |          ^^^^^^^^"
+    |          ^
+Cause: Unexpected string, expected an identifier (1:9)"
 `;
 
 exports[`snippet: #0 format[hermes] 1`] = `
@@ -135,7 +136,8 @@ Cause: An export name cannot include a lone surrogate."
 exports[`snippet: #1 format[flow] 1`] = `
 "Unexpected string, expected an identifier (1:10)
 > 1 | export { "\\uD83C" } from "./foo";
-    |          ^^^^^^^^"
+    |          ^
+Cause: Unexpected string, expected an identifier (1:9)"
 `;
 
 exports[`snippet: #1 format[hermes] 1`] = `
@@ -218,7 +220,8 @@ Cause: An export name cannot include a lone surrogate."
 exports[`snippet: #2 format[flow] 1`] = `
 "Unexpected string, expected an identifier (1:10)
 > 1 | export { "\\uD83C" as b } from "./foo";
-    |          ^^^^^^^^"
+    |          ^
+Cause: Unexpected string, expected an identifier (1:9)"
 `;
 
 exports[`snippet: #2 format[hermes] 1`] = `
@@ -301,7 +304,8 @@ Cause: An export name cannot include a lone surrogate."
 exports[`snippet: #3 format[flow] 1`] = `
 "Unexpected string, expected an identifier (1:15)
 > 1 | export { b as "\\uD83C" } from "./foo";
-    |               ^^^^^^^^"
+    |               ^
+Cause: Unexpected string, expected an identifier (1:14)"
 `;
 
 exports[`snippet: #3 format[hermes] 1`] = `

tests/format/js/_errors_/for-of/__snapshots__/format.test.js.snap

@@ -66,13 +66,15 @@ Cause: Unexpected token ["
 exports[`snippet: #0 format[flow] 1`] = `
 "Unexpected token \`.\`, expected an identifier (1:9)
 > 1 | for (let.foo of []);
-    |         ^"
+    |         ^
+Cause: Unexpected token \`.\`, expected an identifier (1:8)"
 `;
 
 exports[`snippet: #0 format[flow] 2`] = `
 "Invalid left-hand side in for-of (1:6)
 > 1 | for (async of []);
-    |      ^^^^^"
+    |      ^
+Cause: Invalid left-hand side in for-of (1:5)"
 `;
 
 exports[`snippet: #0 format[meriyah] 1`] = `
@@ -120,7 +122,8 @@ Cause: The keyword 'let' is reserved"
 exports[`snippet: #1 format[flow] 1`] = `
 "Unexpected token \`(\`, expected an identifier (1:9)
 > 1 | for (let().bar of []);
-    |         ^"
+    |         ^
+Cause: Unexpected token \`(\`, expected an identifier (1:8)"
 `;
 
 exports[`snippet: #1 format[meriyah] 1`] = `
@@ -168,7 +171,8 @@ Cause: The keyword 'let' is reserved"
 exports[`snippet: #2 format[flow] 1`] = `
 "Unexpected template literal part, expected an identifier (1:9)
 > 1 | for (let\`\`.bar of []);
-    |         ^^"
+    |         ^
+Cause: Unexpected template literal part, expected an identifier (1:8)"
 `;
 
 exports[`snippet: #2 format[meriyah] 1`] = `

tests/format/js/_errors_/import/__snapshots__/format.test.js.snap

@@ -24,7 +24,8 @@ Cause: \`import()\` requires exactly one or two arguments. (1:0)"
 exports[`snippet: #0 format[flow] 1`] = `
 "Unexpected token \`)\` (1:8)
 > 1 | import();
-    |        ^"
+    |        ^
+Cause: Unexpected token \`)\` (1:7)"
 `;
 
 exports[`snippet: #0 format[meriyah] 1`] = `
@@ -65,7 +66,8 @@ Cause: \`import()\` requires exactly one or two arguments. (1:0)"
 exports[`snippet: #1 format[flow] 1`] = `
 "Unexpected token \`)\` (1:21)
 > 1 | import(/* comment */);
-    |                     ^"
+    |                     ^
+Cause: Unexpected token \`)\` (1:20)"
 `;
 
 exports[`snippet: #1 format[meriyah] 1`] = `
@@ -106,7 +108,8 @@ Cause: Cannot use new with import(). (1:4)"
 exports[`snippet: #2 format[flow] 1`] = `
 "Unexpected token \`import\` (1:5)
 > 1 | new import('./a.mjs');
-    |     ^^^^^^"
+    |     ^
+Cause: Unexpected token \`import\` (1:4)"
 `;
 
 exports[`snippet: #2 format[meriyah] 1`] = `
@@ -147,7 +150,8 @@ Cause: \`import()\` requires exactly one or two arguments. (1:4)"
 exports[`snippet: #3 format[flow] 1`] = `
 "Unexpected token \`import\` (1:5)
 > 1 | new import();
-    |     ^^^^^^"
+    |     ^
+Cause: Unexpected token \`import\` (1:4)"
 `;
 
 exports[`snippet: #3 format[meriyah] 1`] = `

tests/format/js/_errors_/invalid/__snapshots__/format.test.js.snap

@@ -59,13 +59,15 @@ Cause: Unexpected token each"
 exports[`snippet: #0 format[flow] 1`] = `
 "Unexpected identifier, expected the token \`(\` (1:5)
 > 1 | for each (a in b) {}
-    |     ^^^^"
+    |     ^
+Cause: Unexpected identifier, expected the token \`(\` (1:4)"
 `;
 
 exports[`snippet: #0 format[flow] 2`] = `
 "Invalid left-hand side in assignment (1:2)
 > 1 | (a = b) = 1
-    |  ^^^^^"
+    |  ^
+Cause: Invalid left-hand side in assignment (1:1)"
 `;
 
 exports[`snippet: #0 format[meriyah] 1`] = `
@@ -148,13 +150,15 @@ Cause: Unexpected token switch"
 exports[`snippet: #1 format[flow] 1`] = `
 "Unexpected token \`switch\`, expected an identifier (1:7)
 > 1 | class switch() {}
-    |       ^^^^^^"
+    |       ^
+Cause: Unexpected token \`switch\`, expected an identifier (1:6)"
 `;
 
 exports[`snippet: #1 format[flow] 2`] = `
 "Invalid left-hand side in assignment (1:5)
 > 1 | a = 1 = 2
-    |     ^"
+    |     ^
+Cause: Invalid left-hand side in assignment (1:4)"
 `;
 
 exports[`snippet: #1 format[meriyah] 1`] = `
@@ -237,13 +241,15 @@ Cause: Unexpected token }"
 exports[`snippet: #2 format[flow] 1`] = `
 "Unexpected token \`}\`, expected the token \`{\` (1:13)
 > 1 | ({ method() })
-    |             ^"
+    |             ^
+Cause: Unexpected token \`}\`, expected the token \`{\` (1:12)"
 `;
 
 exports[`snippet: #2 format[flow] 2`] = `
 "Invalid left-hand side in assignment (1:2)
 > 1 | (a = 1) = 2
-    |  ^^^^^"
+    |  ^
+Cause: Invalid left-hand side in assignment (1:1)"
 `;
 
 exports[`snippet: #2 format[meriyah] 1`] = `
@@ -326,13 +332,15 @@ Cause: Unexpected token }"
 exports[`snippet: #3 format[flow] 1`] = `
 "Unexpected token \`}\`, expected the token \`{\` (1:15)
 > 1 | ({ method({}) })
-    |               ^"
+    |               ^
+Cause: Unexpected token \`}\`, expected the token \`{\` (1:14)"
 `;
 
 exports[`snippet: #3 format[flow] 2`] = `
 "Invalid left-hand side in assignment (1:2)
 > 1 | (a += b) = 1
-    |  ^^^^^^"
+    |  ^
+Cause: Invalid left-hand side in assignment (1:1)"
 `;
 
 exports[`snippet: #3 format[meriyah] 1`] = `
@@ -415,13 +423,15 @@ Cause: Unexpected token }"
 exports[`snippet: #4 format[flow] 1`] = `
 "Unexpected token \`}\`, expected the token \`{\` (1:23)
 > 1 | ({ method(parameter,) })
-    |                       ^"
+    |                       ^
+Cause: Unexpected token \`}\`, expected the token \`{\` (1:22)"
 `;
 
 exports[`snippet: #4 format[flow] 2`] = `
 "Invalid left-hand side in assignment (1:2)
 > 1 | (a = b) += 1
-    |  ^^^^^"
+    |  ^
+Cause: Invalid left-hand side in assignment (1:1)"
 `;
 
 exports[`snippet: #4 format[meriyah] 1`] = `

tests/format/js/_errors_/newline-before-arrow/__snapshots__/format.test.js.snap

@@ -49,8 +49,9 @@ exports[`newline-before-arrow.js format[flow] 1`] = `
 "Illegal newline before arrow (2:1)
   1 | async x
 > 2 | => x
-    | ^^
-  3 |"
+    | ^
+  3 |
+Cause: Illegal newline before arrow (2:0)"
 `;
 
 exports[`newline-before-arrow.js format[meriyah] 1`] = `

tests/format/js/_errors_/reserved-word/__snapshots__/format.test.js.snap

@@ -31,13 +31,15 @@ Cause: Unexpected token asyn\\u{63}"
 exports[`snippet: #0 format[flow] 1`] = `
 "Use of reserved word in strict mode (1:7)
 > 1 | class interface {}
-    |       ^^^^^^^^^"
+    |       ^
+Cause: Use of reserved word in strict mode (1:6)"
 `;
 
 exports[`snippet: #0 format[flow] 2`] = `
 "Unexpected identifier, expected a declaration, statement or export specifiers (1:8)
 > 1 | export asyn\\u{63} from "async";
-    |        ^^^^^^^^^^"
+    |        ^
+Cause: Unexpected identifier, expected a declaration, statement or export specifiers (1:7)"
 `;
 
 exports[`snippet: #0 format[hermes] 1`] = `
@@ -99,7 +101,8 @@ Cause: The keyword 'interface' is reserved"
 exports[`snippet: #1 format[flow] 1`] = `
 "Use of reserved word in strict mode (1:8)
 > 1 | import interface from "foo";
-    |        ^^^^^^^^^"
+    |        ^
+Cause: Use of reserved word in strict mode (1:7)"
 `;
 
 exports[`snippet: #1 format[meriyah] 1`] = `

tests/format/js/comments/html-like/__snapshots__/format.test.js.snap

@@ -48,7 +48,8 @@ exports[`comment.js format[flow] 1`] = `
 > 1 | <!--
     |  ^
   2 | alert(1)
-  3 | -->"
+  3 | -->
+Cause: Unexpected token \`!\`, expected the token \`>\` (1:1)"
 `;
 
 exports[`comment.js format[hermes] 1`] = `

tests/format/js/decorators/__snapshots__/format.test.js.snap

@@ -74,7 +74,8 @@ exports[`classes.js format[flow] 1`] = `
      |             ^
    8 |   //
    9 | };
-  10 |"
+  10 |
+Cause: Unexpected token \`@\` (7:12)"
 `;
 
 exports[`classes.js format[hermes] 1`] = `

tests/format/js/decorators/class-expression/__snapshots__/format.test.js.snap

@@ -45,7 +45,8 @@ exports[`arguments.js - {"semi":false} format[flow] 1`] = `
 > 1 | console.log(@deco class Foo {})
     |             ^
   2 | console.log(@deco class {})
-  3 |"
+  3 |
+Cause: Unexpected token \`@\` (1:12)"
 `;
 
 exports[`arguments.js format 1`] = `
@@ -92,7 +93,8 @@ exports[`arguments.js format[flow] 1`] = `
 > 1 | console.log(@deco class Foo {})
     |             ^
   2 | console.log(@deco class {})
-  3 |"
+  3 |
+Cause: Unexpected token \`@\` (1:12)"
 `;
 
 exports[`class-expression.js - {"semi":false} format 1`] = `
@@ -178,7 +180,8 @@ exports[`class-expression.js - {"semi":false} format[flow] 1`] = `
     |             ^
   2 | const a2 = (@deco class {});
   3 |
-  4 | (@deco class Foo {});"
+  4 | (@deco class Foo {});
+Cause: Unexpected token \`@\` (1:12)"
 `;
 
 exports[`class-expression.js format 1`] = `
@@ -263,7 +266,8 @@ exports[`class-expression.js format[flow] 1`] = `
     |             ^
   2 | const a2 = (@deco class {});
   3 |
-  4 | (@deco class Foo {});"
+  4 | (@deco class Foo {});
+Cause: Unexpected token \`@\` (1:12)"
 `;
 
 exports[`member-expression.js - {"semi":false} format 1`] = `
@@ -311,7 +315,8 @@ exports[`member-expression.js - {"semi":false} format[flow] 1`] = `
 > 1 | (@deco class Foo {}).name;
     |  ^
   2 | (@deco class {}).name;
-  3 |"
+  3 |
+Cause: Unexpected token \`@\` (1:1)"
 `;
 
 exports[`member-expression.js format 1`] = `
@@ -358,7 +363,8 @@ exports[`member-expression.js format[flow] 1`] = `
 > 1 | (@deco class Foo {}).name;
     |  ^
   2 | (@deco class {}).name;
-  3 |"
+  3 |
+Cause: Unexpected token \`@\` (1:1)"
 `;
 
 exports[`super-class.js - {"semi":false} format 1`] = `
@@ -411,7 +417,8 @@ exports[`super-class.js - {"semi":false} format[flow] 1`] = `
     |                    ^
   2 |
   3 | class Fo2 extends (@deco class {}){}
-  4 |"
+  4 |
+Cause: Unexpected token \`@\` (1:19)"
 `;
 
 exports[`super-class.js format 1`] = `
@@ -463,5 +470,6 @@ exports[`super-class.js format[flow] 1`] = `
     |                    ^
   2 |
   3 | class Fo2 extends (@deco class {}){}
-  4 |"
+  4 |
+Cause: Unexpected token \`@\` (1:19)"
 `;

tests/format/js/discard-binding/__snapshots__/format.test.js.snap

@@ -113,10 +113,11 @@ exports[`array-pattern.js format[flow] 1`] = `
   1 | {
   2 |   // destructuring binding
 > 3 |   const [, void, ] = value;
-    |            ^^^^
+    |            ^
   4 | }
   5 | {
-  6 |   // for-of destructuring binding"
+  6 |   // for-of destructuring binding
+Cause: Unexpected reserved word (3:11)"
 `;
 
 exports[`array-pattern.js format[hermes] 1`] = `
@@ -227,10 +228,11 @@ Cause: Unexpected keyword 'void'"
 exports[`basic.js format[flow] 1`] = `
 "Unexpected reserved word (1:8)
 > 1 | const [void] = [,void] = [void,] = [];
-    |        ^^^^
+    |        ^
   2 |
   3 | function f(void, { p: void }, [ void ]) {}
-  4 |"
+  4 |
+Cause: Unexpected reserved word (1:7)"
 `;
 
 exports[`basic.js format[hermes] 1`] = `
@@ -316,7 +318,8 @@ exports[`discard-binding-arrow-params.js format[flow] 1`] = `
 "Unexpected token \`)\` (1:6)
 > 1 | (void) => {}
     |      ^
-  2 |"
+  2 |
+Cause: Unexpected token \`)\` (1:5)"
 `;
 
 exports[`discard-binding-arrow-params.js format[hermes] 1`] = `
@@ -392,7 +395,8 @@ exports[`discard-binding-assignment.js format[flow] 1`] = `
 "Unexpected token \`]\` (1:7)
 > 1 | ([void] = []);
     |       ^
-  2 |"
+  2 |
+Cause: Unexpected token \`]\` (1:6)"
 `;
 
 exports[`discard-binding-assignment.js format[hermes] 1`] = `
@@ -468,7 +472,8 @@ exports[`discard-binding-async-arrow-params.js format[flow] 1`] = `
 "Unexpected token \`)\` (1:12)
 > 1 | async (void) => {}
     |            ^
-  2 |"
+  2 |
+Cause: Unexpected token \`)\` (1:11)"
 `;
 
 exports[`discard-binding-async-arrow-params.js format[hermes] 1`] = `
@@ -543,8 +548,9 @@ Cause: Unexpected keyword 'void'"
 exports[`discard-binding-bindings.js format[flow] 1`] = `
 "Unexpected reserved word (1:12)
 > 1 | const { p: void } = {};
-    |            ^^^^
-  2 |"
+    |            ^
+  2 |
+Cause: Unexpected reserved word (1:11)"
 `;
 
 exports[`discard-binding-bindings.js format[hermes] 1`] = `
@@ -628,9 +634,10 @@ exports[`discard-binding-for-await-using-binding.js format[flow] 1`] = `
 "Unexpected token \`void\`, expected the token \`;\` (2:19)
   1 | async () => {
 > 2 |   for(await using void of []);
-    |                   ^^^^
+    |                   ^
   3 | }
-  4 |"
+  4 |
+Cause: Unexpected token \`void\`, expected the token \`;\` (2:18)"
 `;
 
 exports[`discard-binding-for-await-using-binding.js format[hermes] 1`] = `
@@ -715,8 +722,9 @@ Cause: Unexpected keyword 'void'"
 exports[`discard-binding-for-bindings.js format[flow] 1`] = `
 "Unexpected reserved word (1:16)
 > 1 | for(const { p: void } of []);
-    |                ^^^^
-  2 |"
+    |                ^
+  2 |
+Cause: Unexpected reserved word (1:15)"
 `;
 
 exports[`discard-binding-for-bindings.js format[hermes] 1`] = `
@@ -792,7 +800,8 @@ exports[`discard-binding-for-lhs.js format[flow] 1`] = `
 "Unexpected token \`}\` (1:15)
 > 1 | for({ p: void } of []);
     |               ^
-  2 |"
+  2 |
+Cause: Unexpected token \`}\` (1:14)"
 `;
 
 exports[`discard-binding-for-lhs.js format[hermes] 1`] = `
@@ -876,9 +885,10 @@ exports[`discard-binding-for-using-binding.js format[flow] 1`] = `
 "Unexpected token \`void\`, expected the token \`;\` (2:13)
   1 | {
 > 2 |   for(using void of []);
-    |             ^^^^
+    |             ^
   3 | }
-  4 |"
+  4 |
+Cause: Unexpected token \`void\`, expected the token \`;\` (2:12)"
 `;
 
 exports[`discard-binding-for-using-binding.js format[hermes] 1`] = `
@@ -1009,10 +1019,11 @@ exports[`function-parameter.js format[flow] 1`] = `
   1 | {
   2 |   // function parameter
 > 3 |   function f(void) {}
-    |              ^^^^
+    |              ^
   4 | }
   5 | {
-  6 |   // arrow function parameter"
+  6 |   // arrow function parameter
+Cause: Unexpected reserved word (3:13)"
 `;
 
 exports[`function-parameter.js format[hermes] 1`] = `
@@ -1206,10 +1217,11 @@ exports[`object-pattern.js format[flow] 1`] = `
   1 | {
   2 |   // destructuring binding
 > 3 |   const { void: void } = value;
-    |                 ^^^^
+    |                 ^
   4 | }
   5 | {
-  6 |   // for-of destructuring binding"
+  6 |   // for-of destructuring binding
+Cause: Unexpected reserved word (3:16)"
 `;
 
 exports[`object-pattern.js format[hermes] 1`] = `
@@ -1349,7 +1361,8 @@ exports[`unary-expression-void.js format[flow] 1`] = `
     |          ^
   5 |     // expr
   6 |     [ void [] ]:
-  7 |     // pattern"
+  7 |     // pattern
+Cause: Unexpected token \`]\` (4:9)"
 `;
 
 exports[`unary-expression-void.js format[hermes] 1`] = `
@@ -1461,10 +1474,11 @@ exports[`using.js format[flow] 1`] = `
 "Unexpected token \`void\`, expected the end of an expression statement (\`;\`) (2:9)
   1 | {
 > 2 |   using void = f();
-    |         ^^^^
+    |         ^
   3 | }
   4 | async (void) => {
-  5 |   await using void = f();"
+  5 |   await using void = f();
+Cause: Unexpected token \`void\`, expected the end of an expression statement (\`;\`) (2:8)"
 `;
 
 exports[`using.js format[hermes] 1`] = `
@@ -1634,10 +1648,11 @@ exports[`using-variable-declarator.js format[flow] 1`] = `
   1 | {
   2 |   // using 1 declarator
 > 3 |   using void = f();
-    |         ^^^^
+    |         ^
   4 | }
   5 | {
-  6 |   // using 2 declarators"
+  6 |   // using 2 declarators
+Cause: Unexpected token \`void\`, expected the end of an expression statement (\`;\`) (3:8)"
 `;
 
 exports[`using-variable-declarator.js format[hermes] 1`] = `

tests/format/js/dynamic-import/__snapshots__/format.test.js.snap

@@ -61,10 +61,11 @@ Cause: The only valid meta property for import is 'import.meta'"
 exports[`import-phase.js format[flow] 1`] = `
 "Unexpected identifier, expected the identifier \`meta\` (1:8)
 > 1 | import.source(\`data:text/javascript,
-    |        ^^^^^^
+    |        ^
   2 |     console.log("RUN");
   3 | \`)
-  4 |"
+  4 |
+Cause: Unexpected identifier, expected the identifier \`meta\` (1:7)"
 `;
 
 exports[`import-phase.js format[hermes] 1`] = `
@@ -120,10 +121,11 @@ module = await import(String.raw\`data:text/javascript,
 exports[`template-literal.js format[flow] 1`] = `
 "Unexpected token \`import\`, expected the end of an expression statement (\`;\`) (1:20)
 > 1 | module   =   await import(\`data:text/javascript,
-    |                    ^^^^^^
+    |                    ^
   2 |     console.log("RUN");
   3 | \`);
-  4 |"
+  4 |
+Cause: Unexpected token \`import\`, expected the end of an expression statement (\`;\`) (1:19)"
 `;
 
 exports[`template-literal.js format[hermes] 1`] = `

tests/format/js/explicit-resource-management/__snapshots__/format.test.js.snap

@@ -16,8 +16,9 @@ parsers: ["babel", "flow", "typescript"]
 exports[`for-await-using-of-comments.js format[flow] 1`] = `
 "Unexpected token \`await\`, expected the token \`(\` (1:19)
 > 1 | /*1*/ for /* 2 */ await /*3*/ ( /*4*/ using /*5*/ fo /*6*/ of /*7*/ of /*8*/) /*9*/;
-    |                   ^^^^^
-  2 |"
+    |                   ^
+  2 |
+Cause: Unexpected token \`await\`, expected the token \`(\` (1:18)"
 `;
 
 exports[`for-await-using-of-comments.js format[hermes] 1`] = `
@@ -93,7 +94,8 @@ exports[`invalid-duplicate-using-bindings.js format[flow] 1`] = `
     |         ^
   3 | }
   4 | {
-  5 |   using g = foo();"
+  5 |   using g = foo();
+Cause: Unexpected identifier, expected the end of an expression statement (\`;\`) (2:8)"
 `;
 
 exports[`invalid-duplicate-using-bindings.js format[hermes] 1`] = `
@@ -140,7 +142,8 @@ exports[`invalid-script-top-level-using-binding.js format[flow] 1`] = `
 "Unexpected identifier, expected the end of an expression statement (\`;\`) (1:7)
 > 1 | using x = bar();
     |       ^
-  2 |"
+  2 |
+Cause: Unexpected identifier, expected the end of an expression statement (\`;\`) (1:6)"
 `;
 
 exports[`invalid-script-top-level-using-binding.js format[meriyah] 1`] = `
@@ -184,7 +187,8 @@ exports[`using-declarations.js format[flow] 1`] = `
     |                 ^
   3 | }
   4 |
-  5 | for(using /* 1 */ a = foo(), /* 2 */ b = foo();;);"
+  5 | for(using /* 1 */ a = foo(), /* 2 */ b = foo();;);
+Cause: Unexpected identifier, expected the end of an expression statement (\`;\`) (2:16)"
 `;
 
 exports[`using-declarations.js format[hermes] 1`] = `
@@ -329,9 +333,10 @@ exports[`valid-await-using-binding-basic.js format[flow] 1`] = `
 "Unexpected identifier, expected the end of an expression statement (\`;\`) (2:15)
   1 | async function f() {
 > 2 |   await using basic = getReader();
-    |               ^^^^^
+    |               ^
   3 | }
-  4 |"
+  4 |
+Cause: Unexpected identifier, expected the end of an expression statement (\`;\`) (2:14)"
 `;
 
 exports[`valid-await-using-binding-basic.js format[meriyah] 1`] = `
@@ -365,9 +370,10 @@ exports[`valid-await-using-binding-escaped.js format[flow] 1`] = `
 "Unexpected identifier, expected the end of an expression statement (\`;\`) (2:15)
   1 | async function f() {
 > 2 |   await using \\u0061b = c;
-    |               ^^^^^^^
+    |               ^
   3 | }
-  4 |"
+  4 |
+Cause: Unexpected identifier, expected the end of an expression statement (\`;\`) (2:14)"
 `;
 
 exports[`valid-await-using-binding-escaped.js format[meriyah] 1`] = `
@@ -403,7 +409,8 @@ exports[`valid-await-using-binding-non-bmp.js format[flow] 1`] = `
 > 2 |   await using 𠮷 = foo();
     |               ^
   3 | }
-  4 |"
+  4 |
+Cause: Unexpected identifier, expected the end of an expression statement (\`;\`) (2:14)"
 `;
 
 exports[`valid-await-using-binding-non-bmp.js format[meriyah] 1`] = `
@@ -439,10 +446,11 @@ exports[`valid-await-using-binding-using.js format[flow] 1`] = `
 "Unexpected identifier, expected the end of an expression statement (\`;\`) (2:15)
   1 | async function f() {
 > 2 |   await using using = of;
-    |               ^^^^^
+    |               ^
   3 |   for (await using using of of);
   4 | }
-  5 |"
+  5 |
+Cause: Unexpected identifier, expected the end of an expression statement (\`;\`) (2:14)"
 `;
 
 exports[`valid-await-using-binding-using.js format[meriyah] 1`] = `
@@ -506,7 +514,8 @@ exports[`valid-await-using-comments.js format[flow] 1`] = `
     |                            ^
   4 | }
   5 | {
-  6 |   /*0*/for/*1*/(/*2*/await/*3*/using/*4*/b/*5*/=/*6*/x/*7*/;/*8*/;/*9*/)/*10*/;"
+  6 |   /*0*/for/*1*/(/*2*/await/*3*/using/*4*/b/*5*/=/*6*/x/*7*/;/*8*/;/*9*/)/*10*/;
+Cause: Unexpected identifier, expected the end of an expression statement (\`;\`) (3:27)"
 `;
 
 exports[`valid-await-using-comments.js format[hermes] 1`] = `
@@ -588,10 +597,11 @@ exports[`valid-for-using-binding-of-of.js format[flow] 1`] = `
 "Invalid left-hand side in for-of (2:8)
   1 | async function f() {
 > 2 |   for (await using of of of);
-    |        ^^^^^^^^^^^
+    |        ^
   3 |   for await (await using of of of);
   4 | }
-  5 |"
+  5 |
+Cause: Invalid left-hand side in for-of (2:7)"
 `;
 
 exports[`valid-for-using-binding-of-of.js format[meriyah] 1`] = `
@@ -626,9 +636,10 @@ exports[`valid-for-using-declaration.js format[flow] 1`] = `
 "Unexpected identifier, expected the token \`;\` (2:20)
   1 | async function f() {
 > 2 |   for (await using basic = reader();;);
-    |                    ^^^^^
+    |                    ^
   3 | }
-  4 |"
+  4 |
+Cause: Unexpected identifier, expected the token \`;\` (2:19)"
 `;
 
 exports[`valid-for-using-declaration.js format[hermes] 1`] = `
@@ -696,7 +707,8 @@ exports[`valid-module-block-top-level-await-using-binding.js format[flow] 1`] =
     |                  ^
   2 |   await using foo = bar();
   3 | }
-  4 |"
+  4 |
+Cause: Unexpected token \`{\`, expected the token \`;\` (1:17)"
 `;
 
 exports[`valid-module-block-top-level-await-using-binding.js format[hermes] 1`] = `
@@ -792,7 +804,8 @@ exports[`valid-module-block-top-level-using-binding.js format[flow] 1`] = `
     |        ^
   2 |   using foo = bar();
   3 | }
-  4 |"
+  4 |
+Cause: Unexpected token \`{\`, expected the end of an expression statement (\`;\`) (1:7)"
 `;
 
 exports[`valid-module-block-top-level-using-binding.js format[hermes] 1`] = `
@@ -891,8 +904,9 @@ for await (using of of);
 exports[`valid-using-as-identifier-for-await-of.js format[flow] 1`] = `
 "Unexpected token \`await\`, expected the token \`(\` (1:5)
 > 1 | for await (using of of);
-    |     ^^^^^
-  2 |"
+    |     ^
+  2 |
+Cause: Unexpected token \`await\`, expected the token \`(\` (1:4)"
 `;
 
 exports[`valid-using-as-identifier-for-await-of.js format[hermes] 1`] = `
@@ -1010,9 +1024,10 @@ exports[`valid-using-binding-basic.js format[flow] 1`] = `
 "Unexpected identifier, expected the end of an expression statement (\`;\`) (2:9)
   1 | {
 > 2 |   using basic = getReader();
-    |         ^^^^^
+    |         ^
   3 | }
-  4 |"
+  4 |
+Cause: Unexpected identifier, expected the end of an expression statement (\`;\`) (2:8)"
 `;
 
 exports[`valid-using-binding-basic.js format[meriyah] 1`] = `
@@ -1043,8 +1058,9 @@ parsers: ["babel", "flow", "typescript"]
 exports[`valid-using-binding-escaped.js format[flow] 1`] = `
 "Unexpected identifier, expected the end of an expression statement (\`;\`) (1:9)
 > 1 | { using \\u0061b = c; }
-    |         ^^^^^^^
-  2 |"
+    |         ^
+  2 |
+Cause: Unexpected identifier, expected the end of an expression statement (\`;\`) (1:8)"
 `;
 
 exports[`valid-using-binding-escaped.js format[meriyah] 1`] = `
@@ -1074,7 +1090,8 @@ exports[`valid-using-binding-non-bmp.js format[flow] 1`] = `
 "Unexpected identifier, expected the end of an expression statement (\`;\`) (1:9)
 > 1 | { using 𠮷 = foo(); }
     |         ^
-  2 |"
+  2 |
+Cause: Unexpected identifier, expected the end of an expression statement (\`;\`) (1:8)"
 `;
 
 exports[`valid-using-binding-non-bmp.js format[meriyah] 1`] = `
@@ -1108,10 +1125,11 @@ exports[`valid-using-binding-using.js format[flow] 1`] = `
 "Unexpected identifier, expected the end of an expression statement (\`;\`) (2:9)
   1 | {
 > 2 |   using using = of;
-    |         ^^^^^
+    |         ^
   3 |   for (using using of of);
   4 | }
-  5 |"
+  5 |
+Cause: Unexpected identifier, expected the end of an expression statement (\`;\`) (2:8)"
 `;
 
 exports[`valid-using-binding-using.js format[meriyah] 1`] = `

tests/format/js/export-default/escaped/__snapshots__/format.test.js.snap

@@ -34,7 +34,8 @@ exports[`default-escaped.js format[flow] 1`] = `
 "Unexpected identifier, expected a declaration, statement or export specifiers (2:8)
   1 | // export asyn\\u{63} from "async";
 > 2 | export n\\u{63} from "async";
-    |        ^^^^^^^"
+    |        ^
+Cause: Unexpected identifier, expected a declaration, statement or export specifiers (2:7)"
 `;
 
 exports[`default-escaped.js format[hermes] 1`] = `

tests/format/js/export-star/__snapshots__/format.test.js.snap

@@ -76,8 +76,9 @@ export * as "foo" from "foo";
 exports[`export-star-as-string.js format[flow] 1`] = `
 "Unexpected string, expected an identifier (1:13)
 > 1 | export * as 'foo' from 'foo'
-    |             ^^^^^
-  2 |"
+    |             ^
+  2 |
+Cause: Unexpected string, expected an identifier (1:12)"
 `;
 
 exports[`export-star-as-string.js format[hermes] 1`] = `
@@ -106,8 +107,9 @@ export * as "foo" from "foo";
 exports[`export-star-as-string2.js format[flow] 1`] = `
 "Unexpected string, expected an identifier (1:13)
 > 1 | export * as "foo" from 'foo'
-    |             ^^^^^
-  2 |"
+    |             ^
+  2 |
+Cause: Unexpected string, expected an identifier (1:12)"
 `;
 
 exports[`export-star-as-string2.js format[hermes] 1`] = `

tests/format/js/for/__snapshots__/format.test.js.snap

@@ -898,10 +898,11 @@ exports[`for-in-with-initializer.js format[flow] 1`] = `
   1 | // https://github.com/babel/babel/blob/HEAD/packages/babel-generator/test/fixtures/parentheses/in-inside-for/input.js
   2 |
 > 3 | for (var a = (b in c) in {});
-    |      ^^^^^^^^^^^^^^^^
+    |      ^
   4 | for (var a = 1 || (b in c) in {});
   5 | for (var a = 1 + (2 || (b in c)) in {});
-  6 | for (var a = (() => b in c) in {});"
+  6 | for (var a = (() => b in c) in {});
+Cause: Invalid left-hand side in for-in (3:5)"
 `;
 
 exports[`for-in-with-initializer.js format[typescript] 1`] = `
@@ -1069,10 +1070,11 @@ exports[`parentheses.js format[flow] 1`] = `
    9 | for (var a = [b in c];;);
   10 | for (var a = {b: b in c};;);
 > 11 | for (var a = (x = b in c) => {};;);
-     |                           ^^
+     |                           ^
   12 | for (var a = class extends (b in c) {};;);
   13 | for (var a = function (x = b in c) {};;);
-  14 |"
+  14 |
+Cause: Unexpected token \`=>\`, expected the token \`;\` (11:26)"
 `;
 
 exports[`parentheses.js format[typescript] 1`] = `

tests/format/js/ignore/semi/__snapshots__/format.test.js.snap

@@ -89,7 +89,8 @@ exports[`class-expression-decorator.js - {"semi":false} format[flow] 1`] = `
     |   ^
   4 |   class {}
   5 | );
-  6 |"
+  6 |
+Cause: Unexpected token \`@\` (3:2)"
 `;
 
 exports[`class-expression-decorator.js format 1`] = `
@@ -145,7 +146,8 @@ exports[`class-expression-decorator.js format[flow] 1`] = `
     |   ^
   4 |   class {}
   5 | );
-  6 |"
+  6 |
+Cause: Unexpected token \`@\` (3:2)"
 `;
 
 exports[`directive.js - {"semi":false} format 1`] = `

tests/format/js/import/long-module-name/__snapshots__/format.test.js.snap

@@ -44,10 +44,11 @@ Cause: The only valid meta property for import is 'import.meta'"
 exports[`import-defer.js format[flow] 1`] = `
 "Unexpected identifier, expected the identifier \`meta\` (1:8)
 > 1 | import.defer("./a/long/long/long/long/long/long/long/long/long/long/long/long/path/to/module");
-    |        ^^^^^
+    |        ^
   2 | import.defer(
   3 |   // Comment
-  4 |   "./a/long/long/long/long/long/long/long/long/long/long/long/long/path/to/module""
+  4 |   "./a/long/long/long/long/long/long/long/long/long/long/long/long/path/to/module"
+Cause: Unexpected identifier, expected the identifier \`meta\` (1:7)"
 `;
 
 exports[`import-defer.js format[hermes] 1`] = `
@@ -143,10 +144,11 @@ Cause: The only valid meta property for import is 'import.meta'"
 exports[`import-source.js format[flow] 1`] = `
 "Unexpected identifier, expected the identifier \`meta\` (1:8)
 > 1 | import.source("./a/long/long/long/long/long/long/long/long/long/long/long/long/path/to/module");
-    |        ^^^^^^
+    |        ^
   2 | import.source(
   3 |   // Comment
-  4 |   "./a/long/long/long/long/long/long/long/long/long/long/long/long/path/to/module""
+  4 |   "./a/long/long/long/long/long/long/long/long/long/long/long/long/path/to/module"
+Cause: Unexpected identifier, expected the identifier \`meta\` (1:7)"
 `;
 
 exports[`import-source.js format[hermes] 1`] = `

tests/format/js/multiparser-invalid/__snapshots__/format.test.js.snap

@@ -103,7 +103,8 @@ exports[`text.js format[flow] 1`] = `
     |            ^
   2 | foo = html\`\\u{prettier}\\u{0065}\`;
   3 | foo = graphql\`\\u{prettier}\\u{0065}\`;
-  4 | foo = markdown\`\\u{prettier}\\u{0065}\`;"
+  4 | foo = markdown\`\\u{prettier}\\u{0065}\`;
+Cause: Unexpected token ILLEGAL (1:11)"
 `;
 
 exports[`text.js format[hermes] 1`] = `

tests/format/js/new-target/__snapshots__/format.test.js.snap

@@ -17,7 +17,8 @@ exports[`outside-functions.js format[flow] 1`] = `
 "Unexpected token \`.\` (1:14)
 > 1 | const x = new.target;
     |              ^
-  2 |"
+  2 |
+Cause: Unexpected token \`.\` (1:13)"
 `;
 
 exports[`outside-functions.js format[hermes] 1`] = `
@@ -60,7 +61,8 @@ exports[`range.js format[flow] 1`] = `
 "Unexpected token \`.\` (2:4)
   1 | const x =
 > 2 | new.target;
-    |    ^"
+    |    ^
+Cause: Unexpected token \`.\` (2:3)"
 `;
 
 exports[`range.js format[hermes] 1`] = `

tests/format/js/objects/__snapshots__/format.test.js.snap

@@ -159,7 +159,8 @@ exports[`expression.js format[flow] 1`] = `
     |     ^
   6 | ({}::b()\`\`[''].c++ && 0 ? 0 : 0, 0);
   7 | ({}(), 0);
-  8 | ({} = 0);"
+  8 | ({} = 0);
+Cause: Unexpected token \`:\`, expected a type (5:4)"
 `;
 
 exports[`expression.js format[hermes] 1`] = `

tests/format/js/sloppy-mode/__snapshots__/format.test.js.snap

@@ -114,8 +114,9 @@ Cause: Unexpected token function"
 exports[`function-declaration-in-while.js format[flow] 1`] = `
 "In non-strict mode code, functions can only be declared at top level, inside a block, or as the body of an if statement. (1:15)
 > 1 | while (false) function foo(){}
-    |               ^^^^^^^^^^^^^^^^
-  2 |"
+    |               ^
+  2 |
+Cause: In non-strict mode code, functions can only be declared at top level, inside a block, or as the body of an if statement. (1:14)"
 `;
 
 exports[`function-declaration-in-while.js format[hermes] 1`] = `

tests/format/jsx/_errors_/invalid-jsx-text/__snapshots__/format.test.js.snap

@@ -31,7 +31,8 @@ Cause: Unexpected token \`}\`. Did you mean \`}\` or \`{"}"}\`?"
 exports[`snippet: #0 format[flow] 1`] = `
 "Unexpected token \`}\`. Did you mean \`{'}'}\`? (1:15)
 > 1 | let x1 = <div>}</div>;
-    |               ^"
+    |               ^
+Cause: Unexpected token \`}\`. Did you mean \`{'}'}\`? (1:14)"
 `;
 
 exports[`snippet: #0 format[oxc] 1`] = `
@@ -84,7 +85,8 @@ Cause: Unexpected token \`>\`. Did you mean \`&gt;\` or \`{">"}\`?"
 exports[`snippet: #1 format[flow] 1`] = `
 "Unexpected token \`>\`. Did you mean \`{'>'}\`? (1:15)
 > 1 | let x2 = <div>></div>;
-    |               ^"
+    |               ^
+Cause: Unexpected token \`>\`. Did you mean \`{'>'}\`? (1:14)"
 `;
 
 exports[`snippet: #1 format[oxc] 1`] = `
@@ -137,7 +139,8 @@ Cause: Unexpected token <"
 exports[`snippet: #2 format[flow] 1`] = `
 "Unexpected token \`<\`, expected the token \`>\` (1:16)
 > 1 | let x2 = <div><</div>;
-    |                ^"
+    |                ^
+Cause: Unexpected token \`<\`, expected the token \`>\` (1:15)"
 `;
 
 exports[`snippet: #2 format[oxc] 1`] = `
@@ -190,7 +193,8 @@ Cause: Unexpected token \`}\`. Did you mean \`&rbrace;\` or \`{"}"}\`?"
 exports[`snippet: #3 format[flow] 1`] = `
 "Unexpected token \`}\`. Did you mean \`{'}'}\`? (1:22)
 > 1 | let x3 = <div>{"foo"}}</div>;
-    |                      ^"
+    |                      ^
+Cause: Unexpected token \`}\`. Did you mean \`{'}'}\`? (1:21)"
 `;
 
 exports[`snippet: #3 format[oxc] 1`] = `
@@ -243,7 +247,8 @@ Cause: Unexpected token \`>\`. Did you mean \`&gt;\` or \`{">"}\`?"
 exports[`snippet: #4 format[flow] 1`] = `
 "Unexpected token \`>\`. Did you mean \`{'>'}\`? (1:22)
 > 1 | let x4 = <div>{"foo"}></div>;
-    |                      ^"
+    |                      ^
+Cause: Unexpected token \`>\`. Did you mean \`{'>'}\`? (1:21)"
 `;
 
 exports[`snippet: #4 format[oxc] 1`] = `
@@ -296,7 +301,8 @@ Cause: Unexpected token <"
 exports[`snippet: #5 format[flow] 1`] = `
 "Unexpected token \`<\`, expected the token \`>\` (1:23)
 > 1 | let x4 = <div>{"foo"}<</div>;
-    |                       ^"
+    |                       ^
+Cause: Unexpected token \`<\`, expected the token \`>\` (1:22)"
 `;
 
 exports[`snippet: #5 format[oxc] 1`] = `
@@ -349,7 +355,8 @@ Cause: Unexpected token \`}\`. Did you mean \`&rbrace;\` or \`{"}"}\`?"
 exports[`snippet: #6 format[flow] 1`] = `
 "Unexpected token \`}\`. Did you mean \`{'}'}\`? (1:15)
 > 1 | let x5 = <div>}{"foo"}</div>;
-    |               ^"
+    |               ^
+Cause: Unexpected token \`}\`. Did you mean \`{'}'}\`? (1:14)"
 `;
 
 exports[`snippet: #6 format[oxc] 1`] = `
@@ -402,7 +409,8 @@ Cause: Unexpected token \`>\`. Did you mean \`&gt;\` or \`{">"}\`?"
 exports[`snippet: #7 format[flow] 1`] = `
 "Unexpected token \`>\`. Did you mean \`{'>'}\`? (1:15)
 > 1 | let x6 = <div>>{"foo"}</div>;
-    |               ^"
+    |               ^
+Cause: Unexpected token \`>\`. Did you mean \`{'>'}\`? (1:14)"
 `;
 
 exports[`snippet: #7 format[oxc] 1`] = `
@@ -455,7 +463,8 @@ Cause: Unexpected token {"
 exports[`snippet: #8 format[flow] 1`] = `
 "Unexpected token \`{\`, expected the token \`>\` (1:16)
 > 1 | let x6 = <div><{"foo"}</div>;
-    |                ^"
+    |                ^
+Cause: Unexpected token \`{\`, expected the token \`>\` (1:15)"
 `;
 
 exports[`snippet: #8 format[oxc] 1`] = `

tests/format/misc/_errors_/front-matter/__snapshots__/format.test.js.snap

@@ -170,9 +170,9 @@ exports[`snippet: Should not support front matter format[flow] 1`] = `
 "Invalid left-hand side in assignment (1:3)
 > 1 | ---
     |   ^
-> 2 | Front Matter content
-    | ^^^^^
-  3 | ---"
+  2 | Front Matter content
+  3 | ---
+Cause: Invalid left-hand side in assignment (1:2)"
 `;
 
 exports[`snippet: Should not support front matter format[graphql] 1`] = `

yarn.lock

@@ -4998,10 +4998,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"flow-parser@npm:0.318.0":
-  version: 0.318.0
-  resolution: "flow-parser@npm:0.318.0"
-  checksum: 10/55185570810317a34c2a512266da1cbe82065d4d56d5b1f3372446544f20bd68f6d5e16258491a46656f4dcc8a63d157151ca4f06c7a701f33bb356158dd982b
+"flow-estree@npm:0.320.0":
+  version: 0.320.0
+  resolution: "flow-estree@npm:0.320.0"
+  checksum: 10/e520c3045be7aaf969694190983076c4b5131f42eed0d808d8c08c3afd38ac7f4e3c8f71bbce720babc8dee847c649666fd12edf100bfc1eb6db6b0117470189
+  languageName: node
+  linkType: hard
+
+"flow-parser@npm:0.320.0":
+  version: 0.320.0
+  resolution: "flow-parser@npm:0.320.0"
+  dependencies:
+    flow-estree: "npm:0.320.0"
+  checksum: 10/7ad8653fafeee295a5400ee26bf501dc510f056c3b28c5794cff0f0870c05ad60b3ceb9f8de743a24d0969aebfc261627d624e747743553984b50d02ab00d2f8
   languageName: node
   linkType: hard
 
@@ -8158,7 +8167,7 @@ __metadata:
     fast-json-stable-stringify: "npm:2.1.0"
     file-entry-cache: "npm:11.1.3"
     find-cache-directory: "npm:6.0.0"
-    flow-parser: "npm:0.318.0"
+    flow-parser: "npm:0.320.0"
     get-east-asian-width: "npm:1.6.0"
     get-port: "npm:7.2.0"
     get-stdin: "npm:9.0.0"