如何让bash终端中stylelint报告的路径可点击跳转至IDE对应行

核心结论 #

不需要修改Stylelint源码，也不需要用正则替换管道这种不优雅的方案，通过Stylelint官方提供的自定义formatter能力就可以实现需求，formatter是专门用于控制校验结果输出格式的扩展机制，比插件更适配该场景。

可选实现方案 #

方案一：直接使用已适配跳转功能的第三方formatter #

目前已有多个开源的formatter默认支持终端超链接跳转能力，不需要自己开发，直接安装使用即可：

• 安装对应依赖，以常用的stylelint-formatter-pretty为例：

npm install stylelint-formatter-pretty --save-dev

• 调用时指定formatter即可：

stylelint "**/*.css" --formatter stylelint-formatter-pretty

• 也可以在Stylelint配置文件中全局配置：

// .stylelintrc.js
module.exports = {
  // 其他配置项
  formatter: 'stylelint-formatter-pretty'
}

输出的报错路径默认会生成终端可识别的超链接，点击即可跳转至IDE对应行位置。

方案二：自定义formatter #

如果现有第三方formatter不符合你的输出格式要求，可以自己开发轻量的自定义formatter：

• 自定义formatter本质是一个接收lint结果数组的函数，你只需要在输出路径时按照标准终端超链接语法拼接即可，参考代码：

// my-stylelint-formatter.js
module.exports = (results) => {
  results.forEach(result => {
    const filePath = result.source;
    result.warnings.forEach(warn => {
      // 生成终端超链接格式的路径
      const link = `\x1b]8;;file://${encodeURI(filePath)}\x1b\\${filePath}:${warn.line}:${warn.column}\x1b]8;;\x1b\\`;
      console.log(`${link}  ${warn.text} (${warn.rule})`);
    })
  })
}

• 调用时指定自定义formatter的路径即可：

stylelint "**/*.css" --formatter ./my-stylelint-formatter.js

补充说明 #

部分IDE内置终端默认支持文件路径:行号:列号格式的路径识别跳转，你也可以选择将Stylelint的默认formatter替换为string类型的formatter，输出纯文本的路径:行号:列号格式，也可以实现点击跳转，不需要额外依赖。

内容的提问来源于stack exchange，提问作者Thomas Kekeisen