Chore: use fork-ts-checker plugin for eslint check (#25631)

* Use fork-ts-checker for eslint check

* Fix lint issue

* Add packages to lint

* Add comments to webpack configs

scripts/webpack/dependencies.js

@@ -6,7 +6,7 @@ const pull = require('lodash/pull');
 let dependencies = Object.keys(pkg.dependencies);
 // remove jquery so we can add it first
 // remove rxjs so we can only depend on parts of it in code
-pull(dependencies, 'jquery', 'rxjs')
+pull(dependencies, 'jquery', 'rxjs');
 
 // add jquery first
 dependencies.unshift('jquery');

scripts/webpack/webpack.dev.js

@@ -73,13 +73,6 @@ module.exports = (env = {}) =>
                 ],
               },
             },
-            {
-              loader: 'eslint-loader',
-              options: {
-                emitError: true,
-                emitWarning: true,
-              },
-            },
           ],
         },
         require('./sass.rule.js')({
@@ -94,7 +87,28 @@ module.exports = (env = {}) =>
       env.noTsCheck
         ? new webpack.DefinePlugin({}) // bogus plugin to satisfy webpack API
         : new ForkTsCheckerWebpackPlugin({
-            checkSyntacticErrors: true,
+            eslint: {
+              enabled: true,
+              files: [
+                'public/app/**/*.{ts,tsx}',
+                // this can't be written like this packages/**/src/**/*.ts because it throws an error
+                'packages/grafana-ui/src/**/*.{ts,tsx}',
+                'packages/grafana-data/src/**/*.{ts,tsx}',
+                'packages/grafana-runtime/src/**/*.{ts,tsx}',
+                'packages/grafana-e2e-selectors/src/**/*.{ts,tsx}',
+                'packages/jaeger-ui-components/src/**/*.{ts,tsx}',
+              ],
+              options: {
+                cache: true,
+              },
+            },
+            typescript: {
+              mode: 'write-references',
+              diagnosticOptions: {
+                semantic: true,
+                syntactic: true,
+              },
+            },
           }),
       new MiniCssExtractPlugin({
         filename: 'grafana.[name].[hash].css',

scripts/webpack/webpack.prod.js

@@ -66,13 +66,6 @@ module.exports = merge(common, {
               ],
             },
           },
-          {
-            loader: 'eslint-loader',
-            options: {
-              emitError: true,
-              emitWarning: true,
-            },
-          },
         ],
       },
       require('./sass.rule.js')({
@@ -94,8 +87,26 @@ module.exports = merge(common, {
   },
   plugins: [
     new ForkTsCheckerWebpackPlugin({
-      checkSyntacticErrors: true,
-      memoryLimit: 4096,
+      eslint: {
+        enabled: true,
+        files: [
+          'public/app/**/*.{ts,tsx}',
+          // this can't be written like this packages/**/src/**/*.ts because it throws an error
+          'packages/grafana-ui/src/**/*.{ts,tsx}',
+          'packages/grafana-data/src/**/*.{ts,tsx}',
+          'packages/grafana-runtime/src/**/*.{ts,tsx}',
+          'packages/grafana-e2e-selectors/src/**/*.{ts,tsx}',
+          'packages/jaeger-ui-components/src/**/*.{ts,tsx}',
+        ],
+      },
+      typescript: {
+        mode: 'write-references',
+        memoryLimit: 4096,
+        diagnosticOptions: {
+          semantic: true,
+          syntactic: true,
+        },
+      },
     }),
     new MiniCssExtractPlugin({
       filename: 'grafana.[name].[hash].css',