eslint-formatter-codeframe

7.32.2 verified Sat Apr 25 auth: no javascript

This package provides ESLint's official 'codeframe' formatter, extracted from ESLint 7 as a standalone module for continued use after its removal in ESLint 8. It displays linting results with a colorful, framed code snippet showing the exact location of each problem. The current stable version is 7.32.2, matching ESLint 7's release cadence, and it is maintained by the eslint-community. Key differentiators: it's the exact same formatter as in ESLint 7, offers a more visually structured output than the default 'stylish' formatter, and can be used as a drop-in replacement with the --format flag.

Common errors

error Cannot find module 'eslint-formatter-codeframe' ↓

cause Package not installed or not in node_modules.

fix

Run npm install --save-dev eslint-formatter-codeframe

error Missing source property in result object ↓

cause Programmatic usage without providing source code.

fix

Ensure you pass results that include the source file content (e.g., from .executeOnFiles().results).

error TypeError: codeframe is not a function ↓

cause Incorrect import pattern (e.g., named import { codeframe }).

fix

Use import codeframe from 'eslint-formatter-codeframe' or const codeframe = require('eslint-formatter-codeframe').default

error Error: Invalid formatter 'codeframe' ↓

cause ESLint cannot find the formatter; the package is not installed or ESLint is running from a different directory.

fix

Install eslint-formatter-codeframe globally or ensure it is in the local node_modules when running ESLint.

Warnings

breaking This package is extracted from ESLint 7. ESLint 8+ does not include this formatter; you must install this package separately. ↓

fix Install eslint-formatter-codeframe and use --format codeframe (it will be found automatically if installed in node_modules).

gotcha The formatter output may contain trailing '.' if preceded by a space (fixed in v7.32.2). ↓

fix Update to v7.32.2 or later.

gotcha Programmatic use: the formatter expects results array with 'source' property; without it, code snippets cannot be displayed. ↓

fix Ensure ESLint results include the 'source' field (e.g., by calling CLIEngine with .executeOnFiles(...).results).

deprecated This package is tied to ESLint 7's rule format; may not work correctly with ESLint 9 flat config or newer rule metadata. ↓

fix Consider using ESLint's built-in formatters or alternative community formatters for ESLint 9+ compatibility.

Install

npm install eslint-formatter-codeframe

yarn add eslint-formatter-codeframe

pnpm add eslint-formatter-codeframe

Imports

default
wrong
```
const codeframe = require('eslint-formatter-codeframe')
```
correct
```
import codeframe from 'eslint-formatter-codeframe'
```
The package exports a single function as default export. Use ESM import for consistency with modern ESLint configs.

codeframe

wrong

import { codeframe } from 'eslint-formatter-codeframe'

correct

import codeframe from 'eslint-formatter-codeframe'

Named import is incorrect; the package only has a default export.

type FormatterFunction
```
import type { FormatterFunction } from 'eslint-formatter-codeframe'
```
TypeScript types are included; import the type if you need the function signature.

Quickstart

Demonstrates installing, running via CLI, and programmatic usage of the codeframe formatter.

// Install: npm install --save-dev eslint-formatter-codeframe
// Run ESLint with the codeframe formatter:
// eslint --format codeframe *.js

// Alternatively, use programmatically:
import codeframe from 'eslint-formatter-codeframe';
const results = [
  {
    filePath: './example.js',
    messages: [
      {
        ruleId: 'no-unused-vars',
        severity: 2,
        message: "'addOne' is defined but never used.",
        line: 1,
        column: 10,
        endLine: 1,
        endColumn: 16
      }
    ],
    errorCount: 1,
    warningCount: 0,
    fixableErrorCount: 0,
    fixableWarningCount: 0,
    source: 'function addOne(i) {\n    if (i != NaN) {\n        return i ++\n    } else {\n      return\n    }\n};\n'
  }
];
const output = codeframe(results, {});
console.log(output);