Skip to main content

@babel/code-frame

安装​

🌐 Install

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

用法​

🌐 Usage

codeFrameColumns​

codeFrameColumns 函数允许你在代码片段上添加行号，并用标记指向特定位置。

🌐 The codeFrameColumns function allows you to decorate a code snipped with line numbers and with a marker pointing to a specific location.

它还将选择性地高亮你的代码，默认为输出终端支持的内容。

🌐 It will also optionally highlight your code, defaulting to what is supported by the output terminal.

JavaScript
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.

你也可以在 location 中传递一个 end 哈希。

🌐 You can also pass an end hash in location.

JavaScript
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，默认值为 false。

切换语法，将代码高亮为终端的 JavaScript。

🌐 Toggles syntax highlighting the code as JavaScript for terminals.

linesAbove​

number，默认值为 2。

调整行数以显示在错误上方。

🌐 Adjust the number of lines to show above the error.

linesBelow​

number，默认是 3。

调整行数以显示在错误下方。

🌐 Adjust the number of lines to show below the error.

forceColor​

boolean，默认值为 false。

启用此项可以强制将代码语法高亮显示为 JavaScript（用于非终端）；会覆盖 highlightCode。

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

message​

string，否则什么都没有

传入一个字符串，如果可能的话，会在代码中高亮位置的旁边内联显示。如果无法内联显示，它将被放置在代码框的上方。

🌐 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 | };

highlight​

highlight 函数会给代码片段添加语法高亮，然后在终端显示。

🌐 The highlight function adds syntax highlighting to a code snipped, to be displayed in a terminal.

JavaScript
import { highlight } from "@babel/code-frame";

const code = `class Foo {
  constructor()
}`;

const result = highlight(code);

console.log(result);
JavaScript
class Foo {
  constructor()
}

从 @babel/highlight 迁移​

🌐 Migrating from @babel/highlight

highlight 功能最初被拆分到它自己的包 @babel/highlight 中。

🌐 The highlight functionality was originally split in its own package, @babel/highlight.

你可以按以下方式迁移：

使用 @babel/highlight使用 @babel/code-frame
JavaScript
import highlight from "@babel/highlight";

highlight(text, { forceColor: true });
JavaScript
import { highlight } from "@babel/code-frame";

highlight(text);
JavaScript
import highlight from "@babel/highlight";

highlight(text);
JavaScript
import { highlight } from "@babel/code-frame";

process.stdout.hasColors() ? highlight(text) : text;