Add detection for eslint errors and display friendly advice

Author: geowarin

package.json

@@ -1,6 +1,6 @@
 {
   "name": "friendly-errors-webpack-plugin",
-  "version": "0",
+  "version": "0.0.1",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -11,7 +11,7 @@
     "react",
     "cli"
   ],
-  "author": "Geoffroy Warin",
+  "author": "Geoffroy Warin",@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/geowarin/friendly-errors-webpack-plugin.git"

src/core/extractWebpackError.js

@@ -1,5 +1,6 @@
 'use strict';
 
+const ErrorStackParser = require('error-stack-parser');
 const RequestShortener = require("webpack/lib/RequestShortener");
 
 // TODO: allow the location to be customized in options
@@ -18,9 +19,17 @@ function extractError (e) {
     name: e.name,
     severity: 0,
     webpackError: e,
+    originalStack: getOriginalErrorStack(e)
   };
 }
 
+function getOriginalErrorStack(e) {
+  while (e.error != null) {
+    e = e.error;
+  }
+  return ErrorStackParser.parse(e);
+}
+
 function getFile (e) {
   if (e.file) {
     return e.file;

src/formatters/defaultError.js

@@ -1,17 +1,19 @@
 'use strict';
 
 const chalk = require('chalk');
+const concat = require('../utils').concat;
 
 function displayError(index, severity, error) {
   const baseError = chalk.red(`${index + 1}) ${severity}`);
 
-  return [
+  return concat(
     `${baseError} ${error.file ? 'in ' + error.file : ''}`,
     '',
     error.message,
     (error.origin ? error.origin : undefined),
-    ''
-  ].filter(chunk => chunk !== undefined);
+    '',
+    error.infos
+  );
 }
 
 function isDefaultError(error) {

src/friendly-errors-plugin.js

@@ -6,10 +6,12 @@ const os = require('os');
 const transformErrors = require('./core/transformErrors');
 const formatErrors = require('./core/formatErrors');
 const output = require('./output');
+const concat = require('./utils').concat;
 
 const defaultTransformers = [
   require('./transformers/babelSyntax'),
   require('./transformers/moduleNotFound'),
+  require('./transformers/esLintError'),
 ];
 
 const defaultFormatters = [
@@ -99,15 +101,6 @@ function getMaxInt(collection, propertyName) {
   }, 0)
 }
 
-/**
- * Concat and flattens non-null values. First arg must be an array.
- * Ex: concat([1], undefined, 2, [3, 4]) = [1, 2, 3, 4]
- */
-function concat() {
-  var args = Array.from(arguments).filter(e => e);
-  return Array.prototype.concat.apply(args[0], args.slice(1));
-}
-
 module.exports = FriendlyErrorsWebpackPlugin;
 
 function displayCompilationMessage (message, color) {

src/transformers/esLintError.js

@@ -0,0 +1,24 @@
+'use strict';
+
+const chalk = require('chalk');
+
+function isEslintError (e) {
+  return e.originalStack
+    .some(stackframe => stackframe.fileName.indexOf('eslint-loader') > 0);
+}
+
+function transform(error) {
+  if (isEslintError(error)) {
+    return Object.assign({}, error, {
+      infos: [
+        'You may use special comments to disable some warnings.',
+        'Use ' + chalk.yellow('// eslint-disable-next-line') + ' to ignore the next line.',
+        'Use ' + chalk.yellow('/* eslint-disable */') + ' to ignore all warnings in a file.'
+      ]
+    });
+  }
+
+  return error;
+}
+
+module.exports = transform;

src/transformers/moduleNotFound.js

@@ -4,10 +4,10 @@ const TYPE = 'module-not-found';
 
 function isModuleNotFoundError (e) {
   const webpackError = e.webpackError || {};
-  return webpackError.dependencies && webpackError.dependencies.length &&
-    (e.type === TYPE ||
-     e.name === 'ModuleNotFoundError' &&
-     e.message.indexOf('Module not found') === 0);
+  return webpackError.dependencies
+    && webpackError.dependencies.length > 0
+    && e.name === 'ModuleNotFoundError'
+    && e.message.indexOf('Module not found') === 0;
 }
 
 function transform(error) {
@@ -18,7 +18,7 @@ function transform(error) {
       message: `Module not found ${module}`,
       type: TYPE,
       severity: 900,
-      module,
+      module
     });
   }
 

src/utils/index.js

@@ -0,0 +1,13 @@
+/**
+ * Concat and flattens non-null values.
+ * Ex: concat(1, undefined, 2, [3, 4]) = [1, 2, 3, 4]
+ */
+function concat() {
+  const args = Array.from(arguments).filter(e => e != null);
+  const baseArray = Array.isArray(args[0]) ? args[0] : [args[0]];
+  return Array.prototype.concat.apply(baseArray, args.slice(1));
+}
+
+module.exports = {
+  concat: concat
+};

test/integration.spec.js

@@ -41,7 +41,10 @@ test('integration : should display eslint warnings', t => {
 
 ✖ 1 problem (0 errors, 1 warning)
 `,
-    ''
+    '',
+    'You may use special comments to disable some warnings.',
+    'Use // eslint-disable-next-line to ignore the next line.',
+    'Use /* eslint-disable */ to ignore all warnings in a file.'
   ]);
 });
 

test/unit/transformers/moduleNotFound.spec.js

@@ -3,7 +3,8 @@ const expect = require('expect');
 const test = require('ava');
 
 const error = {
-  type: 'module-not-found',
+  name: 'ModuleNotFoundError',
+  message: 'Module not found : redux',
   webpackError: {
     dependencies: [{ request: 'redux' } ],
   },

test/unit/utils/utils.spec.js

@@ -0,0 +1,17 @@
+const concat = require('../../../src/utils').concat;
+const test = require('ava');
+var assert = require('assert-diff');
+
+test('should concat removing undefined and null values', () => {
+  var result = concat(1, undefined, '', null);
+  assert.deepEqual(result,
+    [1, '']
+  );
+});
+
+test('should handle arrays', () => {
+  var result = concat(1, [2, 3], null);
+  assert.deepEqual(result,
+    [1, 2, 3]
+  );
+});