Wework Node Log File Highlighter

sample

介绍

这是一个可以给 wework node module 在本地开发时使用的日志增强扩展，它可以高亮（并支持自定义）日志、在日志中跟踪 log 位置或堆栈。此外，由于它将日志输出到 log 文件中，用户可以使用 vscode 的编辑能力去处理日志（比如使用正则搜索日志）。

快速开始

要想使用此插件高亮 node 模块输出的日志，只需要打开命令面板（Shift + Cmd + P）执行 Run Start 命令。

命令执行成功之后，插件会自动打开 log.log 文件，并且会实时刷新内容和自动滚动。

scrollSample

功能

语法高亮

插件自动对 .log 文件应用高亮来区分内容，也支持自己定义高亮规则。

追踪 conn 日志

可以跟踪每一行日志执行的位置或者指定的 namespace 的日志的调用堆栈。

快速启动 node 服务

可以执行 Run Start 启动项目。这个命令可以简单理解为在 node . 的基础上额外做了些工作，具体执行过程为：

终止已有的在项目端口上的进程（如果有的话），具体命令为 lsof -t -i :{pid} | xargs kill -9
然后使用 nohup node . > log.log 2>&1 & 将日志写入 log 文件。
在 vscode 右下角弹窗提示 Node . Started 。
打开 log.log 文件，并开始监听文件变更。

实时刷新和自动滚动

vscode 默认并不会在文件变更后立即刷新视图，而是会有一定的延迟。本插件使用 fs.watchFile 每隔 50ms 就会检查一次 log 文件变化，在发现文件变化后，如果用户正在查看 log 文件，就会自动滚动到底部。

自定义

自定义颜色

默认插件会使用 vscode 的主题颜色，如果想要修改的话，可以修改 editor.tokenColorCustomizations。

自定义高亮规则

插件内置了一些适用于 node 模块的高亮规则，同时也支持自定义。

如如下例子所示，用户可以在用户设置(User/settings.json)里定义规则：

"WWNodeLogFileHighlighter.customPatterns": [
    {
        "pattern": "free_go_.*?(?=(;|\\s))",
        "background": "#008f58",
        "textDecoration": "#a12828b7 underline",
    },
    {
        "pattern": "server start.*?\\d+",
        "background": "#ff923f",
    },
]

这个配置是实时生效的：

pattern sample

参数说明：

Setting	Optional	Description	Example
`pattern`	Mandatory	The matching expression. This can be either a string constant or a JavaScript regular expression (remember to escape special characters).	`foobar` `(todo\\|TODO)`
`foreground`	Optional	The color to use as foreground color for the matched pattern. Hex colors are preferred since they can be selected with the VS Code color picker but predefined VS Code color names work as well.	`yellow` `#ff5588`
`background`	Optional	The color to use as background color for the matched pattern.	`yellow` `#ff5588`
`fontWeight`	Optional	Used to change the weight of the font.	`bold`
`fontStyle`	Optional	Used to change the style of the font.	`italic`
`border`	Optional	Can be used for adding a border around matched text.	`2px solid yellow`
`borderRadius`	Optional	Can be used together with the `border` setting to make the border corners rounded.	`3px`
`letterSpacing`	Optional	Can be used to increase or decrease the horizontsl spacing between characters in the matched text.	`5px` `-1px`
`overviewColor`	Optional	If set, this enables matched text to be indicated in the overview ruler to the right of the text editor window in Code.	`yellow` `#ff5588`
`overviewRulerLane`	Optional	If `overviewColor` is set, then this setting controls the placement of the marker in the ruler.	`Left` `Right` `Center` `Full`
`textDecoration`	Optional	Used for adding additional CSS text decorations.	`red underline overline dotted` `red wavy underline`

Note: Both foreground and background are optional individually but at least one of them must be set for the custom pattern to be activated.

Tip: By only setting the background a custom pattern can be combined with the built-in patterns that control the foreground color. This is shown in the last pattern in the example above.

跟踪 conn log 代码位置

插件可以支持跟踪 conn log 的位置。可以配置记录 log 执行的位置，或者记录指定 namespace log 执行的堆栈。

"WWNodeLogFileHighlighter.conn": {
    "logLogPosition": false,
    "logStackOfNamespaces": ['mail.cluster:fork', 'mail.mstatic'],
},

Note: 这个配置需要重新执行 Run Start 才能生效。

在如下的例子中，记录了 log 的代码位置，并展示了 mail.rout_mgr:bind 这个命名空间的 log 的堆栈。

conn sample

Tips

File associations

To make VS Code treat other file extensions than the default .log as log files, add the following to the user settings:

"files.associations": {
    "*.log.*": "log"
},

The example above associates extensions such as .log.1 and .log.2 with the Log File highlighter extension.

Syntax highlighting of large files

VS Code disables color highlighting for large files by default. This can be disabled with the editor.largeFileOptimization setting. To enable highlighting for large log files without changing the setting for other file types, place it in the [log] scope like this:

"[log]": {
    "editor.largeFileOptimizations": false,
}

参考资料

高亮部分复用了 Log File Highlighter
自动刷新和自动滚动到底部功能，分别参考了 Auto Reload 和 auto scroll

Issues

如果有任何问题或者建议，可以联系 zyy !

Wework Node Log File highlighter

yyzh