@babel/code-frame

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Installation

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

Utilisation

codeFrameColumns

La fonction codeFrameColumns permet d'annotater un extrait de code avec des numéros de ligne et un marqueur indiquant un emplacement spécifique.

Elle peut également mettre en surbrillance votre code si nécessaire, en s'adaptant par défaut aux capacités du terminal de sortie.

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 le numéro de colonne est inconnu, vous pouvez l'omettre.

Vous pouvez également fournir un hash end dans 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 | };

Options

highlightCode

boolean, valeur par défaut : false.

Active/désactive la coloration syntaxique du code en JavaScript pour les terminaux.

linesAbove

number, valeur par défaut : 2.

Ajuste le nombre de lignes à afficher au-dessus de l'erreur.

linesBelow

number, valeur par défaut : 3.

Ajuste le nombre de lignes à afficher sous l'erreur.

forceColor

boolean, valeur par défaut : false.

Force la coloration syntaxique JavaScript (pour les environnements non-terminaux) ; prioritaire sur highlightCode.

message

string, sinon rien

Chaîne à afficher en ligne (si possible) à côté de l'emplacement mis en surbrillance dans le code. Si le positionnement en ligne est impossible, elle apparaîtra au-dessus du cadre de code.

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

highlight

La fonction highlight ajoute une coloration syntaxique à un extrait de code pour affichage dans un terminal.

JavaScript

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

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

const result = highlight(code);

console.log(result);

JavaScript

class Foo {
  constructor()
}

Migration depuis @babel/highlight

La fonctionnalité highlight était initialement séparée dans son propre package @babel/highlight.

Vous pouvez migrer comme suit :

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;

Mise à niveau depuis les versions antérieures

Avant la version 7, la seule API exposée par ce module fonctionnait avec une seule ligne et un pointeur de colonne optionnel. L'ancienne API génère désormais un avertissement de dépréciation.

La nouvelle API utilise un objet location, similaire à ceux disponibles dans un AST.

Exemple de l'API dépréciée (toujours fonctionnelle) :

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

Pour obtenir le même résultat avec la nouvelle 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);