如何自定义ESLint警告，使文件名与行号显示在同一行？

ESLint支持通过调整格式化器配置来实现你要的跳转效果，以下是两种可行方案：

方案一：使用内置格式化器 #

ESLint自带的unix或stylish格式化器默认采用文件名:行号:列号的紧凑格式，直接在VSCode中配置即可：

• 打开VSCode设置（快捷键Ctrl+,/Cmd+,）
• 搜索ESLint: Format，找到ESLint > Format: Formatter选项
• 将其设置为unix（输出更简洁）或stylish
• 重启ESLint服务：打开命令面板（Ctrl+Shift+P/Cmd+Shift+P），输入ESLint: Restart ESLint Server执行

配置完成后，ESLint的警告/错误会自动以src/App.tsx:1:17格式显示，点击即可直接跳转到对应代码位置。

方案二：自定义格式化器脚本 #

如果内置格式化器无法满足个性化需求，可以自行编写简单的Node.js脚本作为自定义格式化器：

1. 在项目根目录创建custom-eslint-formatter.js，写入以下代码：

module.exports = function(results) {
  let output = '';
  results.forEach(result => {
    result.messages.forEach(msg => {
      const { filePath, line, column, severity, message, ruleId } = msg;
      const level = severity === 1 ? 'Warning' : 'Error';
      output += `${filePath}:${line}:${column} [${level}] ${message} (${ruleId})\n`;
    });
  });
  return output;
};

2. 在VSCode设置中，将ESLint > Format: Formatter的值设置为该脚本的相对路径（例如./custom-eslint-formatter.js）
3. 重启ESLint服务即可生效

注意：确保已安装并启用VSCode官方ESLint扩展，且项目根目录存在有效的.eslintrc配置文件。

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