sindresorhus / eslint-formatter-pretty

Pretty ESLint formatter

eslint-formatter-pretty

Pretty formatter for ESLint

Highlights

• Pretty output.
• Sorts results by severity.
• Stylizes inline codeblocks in messages.
• Command-click a rule ID to open its docs.
• Command-click a header to reveal the first error in your editor. (iTerm-only)

Install

npm install --save-dev eslint-formatter-pretty@5

To use this with ESLint, use version 5. Version 6 is not compatible with ESLint.

Usage

XO

Nothing to do. It's the default formatter.

ESLint CLI

eslint --format=pretty file.js

grunt-eslint

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

grunt.loadNpmTasks('grunt-eslint');
grunt.registerTask('default', ['eslint']);

gulp-eslint

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

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

eslint-loader (webpack)

import eslintFormatterPretty from 'eslint-formatter-pretty';

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

Tips

In iTerm, Command-click the filename header to open the file in your editor.

In terminals with support for hyperlinks, Command-click the rule ID to open its docs.

eslint-formatter-pretty's Issues

chalk.dim is too hard to read on dark backgrounds

Sample XO output in iTerm2 with Snazzy:

https://github.com/sindresorhus/eslint-formatter-pretty/blob/master/index.js#L99
https://github.com/sindresorhus/eslint-formatter-pretty/blob/master/index.js#L108
https://github.com/sindresorhus/eslint-formatter-pretty/blob/master/index.js#L110

Can we change these to just chalk.gray? The contrast is really bad for dark color themes in my opinion.

Support string severity

I'm not familiar with the output of ESLint, but is it outputting the severity always as a number? Since they dropped support for declaring the severity in the config as a number.

The reason I'm asking is because I'm embedding this awesome formatter in clinton. I return my severity as a string (e.g. warn and error). I can off course iterate over all the messages and translate the severity to it's appropriate number. Just wanted more insights into this first and maybe add support here? Although I would understand that you don't want it because it still is an ESLint formatter.

Left align messages across files

Right now it looks a bit unaligned.

The fix is to ensure that the line:col column is the same width in every section.

No color on windows shell

It appears there is no color on the windows shell (git-bash). Is there any way to fix this?

quiet: true doesn't output any errors.

Hi,

I just switched our formatter to yours because it looks really good. However our grunt task grunt eslint:errors doesn't output any errors. When I switch back to the default formatter it does output errors but suppresses the warnings (as expected).

If I find the time I'll make a PR somewhere this week! Is this a known issue that you know of?

Before and after screenshot

Props for the formatter 👍 I would be useful to see in the README a comparison screenshot, of the output without the formatter.

Warning character doesn't look right on windows.

cmd and powershell:

Add TypeScript definition

If anyone wants to work on this, see the initial attempt and feedback in #50.

Bad output on Travis:

The iTerm special character prints on Travis:

https://travis-ci.org/sindresorhus/execa/jobs/126950278#L921

Webpack 4 overlay format

When using the formatter with Webpack 4 devServer.overlay, output format shows CurrentDir.

See the ]50;CurrentDir=... in the wepback overlay.

Webpack overlay:

Terminal:

eslint error i'm getting in master

---

When I run npm run test in the latest master, I get these errors.

---

API documentation

I recognize that many people won't necessarily need this, but it would be nice to have an official API documented or at least link to the docs on what ESLint outputs.

I am building a linter and am considering using this as the default reporter. But I hit some snags, probably due to my lack of experience with the ESLint API, which I figured I would share.

Based on a cursory look, I did this just to try it out:

console.log(pretty([
    {
        filePath : 'some-file',
        messages : [
            { severity : 'warn', message : 'foo' }
        ]
    },
    {
        filePath : 'some-other-file',
        messages : [
            { severity : 'warn', message : 'bar', ruleId : 'cool' }
        ]
    }
]));

Confusion ensues as there is no output, no error, and the process exits zero. Looking at the source a bit more, I see that I may need to provide warningCount, even though this is arguably something that should be calculated automatically for me.

So I go ahead and add warningCount, but still nothing happens. Turns out errorCount is also required, regardless of what messages contains, even if warningCount is provided.

At the end of the day, I think this is simply a bug caused by good ol' NaN (adding undefined). But docs may have been helpful to see a minimum input example.

Not useable from CLI as of version 6

When specifying a formatter via the CLI, ESLint appears to require() the package:

https://github.com/eslint/eslint/blob/c0b11ddb9f8aacc64c3933b9f278939aa7bea481/lib/cli-engine/cli-engine.js#L1048

