CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-eslint-formatter-pretty

Pretty formatter for ESLint that transforms standard lint output into a more readable and user-friendly format

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

index.mddocs/

ESLint Formatter Pretty

ESLint Formatter Pretty provides a visually enhanced formatter for ESLint that transforms standard lint output into a more readable and user-friendly format. It features pretty output with color-coding and symbols, automatically sorts results by severity (errors first, then warnings), stylizes inline code blocks in error messages, and includes interactive features like command-clickable rule IDs that open documentation and clickable file headers for editor navigation in supported terminals.

Package Information

  • Package Name: eslint-formatter-pretty
  • Package Type: npm
  • Language: JavaScript (ES Modules)
  • Installation: npm install --save-dev eslint-formatter-pretty@5 (for ESLint compatibility)

Note: Version 6 is not compatible with ESLint CLI due to limitations. Use version 5 for ESLint integration.

Core Imports

ES Modules:

import eslintFormatterPretty from "eslint-formatter-pretty";

CommonJS:

const eslintFormatterPretty = require("eslint-formatter-pretty");

Basic Usage

With ESLint CLI

eslint --format=pretty file.js

Programmatic Usage

import eslintFormatterPretty from "eslint-formatter-pretty";

// ESLint results from running ESLint programmatically
const results = [
  {
    filePath: "./src/index.js",
    errorCount: 1,
    warningCount: 1,
    messages: [
      {
        line: 10,
        column: 5,
        severity: 2, // error
        message: "Unexpected console statement.",
        ruleId: "no-console"
      },
      {
        line: 15,
        column: 8,
        severity: 1, // warning
        message: "Variable 'unused' is defined but never used.",
        ruleId: "no-unused-vars"
      }
    ]
  }
];

// Format the results
const formatted = eslintFormatterPretty(results);
console.log(formatted);

Integration Examples

XO (Default formatter):

// No configuration needed - it's the default formatter

grunt-eslint:

grunt.initConfig({
  eslint: {
    target: ['file.js'],
    options: {
      format: 'pretty'
    }
  }
});

gulp-eslint:

import gulp from 'gulp';
import eslint from 'gulp-eslint';

export const lint = (
  gulp.src('file.js')
    .pipe(eslint())
    .pipe(eslint.format('pretty'))
);

webpack eslint-loader:

import eslintFormatterPretty from 'eslint-formatter-pretty';

export default {
  entry: ['file.js'],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          formatter: eslintFormatterPretty
        }
      }
    ]
  }
};

Capabilities

ESLint Formatter Function

The main export is a function that formats ESLint results into a pretty, user-friendly format.

/**
 * Pretty formatter for ESLint that transforms standard lint output into readable format
 * @param {LintResult[]} results - Lint result for individual files
 * @param {LintResultData} [data] - Extended information related to analysis results
 * @returns {string} The formatted output string
 */
function eslintFormatterPretty(results, data);

Parameters:

  • results (Array): Array of ESLint LintResult objects containing lint results for individual files
  • data (Object, optional): Extended information related to the analysis results, particularly:
    • rulesMeta: Object containing metadata for rules, used to generate documentation URLs

Returns:

String containing the formatted output with colors, symbols, and interactive elements. Returns empty string if no errors or warnings are found.

Key Features:

  • Visual Enhancement: Uses colors and symbols to distinguish errors from warnings
  • Smart Sorting: Files with zero errors appear first, then files sorted by error count (descending), then by warning count (descending)
  • Message Sorting: Within files, messages sorted by severity (errors first), then line/column
  • Interactive Elements:
    • Command-clickable rule IDs that open rule documentation (when hyperlinks supported)
    • Command-clickable file headers for editor navigation (iTerm support)
  • Code Styling: Inline code blocks in messages are stylized with bold formatting
  • Alignment: Proper column alignment for line numbers, messages, and rule IDs
  • Summary: Shows total error and warning counts at the end

Types

All type definitions are re-exported from ESLint for convenience:

// Re-exported from ESLint types
type LintResult = ESLint.LintResult;
type LintResultData = ESLint.LintResultData;
type Severity = Linter.Severity;
type LintMessage = Linter.LintMessage;

// Full ESLint Linter namespace is also exported
export { Linter } from 'eslint';

LintResult Structure

interface LintResult {
  filePath: string;           // Absolute path to the file
  errorCount: number;         // Number of errors in the file
  warningCount: number;       // Number of warnings in the file
  messages: LintMessage[];    // Array of lint messages
}

LintMessage Structure

interface LintMessage {
  line?: number;              // Line number (1-indexed)
  column?: number;            // Column number (1-indexed)
  severity: 1 | 2;           // 1 for warning, 2 for error
  message: string;           // The lint message text
  ruleId?: string | null;    // The rule ID that generated this message (null if no rule)
  fatal?: boolean;           // Whether this is a fatal error
}

LintResultData Structure

interface LintResultData {
  rulesMeta?: {
    [ruleId: string]: {
      docs?: {
        url?: string;         // URL to rule documentation
      };
    };
  };
}

Environment Support

  • Node.js: Requires Node.js >= 18
  • Terminal Features:
    • Hyperlinks: Automatically detected using supports-hyperlinks package
    • iTerm Integration: Special support for Command-clicking file headers
    • Color Support: Uses chalk for cross-platform color support
  • CI/CD: Automatically adapts output for CI environments

Install with Tessl CLI

npx tessl i tessl/npm-eslint-formatter-pretty

docs

index.md

tile.json