In VS Code, is there a way to enable clicking ESLint output to go to the file and line number?

[sibljon]

The ESLint formatter for Create React App currently outputs in this format:

src/components/entity/visits/VisitCategoriesDefaultPage.jsx
  Line 55:9:  Duplicate key 'content'  no-dupe-keys

However, in VS Code's terminal, you are only able to click on the file path (and thus, are taken to the top of the file). Instead, I'd like to be taken to the exact line number.

One way to achieve this would have formatter include the line:column with the file, such as:

src/components/entity/visits/VisitCategoriesDefaultPage.jsx:55:9
  Line 55:9:  Duplicate key 'content'  no-dupe-keys

Any ideas? For example, is it possible to choose a custom ESLint formatter (without having to eject)?

[spirulence]

I had the same question and ended up writing a custom formatter. May this be helpful to future searchers who ended up here like me. I ended up trimming and padding a couple of the fields to make the display more compact, and then of course there is the "short path" at the end of the line with a line:column reference

In VS Code, on the codebases I work on, the short path is not as fast to navigate to as the full path but it is more concise in the output. Because it manipulates the path strings, I think it would probably need modification to work on Windows development machines

This is the formatter:

import chalk from 'chalk';

export default function(results) {
  let output = '';
  
  results.forEach(result => {
    if (result.messages.length > 0) {
      // Full path first
      output += `${result.filePath}\n`;
      
      result.messages.forEach(message => {
        // Get last two path components
        const pathParts = result.filePath.split('/');
        const shortPath = pathParts.slice(-2).join('/');
        
        // Determine color based on severity
        const severityColor = message.severity === 2 ? chalk.red : chalk.yellow;
        const severityText = message.severity === 2 ? 'error' : 'warn';
        
        const trimmedMessage = message.message.length > 50 
          ? message.message.slice(0, 47) + '...'
          : message.message;

        // Pad each column for alignment
        const severity = severityText.padEnd(5);
        const msg = trimmedMessage.padEnd(50);
        const rule = message.ruleId.padEnd(35);
        const location = `${shortPath}:${message.line}:${message.column}`;
        
        // Format with fixed column widths
        output += `  ${severityColor(severity)}  ${msg}  ${chalk.gray(rule)}  ${chalk.gray(location)}\n`;
      });
      
      output += '\n';
    }
  });

  // Add color-coded summary in bold
  const errorCount = results.reduce((sum, result) => sum + result.errorCount, 0);
  const warningCount = results.reduce((sum, result) => sum + result.warningCount, 0);
  
  if (errorCount > 0 || warningCount > 0) {
    const summaryColor = errorCount > 0 ? chalk.red.bold : chalk.yellow.bold;
    output += summaryColor(`✖ ${errorCount + warningCount} problems (${errorCount} errors, ${warningCount} warnings)`);
  } else {
    output += chalk.green.bold('✔ No problems found');
  }
  
  return output;
};

And this is the modification I made to my eslint.config.mjs file to include it by default

import formatter from './eslint-line-formatter.mjs';

const config = [
  {
    formatter: formatter
  },
  ...existing config
]

export default config

[spirulence]

Output sample:

You don't need chalk but it does help with getting the coloring close to native ESlint.

Be forewarned that I didn't try with a "warning" lint because I didn't have any hander