Since v6, eslint-formatted-pretty's index.js is using ESM so it will fail to load when specified from the CLI:

❯ yarn eslint --format=pretty
$ /home/me/project/node_modules/.bin/eslint --format=pretty
There was a problem loading formatter: /home/me/project/node_modules/eslint-formatter-pretty/index.js
Error: require() of ES Module /home/me/project/node_modules/eslint-formatter-pretty/index.js from /home/me/project/node_modules/eslint/lib/cli-engine/cli-engine.js not supported.
Instead change the require of index.js in /home/me/project/node_modules/eslint/lib/cli-engine/cli-engine.js to a dynamic import() which is available in all CommonJS modules.

Ultimately this should probably be fixed in ESLint (in eslint/eslint#15560 I guess) but for now, perhaps we should remove the part about CLI usage from the README?

undesired xterm terminal font change from `ansiEscapes.iTerm.setCwd()`

Running pretty formatter changes the terminal font in xterm.

I think the offending line is
https://github.com/sindresorhus/eslint-formatter-pretty/blob/main/index.js#L108

I can confirm running this also mucks with xterm's font:

#!/usr/bin/env node
import ansiEscapes from 'ansi-escapes';
console.log(ansiEscapes.iTerm.setCwd());

Neither wezterm nor alacritty have the same font issue -- both support hyperlinks. xterm does not currently. A supportsHyperlink(process.stdout) check (like elsewhere) before iTerm.setCwd() might suffice.

Hide line/column numbers

Clinton does not use line/column numbers. It would be nice if I could hide them. There are several implementation methods we could use.

1. Do not show line/column numbers if none of the messages has a line or column property.
2. Add an options object to explicitly hide that information (not sure on the name of the property yet).

Pros and contras

1. Property detection

The benefit with this one is that it doesn't introduce an options object and thus keeping everything simple. The downside is that it might lead to a result you wouldn't expect. Not sure if ESLint always returns line/column numbers.

2. Options object

The downside is that it introduces an extra option (and options object). The benefit is that it is explicit and the user of the formatter can either choose what he wants.

Example: formatter(result, {showLineNumbers: false})

The file heading should link to the first error line, not warning

I have:

  app/renderer/views/CreatePortfolio/Step2.js:14:2
  ⚠   14:2   Unexpected todo comment.                               no-warning-comments
  ✖   44:23  Missing trailing comma.                                comma-dangle

Clicking it brings me to the first warning. That's annoying. It should bring me to the first error. Only first warning if there are no errors.

Same with the xo --open command. It should prioritize errors.

Link to rule documentation

Hyperlinked text is now supported in Gnome Terminal and iTerm2 reference.

An example of our current output:

  ✖  84:1  More than 1 blank line not allowed.  no-multiple-empty-lines

This can now be modified so no-multiple-empty-lines is hyperlinked directly to the documentation on that rule.

I have created hyperlinker and supports-hyperlinks modules, which should be helpful in implementing this.

Use the `rulesMeta ` property to get docs URL

With a fallback to the existing solution if it doesn't exist.

eslint/eslint@bc3e427

---

IssueHunt Summary

ceqi has been rewarded.

Backers (Total: $60.00)

• issuehunt ($60.00)

Submitted pull Requests

• #48 Use the rulesMeta property to get docs URL

---

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

---

IssueHunt has been backed by the following sponsors. Become a sponsor

Support custom ruleUrl

Current formatter uses eslint-rule-docs to generate a url for each rule id, which supports eslint only

In our project we unified lint on js (eslint), ts (tslint) and css (stylelint), then normalized their output to eslint like and utilized this formatter to output message, however results other than eslint cannot have a correct link on its rule id

It could be very welcome if we can support a ruleUrl property for each lint error object

TS2300: Duplicate identifier 'Prepend'.

node_modules/@types/eslint-scope/node_modules/@types/eslint/helpers.d.ts:1:6 - error TS2300: Duplicate identifier 'Prepend'.

1 type Prepend<Tuple extends any[], Addend> = ((_: Addend, ..._1: Tuple) => any) extends (..._: infer Result) => any
       ~~~~~~~

  node_modules/@types/eslint/helpers.d.ts:1:6
    1 type Prepend<Tuple extends any[], Addend> = ((_: Addend, ..._1: Tuple) => any) extends (..._: infer Result) => any
           ~~~~~~~
    'Prepend' was also declared here.

caused by outdated

https://github.com/sindresorhus/eslint-formatter-pretty/blob/main/package.json#L32

what about to setup renovate + semantic release to resolve and auto-merge dependencies upgrades?

Header/filename as hyperlink

In iTerm, Command-click the filename header to open the file in your editor.

What led to this being iTerm only? Should/could the header/filename be a hyperlink itself? (a file:// link)

Note: I am new to terminal hyperlinks and am just exploring file links, including line and column placement, so maybe iTerm’s features are better than others. I recently switched to Kitty.

No document found for rule about @typescript-eslint

I'm using @typescript-eslint/eslint-plugin.
So the following error occurred.

Error: No documentation found for rule
    at module.exports (/Users/iwata/.go/src/github.com/bm-sms/nomos/admin/node_modules/eslint-formatter-pretty/node_modules/eslint-rule-docs/index.js:16:11)
    at lines.map.x (/Users/iwata/.go/src/github.com/bm-sms/nomos/admin/node_modules/eslint-formatter-pretty/index.js:113:80)
    at Array.map (<anonymous>)
    at module.exports.results (/Users/iwata/.go/src/github.com/bm-sms/nomos/admin/node_modules/eslint-formatter-pretty/index.js:97:18)
    at log (/Users/iwata/.go/src/github.com/bm-sms/nomos/admin/node_modules/xo/cli-main.js:138:23)
    at xo.lintFiles.then.report (/Users/iwata/.go/src/github.com/bm-sms/nomos/admin/node_modules/xo/cli-main.js:183:3)
    at process._tickCallback (internal/process/next_tick.js:68:7)

When I output the pluginName at the error part, it is displayed as @typescript-eslint. Is this problem caused by eslint-rule-docs being old?
Please tell me if there is workaround.

Line numbers seem sporadic?

This seems like some unintended consequence of #8.

For some context, I don't use warnings, so everything is an error for me.

Based on the description of #8, I'd expect the line numbers to still be in order, but that's not the case.
Something feels awry here...

Using the 1.0.0 release, this is some output I just got.

  src/app.js:1:16
  ✖  11:39  Missing JSX expression container around literal string                                          react/jsx-no-literals
  ✖  34:10  Unexpected trailing comma.                                                                      comma-dangle
  ✖  14:16  Missing JSX expression container around literal string                                          react/jsx-no-literals
  ✖   1:16  Component is defined but never used.                                                            no-unused-vars
  ✖   6:15  name is missing in props validation                                                             react/prop-types
  ✖  32:17  Expected object keys to be in natural insensitive ascending order. name should be before type.  sort-keys
  ✖  25:39  ownProps is defined but never used.                                                             no-unused-vars
  ✖  21:25  Unexpected trailing comma.                                                                      comma-dangle
  ✖  19:33  ownProps is defined but never used.                                                             no-unused-vars
  ✖   6:21  onClick is missing in props validation                                                          react/prop-types
  ✖   6:13  Component definition is missing display name                                                    react/display-name
  ✖  10:17  Missing JSX expression container around literal string                                          react/jsx-no-literals
  ✖   9:17  Missing JSX expression container around literal string                                          react/jsx-no-literals

I cannot seem to find a rhyme or reason to the line number order.

At first, I thought it was maybe grouping them by plugin, Like eslint first and then eslint-plugin-react, but that's not the case either.

Is this what is expected? Is there some other level of "severity" I am not grasping?

FWIW, removing the pretty formatter reports things in the order I'd expect.

How do you sort things?

I am a beginner(a 15 year old, to be more precise).
Could you please tell me what this line does?

eslint-formatter-pretty/index.js

Lines 18 to 19 in d686d07

	results
	.sort((a, b) => a.errorCount - b.errorCount)

Sort by severity first?

Sorting by line number makes a lot of sense, but I ignore most warnings anyway (or rather, most warnings I see are ones I evaluated and decided to ignore at some point in the past).

I think it might make sense to put the higher severity error at the bottom of the list (since we are scrolling up in our terminal to view it anyways.

Also, it might make sense to reorder the files so those with only warnings and no errors come first.

This gets that one error you missed down at the bottom of the output every time.

Unpack "todo" comments

Rather than:

⚠   14:4  Unexpected todo comment.  no-warning-comments

I think:

⚠   14:4  TODO: Actual text, However many characters will fit...

---

IssueHunt Summary

Backers (Total: $0.00)

Become a backer now!

Or submit a pull request to get the deposits!

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

---

IssueHunt has been backed by the following sponsors. Become a sponsor