Adding eslint rules for react and fixing some errors (#17921)

Author: aasimkhan30

eslint.config.mjs

@@ -5,7 +5,17 @@ import notice from "eslint-plugin-notice";
 import jsdoc from 'eslint-plugin-jsdoc';
 import deprecationPlugin from "eslint-plugin-deprecation";
 import { fixupPluginRules } from "@eslint/compat";
-import reactRefresh from "eslint-plugin-react-refresh";
+import react from "eslint-plugin-react";
+
+// Begin fix
+// @ts-ignore
+react.configs.recommended.plugins = { react }
+// @ts-ignore
+react.configs.recommended.languageOptions = {
+  parserOptions: react.configs.recommended.parserOptions
+}
+delete react.configs.recommended.parserOptions
+// End fix
 
 const commonRules = {
   "notice/notice": [
@@ -28,7 +38,7 @@ const commonRules = {
   "no-caller": "warn",
   "no-debugger": "warn",
   "no-duplicate-case": "warn",
-  "no-duplicate-imports": "off",
+  "no-duplicate-imports": "error",
   "no-eval": "warn",
   "no-async-promise-executor": "off",
   "no-extra-semi": "warn",
@@ -51,7 +61,6 @@ const commonRules = {
     "context"
   ], // non-complete list of globals that are easy to access unintentionally
   "no-var": "off",
-  "semi": "off",
   "jsdoc/no-types": "warn",
   "no-restricted-syntax": [
     'warn',
@@ -93,18 +102,22 @@ const commonRules = {
       "leadingUnderscore": "require"
     }
   ],
+  "@typescript-eslint/semi": "warn",
+
 };
 
 
 
 export default [
+  react.configs.recommended,
+  //reactHooks.configs.recommended,
   {
-    files: ['**/*.ts'],
-    ignores: ['src/prompts/**/*.ts', 'typings/**.*.d.ts', 'src/reactviews/**/*'],  // Ignore prompts files as they are copied from other repos
+    files: ['**/*.ts', '**/*.tsx'],
+    ignores: ['src/prompts/**/*.ts', '**/*.d.ts'],  // Ignore prompts files as they are copied from other repos
     languageOptions: {
       parser: tseslint.parser,
       parserOptions: {
-        project: "./tsconfig.json"
+        project: ["./tsconfig.json", "./tsconfig.react.json"],
       },
     },
     plugins: {
@@ -113,32 +126,12 @@ export default [
       ['@typescript-eslint']: tseslint.plugin,
       // @ts-ignore
       ["deprecation"]: fixupPluginRules(deprecationPlugin),
+      react,
     },
     rules: {
+      'react/react-in-jsx-scope': 'off',
+      "react/prop-types": "off",
       ...commonRules
-    },
-  }, {
-    files: ['**/*.tsx'],
-    languageOptions: {
-      parser: '@typescript-eslint/parser',
-      parserOptions: {
-        project: './tsconfig.react.json',
-      },
-    },
-    rules: {
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
-      ...commonRules
-    },
-    plugins: {
-      notice,
-      jsdoc,
-      ['@typescript-eslint']: tseslint.plugin,
-      // @ts-ignore
-      ["deprecation"]: fixupPluginRules(deprecationPlugin),
-      ['react-refresh']: reactRefresh
     }
   }
 ];

gulpfile.js

@@ -72,13 +72,15 @@ const cssLoaderPlugin = {
 
 gulp.task('ext:lint', () => {
 	return gulp.src([
-		config.paths.project.root + '/src/**/*.ts',
-		'!' + config.paths.project.root + '/src/views/htmlcontent/**/*',
-		config.paths.project.root + '/test/**/*.ts'
+		'./src/**/*.ts',
+		'./src/**/*.tsx',
+		'./test/**/*.ts',
+		'!**/*.d.ts',
+		'!./src/views/htmlcontent/**/*'
 	])
-		.pipe(gulpESLintNew({
-			quiet: true
-		}))
+	.pipe(gulpESLintNew({
+		quiet: true
+	}))
 		.pipe(gulpESLintNew.format())           // Output lint results to the console.
 		.pipe(gulpESLintNew.failAfterError());
 });
@@ -241,7 +243,7 @@ async function generateReactWebviewsBundle() {
 
 // Compile react views
 gulp.task('ext:compile-reactviews',
-	gulp.series( generateReactWebviewsBundle, function transformReactWebviewsLocalization() {
+	gulp.series(generateReactWebviewsBundle, function transformReactWebviewsLocalization() {
 		return transformExtensionLocalization([
 			'out/react-webviews/assets/*.js',
 		])

package.json

@@ -66,8 +66,8 @@
     "@angular/upgrade": "~2.1.2",
     "@eslint/compat": "^1.1.0",
     "@eslint/js": "^9.5.0",
-    "@playwright/test": "^1.45.0",
     "@jgoz/esbuild-plugin-typecheck": "^4.0.0",
+    "@playwright/test": "^1.45.0",
     "@types/azdata": "^1.44.0",
     "@types/ejs": "^3.1.0",
     "@types/eslint__js": "^8.42.3",
@@ -102,6 +102,7 @@
     "eslint-plugin-deprecation": "^3.0.0",
     "eslint-plugin-jsdoc": "^48.2.12",
     "eslint-plugin-notice": "^1.0.0",
+    "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
     "gulp": "^4.0.2",

src/reactviews/pages/TableDesigner/designerChangesPreviewButton.tsx

@@ -96,7 +96,7 @@ export const DesignerChangesPreviewButton = () => {
                             borderBottom: '1px solid #e0e0e0',
                             overflow: 'auto',
                         }
-                    }><ReactMarkdown  children={metadata.generatePreviewReportResult?.report}></ReactMarkdown> </div>}
+                    }><ReactMarkdown>metadata.generatePreviewReportResult?.report</ReactMarkdown> </div>}
                 </DialogContent>
                 <DialogActions>
                     <DialogTrigger disableButtonEnhancement>

src/reactviews/pages/TableDesigner/designerResultPane.tsx

@@ -5,12 +5,11 @@
 
 import { Button, CounterBadge, Divider, Link, Tab, TabList, Table, TableBody, TableCell, TableColumnDefinition, TableColumnSizingOptions, TableHeader, TableHeaderCell, TableRow, Theme, createTableColumn, makeStyles, shorthands, teamsHighContrastTheme, useTableColumnSizing_unstable, useTableFeatures, webDarkTheme } from "@fluentui/react-components";
 import { useContext, useState } from "react";
-import { OpenFilled } from "@fluentui/react-icons";
+import { OpenFilled, ErrorCircleFilled, WarningFilled, InfoFilled } from "@fluentui/react-icons";
 import Editor from '@monaco-editor/react';
 import { TableDesignerContext } from "./tableDesignerStateProvider";
 import { DesignerIssue, DesignerResultPaneTabs, InputBoxProperties } from "./tableDesignerInterfaces";
 import { VscodeWebviewContext } from "../../common/vscodeWebViewProvider";
-import { ErrorCircleFilled, WarningFilled, InfoFilled } from "@fluentui/react-icons";
 
 const useStyles = makeStyles({
 	root: {
@@ -181,6 +180,7 @@ export const DesignerResultPane = () => {
 			}
 			{metadata.tabStates!.resultPaneTab === DesignerResultPaneTabs.Issues && <div className={classes.issuesContainer}>
 				<Table size="small"
+					as = "table"
 					{...columnSizing_unstable.getTableProps()}
 					ref={tableRef}
 				>

src/reactviews/pages/TableDesigner/designerTable.tsx

@@ -6,14 +6,13 @@
 import { Button, Popover, PopoverSurface, PopoverTrigger, Table, TableBody, TableCell, TableColumnDefinition, TableColumnId, TableColumnSizingOptions, TableHeader, TableHeaderCell, TableRow, TableRowData, Toolbar, ToolbarButton, createTableColumn, makeStyles, useTableColumnSizing_unstable, useTableFeatures } from "@fluentui/react-components"
 import { CheckBoxProperties, DesignerDataPropertyInfo, DesignerEditType, DesignerTableComponentDataItem, DesignerTableProperties, DesignerUIArea, DropDownProperties, InputBoxProperties } from "./tableDesignerInterfaces"
 import {
-	AddRegular, NavigationFilled, DeleteRegular
+	AddRegular, NavigationFilled, DeleteRegular, ErrorCircleFilled, ArrowCircleUpFilled, ArrowCircleDownFilled
 } from "@fluentui/react-icons";
 import { useContext, useState } from "react";
 import { TableDesignerContext } from "./tableDesignerStateProvider";
 import { DesignerCheckbox } from "./designerCheckbox";
 import { DesignerDropdown } from "./designerDropdown";
 import { DesignerInputBox } from "./designerInputBox";
-import { ErrorCircleFilled, ArrowCircleUpFilled, ArrowCircleDownFilled } from "@fluentui/react-icons";
 
 export type DesignerTableProps = {
 	component: DesignerDataPropertyInfo,
@@ -273,6 +272,7 @@ export const DesignerTable = ({
 
 		</Toolbar>
 		<Table
+			as = "table"
 			size="small"
 			{...columnSizing_unstable.getTableProps()}
 			ref={tableRef}

tsconfig.json

@@ -20,6 +20,5 @@
     },
     "exclude": [
         "node_modules",
-        "src/reactviews"
     ]
 }