code-frame


Install

 sh
npm install --save-dev @babel/code-frame

Usage

import { codeFrameColumns } from '@babel/code-frame';

const rawLines = `class Foo {
  constructor()
}`;
const location = { start: { line: 2, column: 16 } };

const result = codeFrameColumns(rawLines, location, { /* options */ });

console.log(result);

  1 | class Foo {
2 |   constructor()
    |
  3 | }

If the column number is not known, you may omit it.

You can also pass an end hash in location.

Js中文网 – 前端进阶资源教程 www.javascriptC.com ,Babel中文文档
一个致力于帮助开发者用代码改变世界为使命的平台

import { codeFrameColumns } from '@babel/code-frame';

const rawLines = `class Foo {
  constructor() {
    console.log("hello");
  }
}`;
const location = { start: { line: 2, column: 17 }, end: { line: 4, column: 3 } };

const result = codeFrameColumns(rawLines, location, { /* options */ });

console.log(result);

  1 | class Foo {
2 |   constructor() {
    |                 ^
3 |     console.log("hello");
    | ^^^^^^^^^^^^^^^^^^^^^^^^^
4 |   }
    | ^^^
  5 | };

Options

highlightCode

boolean, defaults to false.

Toggles syntax highlighting the code as JavaScript for terminals.

linesAbove

number, defaults to 2.

Adjust the number of lines to show above the error.

linesBelow

number, defaults to 3.

Adjust the number of lines to show below the error.

forceColor

boolean, defaults to false.

Enable this to forcibly syntax highlight the code as JavaScript (for non-terminals); overrides highlightCode.

message

Js中文网 – 前端进阶资源教程 www.javascriptC.com ,Babel中文文档
一个致力于帮助开发者用代码改变世界为使命的平台

string, otherwise nothing

Pass in a string to be displayed inline (if possible) next to the highlighted location in the code. If it can’t be positioned inline, it will be placed above the code frame.


1 | class Foo {
2 |   constructor()
  |   Missing {
3 | };

Upgrading from prior versions

Prior to version 7, the only API exposed by this module was for a single line and optional column pointer. The old API will now log a deprecation warning.

The new API takes a location object, similar to what is available in an AST.

This is an example of the deprecated (but still available) API:

import codeFrame from '@babel/code-frame';

const rawLines = `class Foo {
  constructor()
}`;
const lineNumber = 2;
const colNumber = 16;

const result = codeFrame(rawLines, lineNumber, colNumber, { /* options */ });

console.log(result);

To get the same highlighting using the new API:

import { codeFrameColumns } from '@babel/code-frame';

const rawLines = `class Foo {
  constructor() {
    console.log("hello");
  }
}`;
const location = { start: { line: 2, column: 16 } };

const result = codeFrameColumns(rawLines, location, { /* options */ });

console.log(result);

← generatorhelpers →

来源:Js中文网 – 前端进阶资源教程
链接:https://www.javascriptc.com/docs/babel-manual/babel-code-frame

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界