@parcel/codeframe 是一个基于 chalk 和 word-wrap 的命令行输出美化工具，同时也是一个非常好用的代码出错信息提示工具。
在开发用到代码打包工具 Parcel 的同学们肯定有使用到过，但不同于打包工具的配置在插件中导入，@parcel/codeframe 可以在我们自己的前端项目中直接使用。
为了方便大家学习和使用 @parcel/codeframe，本篇文章将会为大家提供详细的教程和示例代码。
npm 安装
你可以通过 npm 安装 @parcel/codeframe：
npm install @parcel/codeframe
使用
使用示例：
const { codeFrameColumns } = require('@babel/code-frame');
const rawLines = `const answer = 6 * 7`;
const lineNumber = 1;
const columnNumber = 9;
const result = codeFrameColumns(rawLines, { start: { line: lineNumber, column: columnNumber } });
console.log(result);在这个示例中， codeFrameColumns 方法的第一个参数 rawLines 是包含错误信息的代码文本，第二个参数 start 是包含错误信息的行列。
当代码出现错误时，使用 codeFrameColumns 方法可以返回一个命名行列的错误信息提示，具体如下：
1 | const answer = 6 * 7 | ...................^ SyntaxError: Unexpected token *
具备错误信息定位之代码
当 @parcel/codeframe 遇到错误信息会输出包含错误定位之代码的结果。
示例代码如下：
-- -------------------- ---- -------
----- --------- - -----------------------------
----- -------- - ------ ------ - - - --------- --- - ----
----- ------ - ------------------- --- -- - -------------- ---- ---
--------------------
--
- - ----- ------ - - - --
- - ----- --- - ---
- --
--自定义模块参数
使用 @parcel/codeframe 还可以设置模块参数来自定义效果，具体如下:
-- -------------------- ---- -------
----- --------- - -----------------------------
----- -------- - ------ ------ - - - --------- --- - ----
----- ------- - -
----------- --
----------- --
-------------- -----
--
----- ------ - ------------------- --- -- ---------
--------------------在这个示例中，使用了 options 参数，该参数内包含了 linesAbove、linesBelow 和 highlightCode 三个选项，分别代表输出内容的上限、下限和代码是否加粗。
总结
通过本篇文章的介绍，我们学习到了如何在项目中使用 @parcel/codeframe 工具，以及如何结合参数实现自定义效果的展示，在处理代码错误信息输出上变得更加轻松简便。
想要了解更多 npm 包及其使用方法的同学们，一定不要错过 @parcel/codeframe 的介绍哦！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedadbab5cbfe1ea0610cfa