Generate errors that contain a code frame that point to source locations.
npm install @esmkit/code-frameGenerate errors that contain a code frame that point to source locations.
``bash`
bun add @esmkit/code-frame
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.
`ts
import { codeFrameColumns } from "@esmkit/code-frame";
const rawLines = class Foo {
constructor()
};
const location = { start: { line: 2, column: 16 } };
const result = codeFrameColumns(rawLines, location, {
/ options /
});
console.log(result);
`
`bash`
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.
`ts
import { codeFrameColumns } from "@esmkit/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);
`
`bash`
1 | class Foo {
> 2 | constructor() {
| ^
> 3 | console.log("hello");
| ^^^^^^^^^^^^^^^^^^^^^^^^^
> 4 | }
| ^^^
5 | };
- 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: 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.
`bash``
1 | class Foo {
> 2 | constructor()
| ^ Missing {
3 | };
MIT © BILLGO. See LICENSE for details.