recommending a different eslint-loader formatter in the docs

[stavalfi]

After looking into @babel/code-frame to improve the code-frame of eslint errors, i saw that someone already done that (maybe without @babel/code-frame).

my initial poc for showing any (not just eslint) error code frame using @babel/code-frame is: (very bad implementation but it's working)

function displayError(severity, error) {
  const locationInfo = error.message
    .split('[24m')[1]
    .split('m')[1]
    .split('[')[0]

  const [line, column] = locationInfo.split(':')

  const filePath = error.webpackError.module.resource
  const rawFileAsString = fs.readFileSync(filePath, 'utf8')

  const location = { start: { line: Number(line), column: Number(column.slice(0, column.length - 1)) } }

  const result = codeFrameColumns(rawFileAsString, location, {
    highlightCode:true // show colors in the code that we print in the terminal
  })

  console.log(result)

  return result
}

the core problem is finding the line and column numbers. we just don't have them. we need to to give to babel and to create a link so the user can go to the error location.

when writing a eslint-formatter, you have direct access to them.

in the furure, if we can find a way to get the column and line number nicely, we can build a single solution for any kind of errors. for now, i'm not sure how so i have a solution to the eslint errors.

---

npm install eslint-formatter-friendly --save-dev

This is a different (non-default) eslint-loader formatter to show warnings and errors:

{
    loader: 'eslint-loader',
    options: {
      // ...
      formatter: require('eslint-formatter-friendly')
    }
}

The errors will look like this now:

instead of: (with the default eslint-loader formatter):