@babel/code-frame

Traduzione Beta Non Ufficiale

Questa pagina è stata tradotta da PageTurner AI (beta). Non ufficialmente approvata dal progetto. Hai trovato un errore? Segnala problema →

Installazione

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

Utilizzo

codeFrameColumns

La funzione codeFrameColumns consente di decorare uno snippet di codice con numeri di riga e un indicatore che punta a una posizione specifica.

Opzionalmente evidenzierà anche il codice, adattandosi automaticamente alle capacità del terminale di output.

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

Se il numero di colonna non è noto, puoi ometterlo.

Puoi anche passare un hash end 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 | };

Opzioni

highlightCode

boolean, predefinito false.

Attiva/disattiva l'evidenziazione sintattica del codice come JavaScript per i terminali.

linesAbove

number, predefinito 2.

Regola il numero di righe da mostrare sopra l'errore.

linesBelow

number, predefinito 3.

Regola il numero di righe da mostrare sotto l'errore.

forceColor

boolean, predefinito false.

Forza l'evidenziazione sintattica come JavaScript (per ambienti non terminali); sostituisce highlightCode.

message

string, altrimenti nulla

Passa una stringa da visualizzare in linea (se possibile) accanto alla posizione evidenziata nel codice. Se non può essere posizionata in linea, verrà mostrata sopra il frame del codice.

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

highlight

La funzione highlight aggiunge l'evidenziazione sintattica a uno snippet di codice per la visualizzazione in un terminale.

JavaScript

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

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

const result = highlight(code);

console.log(result);

JavaScript

class Foo {
  constructor()
}

Migrazione da @babel/highlight

La funzionalità highlight era originariamente separata nel suo pacchetto @babel/highlight.

Puoi effettuare la migrazione come segue:

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;

Aggiornamento da versioni precedenti

Prima della versione 7, l'unica API esposta da questo modulo era per una singola riga e un indicatore di colonna opzionale. La vecchia API ora genera un avviso di deprecazione.

La nuova API accetta un oggetto location, simile a quello disponibile in un AST.

Ecco un esempio della API deprecata (ma ancora disponibile):

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

Per ottenere la stessa evidenziazione con la nuova 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);