babel-code-frame: add options for linesBefore, linesAfter (#4561)

* babel-code-frame: add options for linesBefore, linesAfter

* add example, use list of keywords

* a [skip ci]

* Update index.js

packages/babel-code-frame/README.md

@@ -38,3 +38,5 @@ If the column number is not known, you may pass `null` instead.
 name                   | type     | default         | description
 -----------------------|----------|-----------------|------------------------------------------------------
 highlightCode          | boolean  | `false`         | Syntax highlight the code as JavaScript for terminals
+linesAbove             | number   | 2               | The number of lines to show above the error
+linesBelow             | number   | 3               | The number of lines to show below the error

packages/babel-code-frame/src/index.js

@@ -83,9 +83,12 @@ export default function (
   let highlighted = opts.highlightCode && chalk.supportsColor;
   if (highlighted) rawLines = highlight(rawLines);
 
+  let linesAbove = opts.linesAbove || 2;
+  let linesBelow = opts.linesBelow || 3;
+
   let lines = rawLines.split(NEWLINE);
-  let start = Math.max(lineNumber - 3, 0);
+  let start = Math.max(lineNumber - (linesAbove + 1), 0);
-  let end   = Math.min(lines.length, lineNumber + 3);
+  let end   = Math.min(lines.length, lineNumber + linesBelow);
 
   if (!lineNumber && !colNumber) {
     start = 0;

packages/babel-code-frame/test/index.js

@@ -8,13 +8,13 @@ suite("babel-code-frame", function () {
       "class Foo {",
       "  constructor()",
       "};",
-    ].join('\n');
+    ].join("\n");
     assert.equal(codeFrame(rawLines, 2, 16), [
       "  1 | class Foo {",
       "> 2 |   constructor()",
       "    |                ^",
       "  3 | };",
-    ].join('\n'));
+    ].join("\n"));
   });
 
   test("optional column number", function () {
@@ -22,7 +22,7 @@ suite("babel-code-frame", function () {
       "class Foo {",
       "  constructor()",
       "};",
-    ].join('\n');
+    ].join("\n");
     assert.equal(codeFrame(rawLines, 2, null), [
       "  1 | class Foo {",
       "> 2 |   constructor()",
@@ -104,17 +104,86 @@ suite("babel-code-frame", function () {
       "> 2 | \t  \t\t    constructor\t(\t)",
       "    | \t  \t\t               \t \t ^",
       "  3 | \t};",
-    ].join('\n'));
+    ].join("\n"));
   });
 
   test("opts.highlightCode", function () {
     const rawLines = "console.log('babel')";
-    const result = codeFrame(rawLines, 1, 9, {highlightCode: true})
+    const result = codeFrame(rawLines, 1, 9, {highlightCode: true});
     const stripped = chalk.stripColor(result);
     assert.ok(result.length > stripped.length);
     assert.equal(stripped, [
       "> 1 | console.log('babel')",
       "    |         ^",
-    ].join("\n"))
+    ].join("\n"));
+  });
+
+  test("opts.linesAbove", function () {
+    var rawLines = [
+      "/**",
+      " * Sums two numbers.",
+      " *",
+      " * @param a Number",
+      " * @param b Number",
+      " * @returns Number",
+      " */",
+      "",
+      "function sum(a, b) {",
+      "  return a + b",
+      "}"
+    ].join("\n");
+    assert.equal(codeFrame(rawLines, 7, 2, { linesAbove: 1 }), [
+      "   6 |  * @returns Number",
+      ">  7 |  */",
+      "     |  ^",
+      "   8 | ",
+      "   9 | function sum(a, b) {",
+      "  10 |   return a + b",
+    ].join("\n"));
+  });
+
+  test("opts.linesBelow", function () {
+    var rawLines = [
+      "/**",
+      " * Sums two numbers.",
+      " *",
+      " * @param a Number",
+      " * @param b Number",
+      " * @returns Number",
+      " */",
+      "",
+      "function sum(a, b) {",
+      "  return a + b",
+      "}"
+    ].join("\n");
+    assert.equal(codeFrame(rawLines, 7, 2, { linesBelow: 1 }), [
+      "  5 |  * @param b Number",
+      "  6 |  * @returns Number",
+      "> 7 |  */",
+      "    |  ^",
+      "  8 | "
+    ].join("\n"));
+  });
+
+  test("opts.linesAbove and opts.linesBelow", function () {
+    var rawLines = [
+      "/**",
+      " * Sums two numbers.",
+      " *",
+      " * @param a Number",
+      " * @param b Number",
+      " * @returns Number",
+      " */",
+      "",
+      "function sum(a, b) {",
+      "  return a + b",
+      "}"
+    ].join("\n");
+    assert.equal(codeFrame(rawLines, 7, 2, { linesAbove: 1, linesBelow: 1 }), [
+      "  6 |  * @returns Number",
+      "> 7 |  */",
+      "    |  ^",
+      "  8 | "
+    ].join("\n"));
   });
 });