|
|
2 tuần trước cách đây | |
|---|---|---|
| .. | ||
| lib | 2 tuần trước cách đây | |
| README.md | 2 tuần trước cách đây | |
| package.json | 2 tuần trước cách đây | |
Generate errors that contain a code frame that point to source locations.
npm install --save-dev @babel/code-frame
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.
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 | };
highlightCodeboolean, defaults to false.
Toggles syntax highlighting the code as JavaScript for terminals.
linesAbovenumber, defaults to 2.
Adjust the number of lines to show above the error.
linesBelownumber, defaults to 3.
Adjust the number of lines to show below the error.
forceColorboolean, defaults to false.
Enable this to forcibly syntax highlight the code as JavaScript (for non-terminals); overrides highlightCode.
messagestring, 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 | };
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);