From ed9e9ab649c48fb01de5d73e691b7e35c488ffac Mon Sep 17 00:00:00 2001
From: fisker Cheung <lionkay@gmail.com>
Date: Mon, 1 Mar 2021 10:04:09 +0800
Subject: [PATCH] Improve json error code frame (#10433)

---
 changelog_unreleased/json/10433.md             | 17 +++++++++++++++++
 src/language-js/parser/json.js                 | 18 +++++++++---------
 .../json/__snapshots__/jsfmt.spec.js.snap      | 18 +++++++++---------
 3 files changed, 35 insertions(+), 18 deletions(-)
 create mode 100644 changelog_unreleased/json/10433.md

diff --git a/changelog_unreleased/json/10433.md b/changelog_unreleased/json/10433.md
new file mode 100644
index 000000000..91a49bf26
--- /dev/null
+++ b/changelog_unreleased/json/10433.md
@@ -0,0 +1,17 @@
+#### Improve error message (#10433 by @fisker)
+
+<!-- prettier-ignore -->
+```js
+// Input
+{key: "foo" + "bar"}
+
+// Prettier stable (--parser=json-stringify)
+SyntaxError: BinaryExpression is not allowed in JSON. (1:7)
+> 1 | {key: "foo" + "bar"}
+    |       ^
+
+// Prettier main
+SyntaxError: BinaryExpression is not allowed in JSON. (1:7)
+> 1 | {key: "foo" + "bar"}
+    |       ^^^^^^^^^^^^^
+```
diff --git a/src/language-js/parser/json.js b/src/language-js/parser/json.js
index f7aa95e33..44e1d10dd 100644
--- a/src/language-js/parser/json.js
+++ b/src/language-js/parser/json.js
@@ -96,15 +96,15 @@ function assertJsonNode(node, parent) {
   }
 
   function createJsonError(attribute) {
-    const name = !attribute
-      ? node.type
-      : `${node.type} with ${attribute}=${JSON.stringify(node[attribute])}`;
-    return createError(`${name} is not allowed in JSON.`, {
-      start: {
-        line: node.loc.start.line,
-        column: node.loc.start.column + 1,
-      },
-    });
+    const { type, loc } = node;
+    const name = attribute
+      ? `${type} with ${attribute}=${JSON.stringify(node[attribute])}`
+      : type;
+    const [start, end] = [loc.start, loc.end].map(({ line, column }) => ({
+      line,
+      column: column + 1,
+    }));
+    return createError(`${name} is not allowed in JSON.`, { start, end });
   }
 }
 
diff --git a/tests/misc/errors/json/__snapshots__/jsfmt.spec.js.snap b/tests/misc/errors/json/__snapshots__/jsfmt.spec.js.snap
index 4b26a300f..9094dec5c 100644
--- a/tests/misc/errors/json/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/misc/errors/json/__snapshots__/jsfmt.spec.js.snap
@@ -9,19 +9,19 @@ exports[`snippet: #0 [json] format 1`] = `
 exports[`snippet: #0 [json-stringify] format 1`] = `
 "ObjectProperty with shorthand=true is not allowed in JSON. (1:2)
 > 1 | {foo}
-    |  ^"
+    |  ^^^"
 `;
 
 exports[`snippet: #1 [json] format 1`] = `
 "BinaryExpression is not allowed in JSON. (1:1)
 > 1 | 1+2
-    | ^"
+    | ^^^"
 `;
 
 exports[`snippet: #1 [json-stringify] format 1`] = `
 "ObjectProperty with computed=true is not allowed in JSON. (1:2)
 > 1 | {[\\"foo\\"]:\\"bar\\"}
-    |  ^"
+    |  ^^^^^^^^^^^^^"
 `;
 
 exports[`snippet: #2 [json] format 1`] = `
@@ -33,7 +33,7 @@ exports[`snippet: #2 [json] format 1`] = `
 exports[`snippet: #2 [json-stringify] format 1`] = `
 "UnaryExpression with operator=\\"~\\" is not allowed in JSON. (1:9)
 > 1 | {\\"foo\\": ~1}
-    |         ^"
+    |         ^^"
 `;
 
 exports[`snippet: #3 [json] format 1`] = `
@@ -45,30 +45,30 @@ exports[`snippet: #3 [json] format 1`] = `
 exports[`snippet: #3 [json-stringify] format 1`] = `
 "LogicalExpression is not allowed in JSON. (1:9)
 > 1 | {\\"foo\\": false || \\"bar\\"}
-    |         ^"
+    |         ^^^^^^^^^^^^^^"
 `;
 
 exports[`snippet: #4 [json-stringify] format 1`] = `
 "Identifier is not allowed in JSON. (1:9)
 > 1 | {\\"foo\\": undefined}
-    |         ^"
+    |         ^^^^^^^^^"
 `;
 
 exports[`snippet: #5 [json-stringify] format 1`] = `
 "ArrowFunctionExpression is not allowed in JSON. (1:9)
 > 1 | {\\"foo\\": () => {}}
-    |         ^"
+    |         ^^^^^^^^"
 `;
 
 exports[`snippet: #6 [json-stringify] format 1`] = `
 "CommentBlock is not allowed in JSON. (1:1)
 > 1 | /* comment */{\\"foo\\": 1}
-    | ^"
+    | ^^^^^^^^^^^^^"
 `;
 
 exports[`snippet: #7 [json-stringify] format 1`] = `
 "CommentLine is not allowed in JSON. (1:1)
 > 1 | // comment
-    | ^
+    | ^^^^^^^^^^
   2 | {\\"foo\\": 1}"
 `;