Nodejs が強調表示されたコードをコンソールに出力する方法の詳細な説明

この記事では、nodejs が強調表示されたコードをコンソールに表示する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

コードが実行され、エラーが報告されると、エラーが出力されます。エラーにはスタック情報が含まれており、対応するコードの場所を見つけることができます。しかし、エラー箇所のコードをより直接的かつ正確に出力したい場合もあります。 [推奨学習: "nodejs チュートリアル "]

例:

これは、@babel/code-frames を使用して実行できます。宛先:

const { codeFrameColumns } = require('@babel/code-frame');

const res = codeFrameColumns(code, {
  start: { line: 2, column: 1 },
  end: { line: 3, column: 5 },
}, {
  highlightCode: true,
  message: '这里出错了'
});

console.log(res);

もっと魔法的だと思いますか? 上記のコード形式 (コード フレーム) はどのように出力されますか?

この記事では、その原理について探っていきます。

主に 3 つの質問に答えます:

• 対応する位置にコードをマークするコード フレームを印刷する方法 (上の図の印刷形式)
• 高度な構文を実現する方法 Bright
• コンソールに色を印刷する方法

コード フレームを印刷する方法

最初に強調表示を無視して、これで印刷を実現しましょう。形式:

何かアイデアはありますか?

実際には、これを考えるのが簡単です。ソース コードと、マークの先頭と末尾の行番号と列番号が渡されると、どの行にマーカーが表示され、どの行に表示されるかを計算できます。コードの各行は順番に処理されます。この行にマークがない場合はそのままです。この行にマークがある場合は、マーカー "> が表示されます。 " が先頭に出力され、マーカー ## の行が下に出力されます。#"^"、最後のマークされた行にもエラー メッセージが出力されます。

@babel/code-frame の実装を見てみましょう:

まず、文字列を行ごとに配列に分割し、マーカーの位置を計算します。渡された位置 Location に基づいて。

たとえば、図の 2 行目の列 1 ～ 12 と 3 行目の列 0 ～ 5。

その後、各行を処理します。この行にマークがある場合は、それをマーカー ガター (行番号) コードの形式に変換し、行を出力します。最後のマーカー行にはメッセージが出力されます。タグは処理されません。

最終結果は次のコード フレームです:

コード フレームのスプライシング、ハイライトを実装しました。は一時的に無視されますが、構文の強調表示を行うにはどうすればよいですか?

構文のハイライトの実装方法

構文のハイライトを実現するにはコードを理解する必要がありますが、ハイライトするだけであれば字句解析で十分です。 Babel も同じことを行い、コードを強調表示するロジックは @babel/highlight パッケージで完成します。

最初に効果を見てください:

const a = 1;
const b = 2;
console.log(a + b);

上記のソース コードはトークン配列に分割されています:

[
  [ 'whitespace', '\n' ], [ 'keyword', 'const' ],
  [ 'whitespace', ' ' ],  [ 'name', 'a' ],
  [ 'whitespace', ' ' ],  [ 'punctuator', '=' ],
  [ 'whitespace', ' ' ],  [ 'number', '1' ],
  [ 'punctuator', ';' ],  [ 'whitespace', '\n' ],
  [ 'keyword', 'const' ], [ 'whitespace', ' ' ],
  [ 'name', 'b' ],        [ 'whitespace', ' ' ],
  [ 'punctuator', '=' ],  [ 'whitespace', ' ' ],
  [ 'number', '2' ],      [ 'punctuator', ';' ],
  [ 'whitespace', '\n' ], [ 'name', 'console' ],
  [ 'punctuator', '.' ],  [ 'name', 'log' ],
  [ 'bracket', '(' ],     [ 'name', 'a' ],
  [ 'whitespace', ' ' ],  [ 'punctuator', '+' ],
  [ 'whitespace', ' ' ],  [ 'name', 'b' ],
  [ 'bracket', ')' ],     [ 'punctuator', ';' ],
  [ 'whitespace', '\n' ]
]

トークンはどのように分割されますか?

一般に、字句解析は有限状態オートマトン (DFA) ですが、ここでの実装は規則的なマッチングを通じて比較的単純です。

js-tokens このパッケージは、 Regular と Function を公開します。正規表現は多くのグループを持つトークンを識別するために使用され、関数は異なるグループ添字に対して異なるタイプを返すため、トークンの識別と分類を完了できます。

は @babel/highlight パッケージでも使用されます:

(字句解析用の正規表現が多数あります)再帰を処理できないなどの制限があるため、この方法は普遍的ではありません。一般的な字句解析では依然としてステート マシン DFA を使用する必要があります。)

分類後、異なるトークンは異なる色で表示されます。マップを作成するだけです。

@babel/highlight も同じことを行います:

私たちは構文の強調表示を行う方法を知っており、チョーク API を使用して色を印刷し、次に内容を制御します。台湾の印刷原理はカラーですか？

如何在控制台打印颜色

控制台打印的是 ASCII 码，并不是所有的编码都对应可见字符，ASCII 码有一部分字符是对应控制字符的，比如 27 是 ESC，就是我们键盘上的 ESC 键，是 escape 的缩写，按下它可以完成一些控制功能，这里我们可以通过打印 ESC 的 ASCII 码来进入控制打印颜色的状态。

格式是这样的：

打印一个 ESC 的 ASCII 码，之后是 [ 代表开始，m 代表结束，中间是用 ; 分隔的 n 个控制字符，可以控制很多样式，比如前景色、背景色、加粗、下划线等等。

ESC 的 ASCII 码是 27，有好几种写法：一种是字符表示的 \e ，一种是 16 进制的 \0x1b（27 对应的 16进制），一种是 8 进制的 \033，这三种都表示 ESC。

我们来试验一下： 1 表示加粗、36 表示前景色为青色、4 表示下划线，下面三种写法等价：

\e[36;1;4m
\033[36;1;4m
\0x1b[36;1;4m

我们来试一下：

都打印了正确的样式！

当然，加了样式还要去掉，可以加一个 \e[0m 就可以了（\033[0m,\0x1b[0m 等价）。

chalk（nodejs 的在终端打印颜色的库）的不同方法就是封装了这些 ASCII 码的颜色控制字符。

上面每行代码被高亮过以后的代码是：

这样也就实现了不同颜色的打印。

总结

至此，我们能实现开头的效果了：支持 code frame 的打印，支持语法高亮，能够打印颜色

本文我们探究了这种效果的实现原理，先从 code frame 是怎么拼接的，然后每一行的代码是怎么做高亮的，之后是高亮具体是怎么打印颜色的。

不管是 code frame 的打印，还是语法高亮或者控制台打印颜色，都是特别常见的功能，希望这篇文章能够帮你彻底掌握这 3 方面的原理。

更多编程相关知识，请访问：编程视频！！

以上がNodejs が強調表示されたコードをコンソールに出力する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。