#91 - recommending different eslint formatter and updated sandbox dependencies

Author: stavalfi

.eslintignore

@@ -0,0 +1,2 @@
+_sandbox
+test

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 .log
+.idea

README.md

@@ -19,6 +19,33 @@ errors get handled, please open a [PR](https://help.github.com/articles/creating
 npm install friendly-errors-webpack-plugin --save-dev
 ```
 
+##### Recommandetion
+
+```bash
+npm install eslint-formatter-friendly --save-dev
+```
+
+This is a different (non-default) eslint-loader formatter to show warnings and errors:
+
+```javascript
+{
+    loader: 'eslint-loader',
+    options: {
+      // ...
+      formatter: require('eslint-formatter-friendly')
+    }
+}
+```
+
+The errors will look like this now:
+
+![](https://i.imgur.com/Lfi6nMX.png)
+
+instead of: (with the default eslint-loader formatter):
+
+![](https://i.imgur.com/nw1ilxF.png)
+
+
 ### Basic usage
 
 Simply add `FriendlyErrorsWebpackPlugin` to the plugin section in your Webpack config.
@@ -52,6 +79,8 @@ If you use the webpack-dev-server, there is a setting in webpack's ```devServer`
 ```javascript
 // webpack config root
 {
+  // ...
+  stats:'none', // if you don't run webpack from webpack-dev-server
   // ...
   devServer: {
     // ...
@@ -78,7 +107,7 @@ _Thanks to [webpack-dashboard](https://github.com/FormidableLabs/webpack-dashboa
 
 ![success](http://i.imgur.com/MkUEhYz.gif)
 
-### eslint-loader errors
+### eslint-loader errors (with the default eslint-loader formatter)
 
 ![lint](http://i.imgur.com/xYRkldr.gif)
 

_sandbox/.eslintrc

@@ -1,21 +1,26 @@
 {
-  "root": true,
-  "parser": "babel-eslint",
-  "env": {
-    "browser": true,
-    "commonjs": true,
-    "es6": true,
-    "jest": true,
-    "node": true
-  },
+  "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaVersion": 6,
-    "sourceType": "module"
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "classes": true,
+      "modules": true,
+      "legacyDecorators": true,
+      "jsx": true
+    }
+  },
+  "env": {
+    "es6": true,
+    "browser": true,
+    "node": true,
+    "mocha": true
   },
+  "plugins": ["react", "@typescript-eslint"],
+  "extends": [
+    "eslint:recommended"
+  ],
   "rules": {
-    // http://eslint.org/docs/rules/
-    "no-unused-expressions": "warn",
-    "no-unused-labels": "warn",
-    "no-unused-vars": ["warn", { "vars": "local", "args": "none" }]
+    "@typescript-eslint/no-unused-vars": "off"
   }
-}
+}

_sandbox/index.js

@@ -0,0 +1,3 @@
+
+
+require('./my-app.tsx')

_sandbox/index.tsx

@@ -0,0 +1,5 @@
+const x =1
+console.log(x)
+
+console.log(x+1)
+

_sandbox/my-app.tsx

@@ -5,6 +5,29 @@
   "repository": {},
   "license": "MIT",
   "scripts": {
-    "start": "node watch.js"
+    "start": "webpack --mode development --watch"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.4.4",
+    "@babel/parser": "^7.4.4",
+    "@babel/preset-react": "^7.0.0",
+    "@typescript-eslint/eslint-plugin": "^1.10.2",
+    "@typescript-eslint/parser": "^1.10.2",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.5",
+    "babel-preset-react": "^6.23.0",
+    "eslint": "^5.16.0",
+    "eslint-formatter-friendly": "^6.0.0",
+    "eslint-loader": "^2.1.2",
+    "eslint-plugin-react": "^7.13.0",
+    "prettier": "^1.18.2",
+    "typescript": "^3.5.2",
+    "webpack": "^4.31.0",
+    "webpack-cli": "^3.3.4"
+  },
+  "dependencies": {
+    "@types/node": "^12.0.8",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
   }
 }

_sandbox/package.json

@@ -1,29 +1,34 @@
 const FriendlyErrorsWebpackPlugin = require('../index');
+const friendlyEslintFormatter = require('eslint-formatter-friendly')
 
 module.exports = {
-  entry: __dirname + "/index.js",
+  entry: __dirname + "/index.tsx",
   output: {
     path: __dirname + "/dist",
     filename: "bundle.js"
   },
+  stats:'none',
   plugins: [
     new FriendlyErrorsWebpackPlugin()
   ],
   module: {
-    loaders: [
+    rules: [
       {
-        test: /\.js$/,
-        loader: 'eslint-loader',
-        enforce: 'pre',
-        include: __dirname
-      },
-      {
-        test: /\.jsx?$/,
-        loader: 'babel-loader',
-        query: {
-          presets: ['react'],
-        },
-        exclude: /node_modules/
+        test: /\.(ts|js)x?$/,
+        exclude: /(node_module|dist)/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              presets: ['@babel/preset-react'],
+            },
+          },
+          {
+            loader: 'eslint-loader',
+            options: {
+            }
+          },
+        ],
       }
     ]
   }