Replace tslint with eslint+prettier.

Author: vikpe

.eslintrc.js

@@ -0,0 +1,29 @@
+module.exports = {
+    extends: [
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "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:prettier/recommended" // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+    ],
+    parser: "@typescript-eslint/parser",
+    parserOptions: {
+        project: "tsconfig.json",
+        sourceType: "module",
+        ecmaVersion: 2020,
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    plugins: [
+        "@typescript-eslint"
+    ],
+    settings: {
+        react: {
+            version: "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    // Fine tune rules
+    rules: {
+        "@typescript-eslint/no-var-requires": 0
+    },
+};

.prettierrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+    semi: true,
+    trailingComma: "all",
+};

README.md

@@ -4,14 +4,12 @@
 * **[React](https://facebook.github.io/react/)** (16.x)
 * **[Webpack](https://webpack.js.org/)** (4.x)
 * **[Typescript](https://www.typescriptlang.org/)** (3.x)
-* **[Hot Module Replacement (HMR)](https://webpack.js.org/concepts/hot-module-replacement/)** using [React Hot Loader](https://github.com/gaearon/react-hot-loader) (4.x)
-* [Babel](http://babeljs.io/) (7.x)
-* [SASS](http://sass-lang.com/)
-* [Jest](https://facebook.github.io/jest/) - Testing framework for React applications
-* Production build script
-* Image loading/minification using [Image Webpack Loader](https://github.com/tcoopman/image-webpack-loader)
-* Typescript compiling using [Awesome Typescript Loader](https://github.com/s-panferov/awesome-typescript-loader) (5.x)
-* Code quality (linting) for Typescript.
+* **[Hot Module Replacement (HMR)](https://webpack.js.org/concepts/hot-module-replacement/)** ([React Hot Loader](https://github.com/gaearon/react-hot-loader))
+* Production build script (Webpack)
+* Image loading/minification ([Image Webpack Loader](https://github.com/tcoopman/image-webpack-loader))
+* [SASS](http://sass-lang.com/) support
+* Code linting ([ESLint](https://github.com/eslint/eslint)) and formatting ([Prettier](https://github.com/prettier/prettier))
+* Test framework ([Jest](https://facebook.github.io/jest/))
 
 ## Installation
 1. Clone/download repo
@@ -42,8 +40,8 @@ Command | Description
 `yarn run start-prod` | Build app once (HMR disabled) to `/dist/` and serve @ `http://localhost:3000`
 `yarn run build` | Build app to `/dist/`
 `yarn run test` | Run tests
-`yarn run lint` | Run Typescript linter
-`yarn run lint --fix` | Run Typescript linter and fix issues
+`yarn run lint` | Run linter
+`yarn run lint --fix` | Run linter and fix issues
 `yarn run start` | (alias of `yarn run start-dev`)
 
 **Note**: replace `yarn` with `npm` in `package.json` if you use npm.

package.json

@@ -25,7 +25,7 @@
   "scripts": {
     "build": "yarn run clean-dist && webpack -p --config=configs/webpack/prod.js",
     "clean-dist": "rimraf dist/*",
-    "lint": "tslint './src/**/*.ts*' --format stylish --project . --force",
+    "lint": "eslint './src/**/*.{js,ts,tsx}' --quiet",
     "start": "yarn run start-dev",
     "start-dev": "webpack-dev-server --config=configs/webpack/dev.js",
     "start-prod": "yarn run build && node express.js",
@@ -40,22 +40,28 @@
     "@types/node": "^14.0.14",
     "@types/react": "^16.9.41",
     "@types/react-dom": "^16.9.8",
+    "@typescript-eslint/eslint-plugin": "^3.6.1",
+    "@typescript-eslint/parser": "^3.6.1",
     "awesome-typescript-loader": "^5.2.1",
     "babel-loader": "^8.1.0",
     "css-loader": "^3.6.0",
+    "eslint": "^7.5.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.20.3",
     "express": "^4.17.1",
     "file-loader": "^6.0.0",
     "html-webpack-plugin": "^4.3.0",
     "image-webpack-loader": "^6.0.0",
     "jest": "^26.1.0",
     "node-sass": "^4.14.1",
+    "prettier": "^2.0.5",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-hot-loader": "^4.12.21",
     "rimraf": "^3.0.2",
     "sass-loader": "^9.0.1",
     "style-loader": "^1.2.1",
-    "tslint": "^6.1.2",
     "typescript": "^3.9.6",
     "uglifyjs-webpack-plugin": "^2.2.0",
     "webpack": "^4.43.0",

src/components/App.tsx

@@ -4,18 +4,18 @@ import { hot } from "react-hot-loader";
 const reactLogo = require("./../assets/img/react_logo.svg");
 import "./../assets/scss/App.scss";
 
-class App extends React.Component<{}, undefined> {
-    public render() {
-        return (
-            <div className="app">
-                <h1>Hello World!</h1>
-                <p>Foo to the barz</p>
-                <img src={reactLogo.default} height="480"/>
-            </div>
-        );
-    }
+class App extends React.Component<Record<string, unknown>, undefined> {
+  public render() {
+    return (
+      <div className="app">
+        <h1>Hello World!</h1>
+        <p>Foo to the barz</p>
+        <img src={reactLogo.default} height="480" />
+      </div>
+    );
+  }
 }
 
-declare let module: object;
+declare let module: Record<string, unknown>;
 
 export default hot(module)(App);

src/index.tsx

@@ -1,10 +1,7 @@
 import * as React from "react";
-import {render} from "react-dom";
+import { render } from "react-dom";
 import App from "./components/App";
 
 const rootEl = document.getElementById("root");
 
-render(
-    <App/>,
-    rootEl,
-);
+render(<App />, rootEl);