How to use babel-code-frame - 10 common examples

const firstFrame = frames[0];
  // Need the first frame for highlighting affected source code, sometimes that's not available.
  if (firstFrame != null) {
    const wrappedFirstFrame = wrapCallSite(firstFrame);
    const sourceFile = cleanSourceFileName(wrappedFirstFrame.getFileName());

    let sourceText = '';
    try {
      sourceText = readFileSync(sourceFile, 'utf-8');
    } catch (error) {
      // Ignore errors
    }

    // Generate highlighted code frame and attach it to the native error object (for later usage)
    if (sourceText) {
      const result = codeFrame(
        sourceText,
        wrappedFirstFrame.getLineNumber(),
        wrappedFirstFrame.getColumnNumber(),
        CODE_FRAME_OPTIONS,
      );
      nativeError.code = result;
    }
  }

  return frames.map(frame => frameToString(frame)).filter(item => item != null).join('\n');
}

let result;
    try {
      result = Babel.transform(code, customConfig);
    } catch (e) {
      e.message = e.message.replace('unknown', path);

      // Match the line+col
      const lineColRegex = /\((\d+):(\d+)\)/;

      const match = e.message.match(lineColRegex);
      if (match && match[1] && match[2]) {
        const lineNumber = +match[1];
        const colNumber = +match[2];

        const niceMessage =
          e.message + '\n\n' + codeFrame(code, lineNumber, colNumber);

        e.message = niceMessage;
      }

      throw e;
    }

    const dependencies = getDependencies(detective.metadata(result));
    if (isV7) {
      // Force push this dependency, there are cases where it isn't included out of our control.
      // https://twitter.com/vigs072/status/1103005932886343680
      // TODO: look into this
      dependencies.push({
        path: '@babel/runtime/helpers/interopRequireDefault',
        type: 'direct',
      });

return this.makeResult({ code, ignored: true });
      } else {
        return inner();
      }
    } catch (err) {
      if (err._comal) {
        throw err;
      } else {
        err._comal = true;
      }

      let message = err.message = `${file.filename}: ${err.message}`;

      let loc = err.loc;
      if (loc) {
        err.codeFrame = codeFrame(code, loc.line, loc.column + 1, this.opts);
        message += "\n" + err.codeFrame;
      }

      if (process.browser) {
        // chrome has it's own pretty stringifier which doesn't use the stack property
        // https://github.com/babel/babel/issues/2175
        err.message = message;
      }

      if (err.stack) {
        let newStack = err.stack.replace(err.message, message);
        err.stack = newStack;
      }

      throw err;
    }

// Need the first frame for highlighting affected source code, sometimes that's not available.
  if (firstFrame != null)
  {
    var wrappedFirstFrame = wrapCallSite(firstFrame)
    var sourceFile = cleanSourceFileName(wrappedFirstFrame.getFileName())

    var sourceText = ""
    try {
      sourceText = readFileSync(sourceFile, "utf-8")
    } catch (error) {
      // Ignore errors
    }

    // Generate highlighted code frame and attach it to the native error object (for later usage)
    if (sourceText) {
      const result = codeFrame(sourceText,
        wrappedFirstFrame.getLineNumber(), wrappedFirstFrame.getColumnNumber(), CODE_FRAME_OPTIONS)
      nativeError.code = result
    }
  }

  return frames.map((frame) => frameToString(frame))
    .filter((item) => item != null)
    .join("\n")
}

return this.makeResult({ code, ignored: true });
      } else {
        return callback();
      }
    } catch (err) {
      if (err._babel) {
        throw err;
      } else {
        err._babel = true;
      }

      let message = err.message = `${this.opts.filename}: ${err.message}`;

      const loc = err.loc;
      if (loc) {
        err.codeFrame = codeFrame(code, loc.line, loc.column + 1, this.opts);
        message += "\n" + err.codeFrame;
      }

      if (process.browser) {
        // chrome has it's own pretty stringifier which doesn't use the stack property
        // https://github.com/babel/babel/issues/2175
        err.message = message;
      }

      if (err.stack) {
        const newStack = err.stack.replace(err.message, message);
        err.stack = newStack;
      }

      throw err;
    }

// If the stack trace already contains the message, we improve the
  // readability by omitting the message
  if (!includes(err.stack, err.message)) {
    lines.push(err.message);
  }

  // Improve the reporting on parse errors by generating a code frame
  if (err.loc && !err.codeFrame) {
    let text;
    try {
      text = fs.readFileSync(file, 'utf8');
    } catch (err) {
      // Ignore the error
    }
    if (text) {
      err.codeFrame = babelCodeFrame(text, err.loc.line, err.loc.column);
    }
  }

  if (
    err.codeFrame &&
    // We should try to avoid duplicating the code frame, if it's
    // already been added by another tool
    !includes(err.message, err.codeFrame) &&
    !includes(err.stack, err.codeFrame)
  ) {
    lines.push(err.codeFrame);
  }

  lines.push(err.stack);

  return lines.join('\n');

throw err;
      } else {
        err._babel = true;
      }

      let message = (err.message = `${this.opts.filename}: ${err.message}`);

      const loc = err.loc;
      if (loc) {
        const location = {
          start: {
            line: loc.line,
            column: loc.column + 1,
          },
        };
        err.codeFrame = codeFrameColumns(code, location, this.opts);
        message += "\n" + err.codeFrame;
      }

      if (process.browser) {
        // chrome has it's own pretty stringifier which doesn't use the stack property
        // https://github.com/babel/babel/issues/2175
        err.message = message;
      }

      if (err.stack) {
        const newStack = err.stack.replace(err.message, message);
        err.stack = newStack;
      }

      throw err;
    }

import codeFrame from "babel-code-frame";

const code = `
    const number = 1;
    var string = 'foo';

    function print(name: string) {
        console.log(string + name);
    }
`;

codeFrame(code, 5, 22);
codeFrame(code, 5, 22, { forceColor: true });
codeFrame(code, 2, 2, { highlightCode: true });

}, function (err, result) {
      if (err) {
        if (err.loc) {
          console.log(`${file} syntax error:`)
          console.log(codeFrame(readFileSync(file, 'utf8'), err.loc.line, err.loc.column))
        }
        reject(err)
        return
      }
      writeFileSync(file, result.code)
      try {
        beautifulFile(file)
      } catch (err) {

      }
      resolve(result)
    })
  })

export default function getCodeFrame(node, state) {
  return codeFrame(
    state.file.code,
    node.loc.start.line,
    node.loc.start.column,
    {
      highlightCode: true,
    }
  );
}