How to use the @babel/code-frame.codeFrameColumns function in @babel/code-frame

function createFrame({file, loc}: LogOptions = {}): string {
  if (!file) {
    return '';
  }
  // The column location seems off by one, fixing that.
  if (loc) {
    loc.start.column++;
    loc.end.column++;
  }
  const frame = codeFrameColumns(file.source, loc, {highlightCode: true, forceColor: true});
  return `\nat ${file.path}:\n${frame}`;
}

export const error = ({ message, location }, source: string): string => {
  return codeFrameColumns(source, location, { highlightCode: true, message })
}

.catch((error: any) => {
          const { message, line, col: column } = error;
          console.error(
            codeFrameColumns(code, { start: { line, column } }, { message })
          );
          throw error;
        });

severity: message.getSeverity(),
          file: message.getFile(),
          line: message.getLine(),
          content: message.getContent(),
          code: message.getCode(),
          character: message.getCharacter(),
        }
      : message;

  const colors = new chalk.Instance({ enabled: useColors });
  const messageColor = message.isWarningSeverity() ? colors.yellow : colors.red;
  const fileAndNumberColor = colors.bold.cyan;

  const source = file && fs.existsSync(file) && fs.readFileSync(file, 'utf-8');
  const frame = source
    ? codeFrame(
        source,
        { start: { line: line, column: character } },
        { highlightCode: useColors }
      )
        .split('\n')
        .map(str => '  ' + str)
        .join(os.EOL)
    : '';

  return [
    messageColor.bold(`${types[type]} ${severity.toLowerCase()} in `) +
      fileAndNumberColor(`${file}(${line},${character})`) +
      messageColor(':'),
    content +
      '  ' +
      messageColor.underline((type === 'lint' ? 'Rule: ' : 'TS') + code),

} else {
      return defaultValue;
    }
  }
  try {
    if (_getOption(options, 'json5')) {
      return JSON5.parse(json);
    } else {
      return JSON.parse(json);
    }
  } catch (e) {
    let defaultValue = jsonParseErrorDefault(options);
    if (defaultValue === undefined) {
      let location = locationFromSyntaxError(e, json);
      if (location) {
        let codeFrame = codeFrameColumns(json, { start: location });
        e.codeFrame = codeFrame;
        e.message += `\n${codeFrame}`;
      }
      throw new JsonFileError(`Error parsing JSON file: ${file}`, e, 'EJSONPARSE');
    } else {
      return defaultValue;
    }
  }
}

},
        }
      } else if (err instanceof EmptyGraphQLTagError) {
        const location = err.templateLoc
          ? {
              start: err.templateLoc.start,
              end: err.templateLoc.end,
            }
          : null

        structuredError = {
          id: `85917`,
          location,
          context: {
            codeFrame: location
              ? codeFrameColumns(text, location, {
                  highlightCode: process.env.FORCE_COLOR !== `0`,
                })
              : null,
          },
        }
      } else if (err instanceof GraphQLSyntaxError) {
        const location = {
          start: locInGraphQlToLocInFile(
            err.templateLoc,
            err.originalError.locations[0]
          ),
        }

        structuredError = {
          id: `85918`,
          location,

const getCodeFrameFromSource = (sourceCode, { line, column, relativeFile, absoluteFile }) => {
  if (!sourceCode) return

  const frame = codeFrameColumns(sourceCode, { start: { line, column } })

  if (!frame) return

  return {
    line,
    column,
    relativeFile,
    absoluteFile,
    frame,
    language: getLanguageFromExtension(relativeFile),
  }
}

export function codeFrameError (node, msg: string) {
  let errMsg = ''
  try {
    errMsg = codeFrameColumns(setting.sourceCode, node && node.type && node.loc ? node.loc : node, {
      highlightCode: true
    })
  } catch (error) {
    errMsg = 'failed to locate source'
  }
  return new Error(`${msg}
-----
${errMsg}`)
}

if (m && m[0]) {
      whiteSpace = Math.min(whiteSpace, m[0].length);
    } else {
      whiteSpace = 0;
    }
  });
  lines.forEach(function(e) {
    let { content: text } = e;
    const { lineNumber: line } = e;

    if (isFinite(whiteSpace)) {
      text = text.substring(whiteSpace);
    }
    sourceCode[line - 1] = text;
  });
  const ansiHighlight = codeFrameColumns(
    sourceCode.join('\n'),
    {
      start: {
        line: lineNum,
        column:
          columnNum == null
            ? 0
            : columnNum - (isFinite(whiteSpace) ? whiteSpace : 0),
      },
    },
    {
      forceColor: true,
      linesAbove: contextSize,
      linesBelow: contextSize,
    }
  );

export function formatForkTsCheckerMessages(
  error: NormalizedMessageJson,
  useColors: boolean
): string {
  const colors = new chalk.constructor({ enabled: useColors })
  const { file } = error
  const source = file && fs.existsSync(file) && fs.readFileSync(file, 'utf-8')
  if (source) {
    const frame = codeFrameColumns(
      source,
      {
        start: {
          line: error.line,
          column: error.character,
        },
      },
      {
        highlightCode: IS_INTERACTIVE && !IS_CI,
      }
    )
    return (
      colors.dim(`${error.line}:${error.character} `) +
      error.content +
      colors.cyan(` (TS${error.code})`) +
      os.EOL +