Nodejs が強調表示されたコードをコンソールに出力する方法の詳細な説明-jsチュートリアル-php.cn

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

青灯夜游

リリース： 2021-05-12 10:46:28

転載

2375 人が閲覧しました

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

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
コンソールに色を印刷する方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

構文のハイライトを実現するにはコードを理解する必要がありますが、ハイライトするだけであれば字句解析で十分です。 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 を公開します。正規表現は多くのグループを持つトークンを識別するために使用され、関数は異なるグループ添字に対して異なるタイプを返すため、トークンの識別と分類を完了できます。

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