Added tslint-loader to webpack config, added tslint.json to typescript template since there is currently no way to set this by package.json alá eslintConfig for IDE support

Author: Adrian Kremer

packages/react-scripts/config/webpack.config.js

@@ -303,28 +303,45 @@ module.exports = function(webpackEnv) {
 
         // First, run the linter.
         // It's important to do this before Babel processes the JS.
-        {
-          test: /\.(js|mjs|jsx)$/,
-          enforce: 'pre',
-          use: [
-            {
-              options: {
-                formatter: require.resolve('react-dev-utils/eslintFormatter'),
-                eslintPath: require.resolve('eslint'),
-                // @remove-on-eject-begin
-                baseConfig: {
-                  extends: [require.resolve('eslint-config-react-app')],
-                  settings: { react: { version: '999.999.999' } },
-                },
-                ignore: false,
-                useEslintrc: false,
-                // @remove-on-eject-end
+        ...(!useTypeScript
+          ? [
+              {
+                test: /\.(js|mjs|jsx)$/,
+                enforce: 'pre',
+                use: [
+                  {
+                    options: {
+                      formatter: require.resolve(
+                        'react-dev-utils/eslintFormatter'
+                      ),
+                      eslintPath: require.resolve('eslint'),
+                      // @remove-on-eject-begin
+                      baseConfig: {
+                        extends: [require.resolve('eslint-config-react-app')],
+                        settings: { react: { version: '999.999.999' } },
+                      },
+                      ignore: false,
+                      useEslintrc: false,
+                      // @remove-on-eject-end
+                    },
+                    loader: require.resolve('eslint-loader'),
+                  },
+                ],
+                include: paths.appSrc,
               },
-              loader: require.resolve('eslint-loader'),
-            },
-          ],
-          include: paths.appSrc,
-        },
+            ]
+          : [
+              {
+                test: /\.(ts|tsx)$/,
+                enforce: 'pre',
+                use: [
+                  {
+                    loader: require.resolve('tslint-loader'),
+                  },
+                ],
+                include: paths.appSrc,
+              },
+            ]),
         {
           // "oneOf" will traverse all following loaders until one will
           // match the requirements. When no loader matches it will fall

packages/react-scripts/package.json

@@ -66,6 +66,10 @@
     "sass-loader": "7.1.0",
     "style-loader": "0.23.0",
     "terser-webpack-plugin": "1.1.0",
+    "tslint": "^5.11.0",
+    "tslint-config-prettier": "^1.17.0",
+    "tslint-loader": "^3.5.4",
+    "tslint-react": "^3.6.0",
     "url-loader": "1.1.1",
     "webpack": "4.19.1",
     "webpack-dev-server": "3.1.9",

packages/react-scripts/template-typescript/tslint.json

@@ -0,0 +1,10 @@
+{
+  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
+  "linterOptions": {
+    "exclude": [
+      "config/**/*.js",
+      "node_modules/**/*.ts",
+      "coverage/lcov-report/*.js"
+    ]
+  }
+}