@babel/code-frame

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Instalación

npm

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

Yarn

yarn add --dev @babel/code-frame

pnpm

pnpm add --save-dev @babel/code-frame

Bun

bun add --dev @babel/code-frame

Uso

codeFrameColumns

La función codeFrameColumns permite decorar un fragmento de código con números de línea y un marcador que apunta a una ubicación específica.

También puede resaltar sintácticamente tu código, utilizando por defecto lo que soporte la terminal de salida.

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

Si no se conoce el número de columna, puedes omitirlo.

También puedes pasar un hash end en 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 | };

Opciones

highlightCode

boolean, valor predeterminado: false.

Activa/desactiva el resaltado sintáctico del código como JavaScript para terminales.

linesAbove

number, valor predeterminado: 2.

Ajusta el número de líneas a mostrar sobre el error.

linesBelow

number, valor predeterminado: 3.

Ajusta el número de líneas a mostrar bajo el error.

forceColor

boolean, valor predeterminado: false.

Habilita esta opción para forzar el resaltado sintáctico como JavaScript (en entornos no terminales); anula highlightCode.

message

string, en caso contrario nada

Proporciona una cadena para mostrar en línea (si es posible) junto a la ubicación resaltada en el código. Si no puede posicionarse en línea, se colocará encima del marco de código.

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

highlight

La función highlight añade resaltado sintáctico a un fragmento de código para mostrarlo en una terminal.

JavaScript

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

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

const result = highlight(code);

console.log(result);

JavaScript

class Foo {
  constructor()
}

Migración desde @babel/highlight

La funcionalidad highlight originalmente estaba separada en su propio paquete, @babel/highlight.

Puedes migrar de la siguiente manera:

Using @babel/highlight	Using @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;

Actualización desde versiones anteriores

Antes de la versión 7, la única API expuesta por este módulo era para una sola línea y un puntero de columna opcional. La API antigua ahora mostrará una advertencia de desuso.

La nueva API toma un objeto location, similar al disponible en un AST.

Este es un ejemplo de la API obsoleta (pero aún disponible):

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

Para obtener el mismo resaltado usando la nueva 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);