CODEWITHSUNDEEP
create-react-appeslinteslintrceslint-loadercraco
Devin Rhode
Devin Rhode

Reputation: 25367

ESLint: set custom formatter in .eslintrc.js

I am using create-react-app with craco (Create-React-App-Configuration-Override)

Craco is not very exotic. It simply allows me to use my own eslintrc file with create-react-app.

I am trying to use a custom eslint formatter, specifically eslint-formatter-friendly does what I need (link to files at line numbers via iTerm/Guake terminals), but there are plenty of alternative formatters: http://npmsearch.com/?q=eslint-formatter

I tried setting a format: 'unix' or formatter: 'unix' in my .eslintrc.js file - but this didn't work, eslint explicitly gave an error saying something like "unrecognized top-level property".

Upvotes: 1

Views: 2498

Answers (1)

Devin Rhode
Devin Rhode

Reputation: 25367

I looked for any way I could specify formatter in the .eslintrc.js file, but I figured out that's not an option. After searching and scanning through the source for gulp-eslint, eslint-grunt and grunt-eslint, eventually I looked more closely at the source for for craco - where is reads a little eslint configuration: https://github.com/sharegate/craco/blob/master/recipes/use-an-eslintrc-config-file/craco.config.js

The source that processes this: https://github.com/sharegate/craco/blob/master/packages/craco/lib/features/webpack/eslint.js

All I needed to do was use this craco.config.js:

/* globals module */
const { ESLINT_MODES } = require("@craco/craco");
const reactHotReloadPlugin = require('craco-plugin-react-hot-reload');

module.exports = {
    plugins: [{
        plugin: reactHotReloadPlugin
    }],
    eslint: {
        mode: ESLINT_MODES.file,
        loaderOptions: {
            formatter: require("eslint-formatter-friendly")
        }
    },
};

Upvotes: 0

Related Questions