快捷導(dǎo)航

nodejs控制臺打印高亮代碼的實(shí)現(xiàn)方法

更新時間：2021年05月11日 12:08:07 作者：神說要有光zxg

這篇文章主要給大家介紹了關(guān)于nodejs控制臺打印高亮代碼的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

當(dāng)代碼運(yùn)行報錯時，我們會打印錯誤，錯誤中有堆棧信息，可以定位到對應(yīng)的代碼位置。但有的時候我們希望能夠更直接準(zhǔn)確的打印報錯位置的代碼。比如這樣：

這個可以使用 @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);

有沒有感覺比較神奇，它是怎么做到的打印出上面的代碼格式的（code frame）？

本文我們就來探究下原理。

主要會解答三個問題：

如何打印出標(biāo)記相應(yīng)位置代碼的 code frame（就是上圖的打印格式）
如何實(shí)現(xiàn)語法高亮
如何在控制臺打印顏色

如何打印 code frame

我們先不管高亮，實(shí)現(xiàn)這樣的格式的打?。?/p>

有啥思路沒？

其實(shí)也比較容易想到，傳入了源代碼、標(biāo)記開始和結(jié)束的行列號，那么我們就能夠計算出顯示標(biāo)記（marker）的行是哪些，以及這些行的哪些列，然后依次對每一行代碼做處理，如果本行沒有標(biāo)記則保持原樣，如果本行有標(biāo)記的話，那么就在開始打印一個 marker “>”，并且在下面打印一行 marker "^"，最后一個標(biāo)記行還要打印錯誤信息。

我們來看一下 @babel/code-frame 的實(shí)現(xiàn)：

首先，分割字符串成每一行的數(shù)組，然后根據(jù)傳入的位置計算出 marker 所在的位置。

比如圖中第二行的第 1 到 12 列，第三行的 0 到 5 列。

然后對每一行做處理，如果本行有標(biāo)記，則拼成 marker + gutter（行號） + 代碼的格式，下面再打印一行 marker，最后的 marker 行打印 message。沒有標(biāo)記不處理。

這樣最終拼出的就是這樣的 code frame：

我們實(shí)現(xiàn)了 code frame 的拼接，暫時忽略了高亮，那么怎么做語法高亮呢？

如何實(shí)現(xiàn)語法高亮

實(shí)現(xiàn)語法高亮需要理解代碼，但是如果只是高亮，詞法分析就足夠了。babel 也是這么做的，@babel/highlight 包里面完成了高亮代碼的邏輯。

先看效果：

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

上面的源碼被分成了 token 數(shù)組：

[
[ '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' ]
]

token 怎么分的呢？

一般來說詞法分析就是有限狀態(tài)自動機(jī)（DFA），但是這里實(shí)現(xiàn)比較簡單，是通過正則匹配的：

js-tokens 這個包暴露出來一個正則，一個函數(shù)，正則是用來識別 token 的，其中有很多個分組，而函數(shù)里面是對不同的分組下標(biāo)返回了不同的類型，這樣就能完成 token 的識別和分類。

在 @babel/highlight 包里也是這樣用的：

（正則來做詞法分析有很多限制條件，比如不能處理遞歸的情況，所以這種方式不是通用的，通用詞法分析還是得用狀態(tài)機(jī) DFA。）

有了分類之后，不同 token 顯示不同顏色，建立個 map 就行了。

@babel/highlight 也是這么做的：

我們知道了怎么做語法高亮，使用 chalk 的 api 就可以打印顏色，那控制臺打印顏色的原理是什么呢？

如何在控制臺打印顏色

控制臺打印的是 ASCII 碼，并不是所有的編碼都對應(yīng)可見字符，ASCII 碼有一部分字符是對應(yīng)控制字符的，比如 27 是 ESC，就是我們鍵盤上的 ESC 鍵，是 escape 的縮寫，按下它可以完成一些控制功能，這里我們可以通過打印 ESC 的 ASCII 碼來進(jìn)入控制打印顏色的狀態(tài)。

格式是這樣的：