1. eslint-formatter-pretty
Pretty ESLint formatter
eslint-formatter-pretty
Package: eslint-formatter-pretty
Created by: sindresorhus
Last modified: Tue, 02 Jan 2024 16:28:49 GMT
Version: 6.0.1
License: MIT
Downloads: 1,426,164
Repository: https://github.com/sindresorhus/eslint-formatter-pretty

Install

npm install eslint-formatter-pretty
yarn add eslint-formatter-pretty

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.

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin