Skip to content

Commit 6d88fbc

Browse files
authored
Adding eslint rules for react and fixing some errors (#17921)
1 parent a7e228d commit 6d88fbc

8 files changed

+370
-55
lines changed

eslint.config.mjs

+22-29
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,17 @@ import notice from "eslint-plugin-notice";
55
import jsdoc from 'eslint-plugin-jsdoc';
66
import deprecationPlugin from "eslint-plugin-deprecation";
77
import { fixupPluginRules } from "@eslint/compat";
8-
import reactRefresh from "eslint-plugin-react-refresh";
8+
import react from "eslint-plugin-react";
9+
10+
// Begin fix
11+
// @ts-ignore
12+
react.configs.recommended.plugins = { react }
13+
// @ts-ignore
14+
react.configs.recommended.languageOptions = {
15+
parserOptions: react.configs.recommended.parserOptions
16+
}
17+
delete react.configs.recommended.parserOptions
18+
// End fix
919

1020
const commonRules = {
1121
"notice/notice": [
@@ -28,7 +38,7 @@ const commonRules = {
2838
"no-caller": "warn",
2939
"no-debugger": "warn",
3040
"no-duplicate-case": "warn",
31-
"no-duplicate-imports": "off",
41+
"no-duplicate-imports": "error",
3242
"no-eval": "warn",
3343
"no-async-promise-executor": "off",
3444
"no-extra-semi": "warn",
@@ -51,7 +61,6 @@ const commonRules = {
5161
"context"
5262
], // non-complete list of globals that are easy to access unintentionally
5363
"no-var": "off",
54-
"semi": "off",
5564
"jsdoc/no-types": "warn",
5665
"no-restricted-syntax": [
5766
'warn',
@@ -93,18 +102,22 @@ const commonRules = {
93102
"leadingUnderscore": "require"
94103
}
95104
],
105+
"@typescript-eslint/semi": "warn",
106+
96107
};
97108

98109

99110

100111
export default [
112+
react.configs.recommended,
113+
//reactHooks.configs.recommended,
101114
{
102-
files: ['**/*.ts'],
103-
ignores: ['src/prompts/**/*.ts', 'typings/**.*.d.ts', 'src/reactviews/**/*'], // Ignore prompts files as they are copied from other repos
115+
files: ['**/*.ts', '**/*.tsx'],
116+
ignores: ['src/prompts/**/*.ts', '**/*.d.ts'], // Ignore prompts files as they are copied from other repos
104117
languageOptions: {
105118
parser: tseslint.parser,
106119
parserOptions: {
107-
project: "./tsconfig.json"
120+
project: ["./tsconfig.json", "./tsconfig.react.json"],
108121
},
109122
},
110123
plugins: {
@@ -113,32 +126,12 @@ export default [
113126
['@typescript-eslint']: tseslint.plugin,
114127
// @ts-ignore
115128
["deprecation"]: fixupPluginRules(deprecationPlugin),
129+
react,
116130
},
117131
rules: {
132+
'react/react-in-jsx-scope': 'off',
133+
"react/prop-types": "off",
118134
...commonRules
119-
},
120-
}, {
121-
files: ['**/*.tsx'],
122-
languageOptions: {
123-
parser: '@typescript-eslint/parser',
124-
parserOptions: {
125-
project: './tsconfig.react.json',
126-
},
127-
},
128-
rules: {
129-
'react-refresh/only-export-components': [
130-
'warn',
131-
{ allowConstantExport: true },
132-
],
133-
...commonRules
134-
},
135-
plugins: {
136-
notice,
137-
jsdoc,
138-
['@typescript-eslint']: tseslint.plugin,
139-
// @ts-ignore
140-
["deprecation"]: fixupPluginRules(deprecationPlugin),
141-
['react-refresh']: reactRefresh
142135
}
143136
}
144137
];

gulpfile.js

+9-7
Original file line numberDiff line numberDiff line change
@@ -72,13 +72,15 @@ const cssLoaderPlugin = {
7272

7373
gulp.task('ext:lint', () => {
7474
return gulp.src([
75-
config.paths.project.root + '/src/**/*.ts',
76-
'!' + config.paths.project.root + '/src/views/htmlcontent/**/*',
77-
config.paths.project.root + '/test/**/*.ts'
75+
'./src/**/*.ts',
76+
'./src/**/*.tsx',
77+
'./test/**/*.ts',
78+
'!**/*.d.ts',
79+
'!./src/views/htmlcontent/**/*'
7880
])
79-
.pipe(gulpESLintNew({
80-
quiet: true
81-
}))
81+
.pipe(gulpESLintNew({
82+
quiet: true
83+
}))
8284
.pipe(gulpESLintNew.format()) // Output lint results to the console.
8385
.pipe(gulpESLintNew.failAfterError());
8486
});
@@ -241,7 +243,7 @@ async function generateReactWebviewsBundle() {
241243

242244
// Compile react views
243245
gulp.task('ext:compile-reactviews',
244-
gulp.series( generateReactWebviewsBundle, function transformReactWebviewsLocalization() {
246+
gulp.series(generateReactWebviewsBundle, function transformReactWebviewsLocalization() {
245247
return transformExtensionLocalization([
246248
'out/react-webviews/assets/*.js',
247249
])

package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,8 @@
6666
"@angular/upgrade": "~2.1.2",
6767
"@eslint/compat": "^1.1.0",
6868
"@eslint/js": "^9.5.0",
69-
"@playwright/test": "^1.45.0",
7069
"@jgoz/esbuild-plugin-typecheck": "^4.0.0",
70+
"@playwright/test": "^1.45.0",
7171
"@types/azdata": "^1.44.0",
7272
"@types/ejs": "^3.1.0",
7373
"@types/eslint__js": "^8.42.3",
@@ -102,6 +102,7 @@
102102
"eslint-plugin-deprecation": "^3.0.0",
103103
"eslint-plugin-jsdoc": "^48.2.12",
104104
"eslint-plugin-notice": "^1.0.0",
105+
"eslint-plugin-react": "^7.34.3",
105106
"eslint-plugin-react-hooks": "^4.6.2",
106107
"eslint-plugin-react-refresh": "^0.4.7",
107108
"gulp": "^4.0.2",

src/reactviews/pages/TableDesigner/designerChangesPreviewButton.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ export const DesignerChangesPreviewButton = () => {
9696
borderBottom: '1px solid #e0e0e0',
9797
overflow: 'auto',
9898
}
99-
}><ReactMarkdown children={metadata.generatePreviewReportResult?.report}></ReactMarkdown> </div>}
99+
}><ReactMarkdown>metadata.generatePreviewReportResult?.report</ReactMarkdown> </div>}
100100
</DialogContent>
101101
<DialogActions>
102102
<DialogTrigger disableButtonEnhancement>

src/reactviews/pages/TableDesigner/designerResultPane.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,11 @@
55

66
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";
77
import { useContext, useState } from "react";
8-
import { OpenFilled } from "@fluentui/react-icons";
8+
import { OpenFilled, ErrorCircleFilled, WarningFilled, InfoFilled } from "@fluentui/react-icons";
99
import Editor from '@monaco-editor/react';
1010
import { TableDesignerContext } from "./tableDesignerStateProvider";
1111
import { DesignerIssue, DesignerResultPaneTabs, InputBoxProperties } from "./tableDesignerInterfaces";
1212
import { VscodeWebviewContext } from "../../common/vscodeWebViewProvider";
13-
import { ErrorCircleFilled, WarningFilled, InfoFilled } from "@fluentui/react-icons";
1413

1514
const useStyles = makeStyles({
1615
root: {
@@ -181,6 +180,7 @@ export const DesignerResultPane = () => {
181180
}
182181
{metadata.tabStates!.resultPaneTab === DesignerResultPaneTabs.Issues && <div className={classes.issuesContainer}>
183182
<Table size="small"
183+
as = "table"
184184
{...columnSizing_unstable.getTableProps()}
185185
ref={tableRef}
186186
>

src/reactviews/pages/TableDesigner/designerTable.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,13 @@
66
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"
77
import { CheckBoxProperties, DesignerDataPropertyInfo, DesignerEditType, DesignerTableComponentDataItem, DesignerTableProperties, DesignerUIArea, DropDownProperties, InputBoxProperties } from "./tableDesignerInterfaces"
88
import {
9-
AddRegular, NavigationFilled, DeleteRegular
9+
AddRegular, NavigationFilled, DeleteRegular, ErrorCircleFilled, ArrowCircleUpFilled, ArrowCircleDownFilled
1010
} from "@fluentui/react-icons";
1111
import { useContext, useState } from "react";
1212
import { TableDesignerContext } from "./tableDesignerStateProvider";
1313
import { DesignerCheckbox } from "./designerCheckbox";
1414
import { DesignerDropdown } from "./designerDropdown";
1515
import { DesignerInputBox } from "./designerInputBox";
16-
import { ErrorCircleFilled, ArrowCircleUpFilled, ArrowCircleDownFilled } from "@fluentui/react-icons";
1716

1817
export type DesignerTableProps = {
1918
component: DesignerDataPropertyInfo,
@@ -273,6 +272,7 @@ export const DesignerTable = ({
273272

274273
</Toolbar>
275274
<Table
275+
as = "table"
276276
size="small"
277277
{...columnSizing_unstable.getTableProps()}
278278
ref={tableRef}

tsconfig.json

-1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,5 @@
2020
},
2121
"exclude": [
2222
"node_modules",
23-
"src/reactviews"
2423
]
2524
}

0 commit comments

Comments
 (0)