feat(eslint): add eslint for react and typescript support

* Since eslint supports TS: https://eslint.org/blog/2019/01/future-typescript-eslint
* If you are curious about the why part: microsoft/TypeScript#29288,
see `Linting` section

Author: jozsefDevs

.editorconfig

@@ -0,0 +1,14 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.js

@@ -0,0 +1,54 @@
+/**
+ * React rules: https://github.com/yannickcr/eslint-plugin-react/tree/master/docs/rules
+ */
+module.exports = {
+    ignorePatterns: ["*.config.js", "node_modules/", "dist"],
+    parserOptions: {
+        project: `./tsconfig.json`
+    },
+    plugins: [
+        "@typescript-eslint",
+        "eslint-comments",
+        "promise",
+    ],
+    extends: [
+        "airbnb-typescript",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:eslint-comments/recommended",
+        "plugin:promise/recommended",
+        "prettier",
+        "prettier/react",
+        "prettier/@typescript-eslint",
+    ],
+    env: {
+        browser: true,
+    },
+    rules: {
+        // Too restrictive, writing ugly code to defend against a very unlikely scenario: https://eslint.org/docs/rules/no-prototype-builtins
+        "no-prototype-builtins": "off",
+        // https://basarat.gitbooks.io/typescript/docs/tips/defaultIsBad.html
+        "import/prefer-default-export": "off",
+        "import/no-default-export": "error",
+        // Too restrictive: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/destructuring-assignment.md
+        "react/destructuring-assignment": "off",
+        // No jsx extension: https://github.com/facebook/create-react-app/issues/87#issuecomment-234627904
+        "react/jsx-filename-extension": "off",
+        // Since we're using TS, no need for propTypes
+        "react/prop-types": "off",
+        "react/state-in-constructor": "off",
+        // Use function hoisting to improve code readability
+        "no-use-before-define": [
+            "error",
+            { functions: false, classes: true, variables: true },
+        ],
+        // Makes no sense to allow type inferrence for expression parameters, but require typing the response
+        "@typescript-eslint/explicit-function-return-type": [
+            "error",
+            { allowExpressions: true, allowTypedFunctionExpressions: true },
+        ],
+        "@typescript-eslint/no-use-before-define": [
+            "error",
+            { functions: false, classes: true, variables: true, typedefs: true },
+        ]
+    }
+};

.gitignore

@@ -19,6 +19,7 @@
 .env.test.local
 .env.production.local
 .idea
+.eslintcache
 
 npm-debug.log*
 yarn-debug.log*

.huskyrc.js

@@ -1,5 +1,6 @@
 module.exports = {
   hooks: {
     'commit-msg': 'commitlint -E HUSKY_GIT_PARAMS',
+    'pre-commit': 'yarn lint && lint-staged',
   },
-};
+};

.lintstagedrc

@@ -0,0 +1,5 @@
+{
+    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
+      "prettier --write"
+    ]
+}

package.json

@@ -15,12 +15,14 @@
     "react-dom": "^16.13.1"
   },
   "scripts": {
-    "test": "yarn type-check",
+    "test": "yarn type-check && yarn lint",
     "type-check": "tsc --noEmit",
     "type-check:watch": "yarn type-check -- --watch",
     "build:types": "tsc --emitDeclarationOnly",
     "build:js": "webpack --progress --mode=production",
-    "build": "yarn build:types && yarn build:js"
+    "build": "yarn build:types && yarn build:js",
+    "lint": "eslint src/**/*{.ts,.tsx} --format=pretty",
+    "format": "prettier --write src/**/*.{js,jsx,ts,tsx,json,css,scss,md}"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -51,8 +53,20 @@
     "@semantic-release/git": "^9.0.0",
     "@types/react": "^16.9.29",
     "@types/react-dom": "^16.9.5",
+    "@typescript-eslint/eslint-plugin": "^2.26.0",
     "babel-loader": "^8.1.0",
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb-typescript": "^7.2.0",
+    "eslint-config-prettier": "^6.10.1",
+    "eslint-formatter-pretty": "^3.0.1",
+    "eslint-plugin-eslint-comments": "^3.1.2",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-react": "^7.19.0",
     "husky": "^4.2.3",
+    "lint-staged": "^10.1.1",
+    "prettier": "^2.0.2",
     "semantic-release": "^17.0.4",
     "surge": "^0.21.3",
     "typescript": "^3.8.3",

src/App.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { Counter } from "./Counter";
 import { Hello } from "./Hello";
 
-export function App() {
+export function App(): ReactElement {
     return (
         <div className="App">
-            <Hello name={ 'react-webpack-typescript-babel' } />
+            <Hello name="react-webpack-typescript-babel" />
             <Counter />
         </div>
     );

src/Counter.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, {Component, ReactElement} from 'react';
 
 export interface CounterState {
     value: number;
@@ -7,16 +7,17 @@ export interface CounterState {
 export class Counter extends Component<{}, CounterState> {
     readonly state: CounterState = { value: 0 };
 
-    public render() {
+    private handleIncrement = (): void => this.setState(prevState => ({ value: prevState.value + 1 }));
+
+    private handleDecrement = (): void => this.setState(prevState => ({ value: prevState.value - 1 }));
+
+    public render(): ReactElement {
         return (
             <>
                 <div>{ this.state.value }</div>
-                <button onClick={ this.handleIncrement }>+</button>
-                <button onClick={ this.handleDecrement }>-</button>
+                <button type="button" onClick={ this.handleIncrement }>+</button>
+                <button type="button" onClick={ this.handleDecrement }>-</button>
             </>
         );
     }
-
-    private handleIncrement = () => this.setState({ value: this.state.value + 1 });
-    private handleDecrement = () => this.setState({ value: this.state.value - 1 });
 }