migrate fork-ts-checker-webpack-plugin example to use ESLint

examples/fork-ts-checker-webpack-plugin/.eslintrc.js

@@ -0,0 +1,60 @@
+// Useful references:
+// https://www.npmjs.com/package/eslint-config-react-app
+// https://github.com/facebook/create-react-app/blob/master/packages/eslint-config-react-app/index.js
+// https://medium.com/@dors718/linting-your-react-typescript-project-with-eslint-and-prettier-2423170c3d42
+
+const path = require('path');
+module.exports = {
+    parser: '@typescript-eslint/parser', // Specifies the ESLint parser
+    plugins: [
+        '@typescript-eslint',
+        'react'
+        // 'prettier' commented as we don't want to run performance hog prettier through eslint as it's slow
+    ],
+    env: {
+        browser: true,
+        jest: true
+    },
+    extends: [
+        'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+        'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
+        // 'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
+        'prettier/react', // disables react-specific linting rules that conflict with prettier
+        // 'plugin:prettier/recommended' // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+    ],
+    parserOptions: {
+        project: path.resolve(__dirname, './tsconfig.json'),
+        tsconfigRootDir: __dirname,
+        ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
+        sourceType: 'module', // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    rules: {
+        // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+        // e.g. "@typescript-eslint/explicit-function-return-type": "off",
+        '@typescript-eslint/explicit-function-return-type': 'off',
+        '@typescript-eslint/no-unused-vars': 'off',
+
+        // These rules don't add much value, are better covered by TypeScript and good definition files
+        'react/no-direct-mutation-state': 'off',
+        'react/no-deprecated': 'off',
+        'react/no-string-refs': 'off',
+        'react/require-render-return': 'off',
+
+        // we want to check ".tsx" files
+        'react/jsx-filename-extension': [
+            'warn',
+            {
+                extensions: ['.jsx', '.tsx']
+            }
+        ],
+        'react/prop-types': 'off' // Is this incompatible with TS props type?
+    },
+    settings: {
+        react: {
+            version: 'detect' // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    }
+};

examples/fork-ts-checker-webpack-plugin/.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+    semi: true,
+    trailingComma: 'all',
+    singleQuote: true,
+    printWidth: 120,
+    tabWidth: 4,
+};

examples/fork-ts-checker-webpack-plugin/.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+    "eslint.autoFixOnSave": false,
+    "eslint.validate": [
+      "javascript",
+      "javascriptreact",
+      { "language": "typescript", "autoFix": true },
+      { "language": "typescriptreact", "autoFix": true }
+    ]
+  }

examples/fork-ts-checker-webpack-plugin/package.json

@@ -6,34 +6,41 @@
   "scripts": {
     "start": "webpack-dev-server --progress --color --mode development --config webpack.config.development.js",
     "prebuild": "rimraf ./dist/*",
-    "build": "webpack --color --mode production --config webpack.config.production.js"
+    "build": "webpack --color --mode production --config webpack.config.production.js",
+    "lint": "eslint ./",
+    "lint-rule-timings": "cross-env TIMING=1 yarn lint"
   },
   "devDependencies": {
-    "@types/jest": "^23.0.0",
-    "@types/react": "^16.0.0",
-    "@types/react-dom": "^16.0.0",
-    "@types/react-router": "^4.0.12",
+    "@types/jest": "^24.0.0",
+    "@types/react": "^16.8.0",
+    "@types/react-dom": "^16.8.0",
+    "@types/react-router": "^5.0.0",
     "@types/react-router-dom": "^4.0.5",
-    "@types/react-test-renderer": "^16.0.0",
+    "@types/react-test-renderer": "^16.8.0",
     "@types/react-transition-group": "^2.0.2",
+    "@typescript-eslint/eslint-plugin": "^1.11.0",
+    "@typescript-eslint/parser": "^1.11.0",
+    "cross-env": "^5.2.0",
+    "eslint": "^6.0.1",
+    "eslint-config-prettier": "^6.0.0",
+    "eslint-plugin-prettier": "^3.1.0",
+    "eslint-plugin-react": "^7.14.2",
     "fork-ts-checker-notifier-webpack-plugin": "^1.0.0",
-    "fork-ts-checker-webpack-plugin": "^1.0.0",
+    "fork-ts-checker-webpack-plugin": "^1.4.0",
     "html-webpack-plugin": "next",
+    "prettier": "1.18.2",
     "rimraf": "^2.6.1",
-    "source-map-loader": "^0.2.1",
-    "ts-loader": "^5.0.0",
+    "ts-loader": "^6.0.0",
     "tslib": "^1.7.1",
-    "tslint": "^5.5.0",
-    "tslint-react": "^3.2.0",
     "typescript": "^3.0.0",
     "webpack": "^4.0.0",
     "webpack-cli": "^3.0.0",
     "webpack-dev-server": "^3.0.0"
   },
   "dependencies": {
-    "core-js": "^2.4.1",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
+    "core-js": "^3.0.0",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
     "whatwg-fetch": "^3.0.0"
   }
 }

