メインコンテンツにスキップ

@babel/code-frame

インストール​

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

使い方​

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

列番号が不明な場合は、省略できます。

location に end ハッシュを渡すこともできます。

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

オプション​

highlightCode​

boolean、デフォルトは false です。

ターミナルでコードをJavaScriptとして構文強調表示を切り替えます。

linesAbove​

number、デフォルトは 2 です。

エラーの上に表示する行数を調整します。

linesBelow​

number、デフォルトは 3 です。

エラーの下に表示する行数を調整します。

forceColor​

boolean、デフォルトは false です。

これを有効にすると、(非ターミナルの場合) コードを強制的にJavaScriptとして構文強調表示します。highlightCode を上書きします。

message​

string、それ以外の場合は何もなし

コード内の強調表示された場所の横 (可能な場合) にインラインで表示する文字列を渡します。インラインで配置できない場合は、コードフレームの上に配置されます。

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

以前のバージョンからのアップグレード​

バージョン 7 より前は、このモジュールで公開されていた唯一の API は、単一行およびオプションの列ポインター用でした。古い API は、非推奨の警告をログに記録するようになりました。

新しい API は、AST で利用可能なものと同様の location オブジェクトを受け取ります。

これは、非推奨（ただし、まだ利用可能）な API の例です。

JavaScript
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);

新しい API を使用して同じ強調表示を取得するには

JavaScript
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);