examples/fork-ts-checker-webpack-plugin/src/app.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Layout } from './components/layout';
 
-export const App: React.SFC<{}> = _props => (
+export const App: React.SFC = _props => (
     <div className="ui container">
         <Layout />
     </div>

examples/fork-ts-checker-webpack-plugin/src/components/layout.tsx

@@ -1,5 +1,3 @@
 import * as React from 'react';
 
-export const Layout: React.SFC<{}> = _props => (
-    <h1>Heya, heya, heya!!</h1>
-);
+export const Layout: React.SFC = _props => <h1>Heya, heya, heya!!</h1>;

examples/fork-ts-checker-webpack-plugin/src/index.tsx

@@ -2,11 +2,4 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { App } from './app';
 
-const rootEl = document.getElementById('root');
-const render = (Component: React.SFC) =>
-  ReactDOM.render(
-    <Component />,
-    rootEl
-  );
-
-render(App);
+ReactDOM.render(<App />, document.getElementById('root'));

examples/fork-ts-checker-webpack-plugin/tsconfig.json

@@ -1,35 +1,26 @@
 {
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx"
-  ],
-  "compilerOptions": {
-    "allowSyntheticDefaultImports": false,
-    "target": "es5",
-    "downlevelIteration": true,
-    "importHelpers": true,
-    "sourceMap": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "jsx": "react",
-    "allowJs": false,
-    "checkJs": false,
-    "lib": [
-      "dom",
-      "es2015",
-      "es2016",
-      "es2017",
-      "esnext"
-    ],
-    "forceConsistentCasingInFileNames": true,
-    "experimentalDecorators": true,
-    "noImplicitAny": true,
-    "noUnusedParameters": true,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "noUnusedLocals": true,
-    "skipLibCheck": true,
-    "strictNullChecks": false,
-    "suppressImplicitAnyIndexErrors": true
-  }
-}
+    "compilerOptions": {
+        "allowSyntheticDefaultImports": false,
+        "target": "es5",
+        "downlevelIteration": true,
+        "importHelpers": true,
+        "sourceMap": true,
+        "module": "esnext",
+        "moduleResolution": "node",
+        "jsx": "react",
+        "allowJs": false,
+        "checkJs": false,
+        "lib": ["dom", "es2015", "es2016", "es2017", "esnext"],
+        "forceConsistentCasingInFileNames": true,
+        "experimentalDecorators": true,
+        "noImplicitAny": true,
+        "noUnusedParameters": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noUnusedLocals": true,
+        "skipLibCheck": true,
+        "strictNullChecks": false,
+        "suppressImplicitAnyIndexErrors": true,
+        "types": ["jest"]
+    }
+}

examples/fork-ts-checker-webpack-plugin/webpack.config.development.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path');
 const ForkTsCheckerNotifierWebpackPlugin = require('fork-ts-checker-notifier-webpack-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
@@ -21,7 +22,7 @@ module.exports = {
     },
     plugins: [
         new ForkTsCheckerWebpackPlugin({
-            tslint: true, useTypescriptIncrementalApi: true
+            eslint: true
         }),
         new ForkTsCheckerNotifierWebpackPlugin({ title: 'TypeScript', excludeWarnings: false }),
         new HtmlWebpackPlugin({

examples/fork-ts-checker-webpack-plugin/webpack.config.production.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');