chore: migrate to eslint v9

apps/pr-deploy-site/eslint.config.js

@@ -0,0 +1,29 @@
+const js = require('@eslint/js');
+const sdl = require('@microsoft/eslint-plugin-sdl');
+const es = require('eslint-plugin-es');
+const { FlatCompat } = require('@eslint/eslintrc');
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+module.exports = [
+  ...compat.extends('plugin:@fluentui/eslint-plugin/node'),
+  ...sdl.configs.recommended,
+  {
+    files: ['**/pr-deploy-site.js'],
+    plugins: {
+      es,
+    },
+
+    rules: {
+      curly: 'off',
+      'no-var': 'off',
+      'vars-on-top': 'off',
+      'prefer-arrow-callback': 'off',
+      'no-restricted-globals': 'off',
+    },
+  },
+];

apps/pr-deploy-site/package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "clean": "just-scripts clean",
     "generate:site": "just-scripts generate:site",
-    "lint": "eslint --ext .js,.ts --cache .",
+    "lint": "eslint --cache .",
     "type-check": "tsc -p . --noEmit"
   },
   "license": "MIT",

apps/public-docsite-resources/package.json

@@ -20,7 +20,7 @@
     "build": "just-scripts build",
     "prebundle": "yarn build",
     "bundle": "just-scripts bundle",
-    "lint": "eslint --ext .js,.ts,.tsx ./src",
+    "lint": "ESLINT_USE_FLAT_CONFIG=false eslint --ext .js,.ts,.tsx ./src",
     "just": "just-scripts",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",

apps/public-docsite-v9/src/Concepts/Positioning/PositioningAutoSize.stories.tsx

@@ -68,7 +68,7 @@ export const AutoSizeForSmallViewport = () => {
           <MenuPopover>
             <MenuList>
               {Array.from({ length: menuItemCount }, (_, i) => (
-                <MenuItem>Item {i}</MenuItem>
+                <MenuItem key={i}>Item {i}</MenuItem>
               ))}
             </MenuList>
           </MenuPopover>

apps/public-docsite-v9/src/Concepts/Positioning/PositioningShiftToCoverTarget.stories.tsx

@@ -112,7 +112,7 @@ export const CoverTargetForSmallViewport = () => {
           <MenuPopover>
             <MenuList>
               {Array.from({ length: menuItemCount }, (_, i) => (
-                <MenuItem>Item {i}</MenuItem>
+                <MenuItem key={i}>Item {i}</MenuItem>
               ))}
             </MenuList>
           </MenuPopover>

apps/public-docsite/src/pages/Styles/FabricIconsPage/FabricIconsPage.tsx

@@ -26,6 +26,7 @@ export const FabricIconsPage: React.FunctionComponent<IStylesPageProps> = props
 };
 
 function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const [selectedItem, setSelectedItem] = React.useState('react-font');
   switch (platform) {
     case 'web':

apps/react-18-tests-v8/package.json

@@ -9,7 +9,7 @@
     "format:check": "yarn format -c",
     "e2e": "cypress run --component",
     "e2e:local": "cypress open --component",
-    "lint": "eslint --ext .js,.ts,.tsx ./src",
+    "lint": "ESLINT_USE_FLAT_CONFIG=false eslint --ext .js,.ts,.tsx ./src",
     "test": "jest --passWithNoTests",
     "start": "webpack-dev-server --mode=development"
   },

apps/react-18-tests-v9/package.json

@@ -5,7 +5,7 @@
   "private": true,
   "scripts": {
     "type-check": "just-scripts type-check",
-    "lint": "eslint --ext .js,.ts,.tsx ./src",
+    "lint": "ESLINT_USE_FLAT_CONFIG=false eslint --ext .js,.ts,.tsx ./src",
     "test": "jest --passWithNoTests",
     "format": "prettier -w . --ignore-path ../.prettierignore",
     "format:check": "yarn format -c",

apps/vr-tests-web-components/package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "build-storybook": "storybook build -o dist/storybook",
     "format": "prettier . -w --ignore-path ../../.prettierignore",
-    "lint": "eslint src --ext .ts,.tsx",
+    "lint": "ESLINT_USE_FLAT_CONFIG=false eslint src --ext .ts,.tsx",
     "start": "storybook dev",
     "type-check": "tsc -p . --baseUrl . --noEmit",
     "test-vr": "storywright  --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true"

change/@fluentui-chart-web-components-81d570f8-8583-4135-bfbe-9dfe7f1a4283.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: add ESLINT_USE_FLAT_CONFIG env variable",
+  "packageName": "@fluentui/chart-web-components",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-cra-template-2cac1a83-c032-470a-bbf3-d03598da449f.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: add ESLINT_USE_FLAT_CONFIG env variable",
+  "packageName": "@fluentui/cra-template",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-eslint-plugin-57088d0d-b50a-4eb6-aa29-cb2df3307e7c.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: add ESLINT_USE_FLAT_CONFIG env variable",
+  "packageName": "@fluentui/eslint-plugin",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-eslint-plugin-react-components-3d65680a-3813-42f6-8a15-30eb35934667.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: add ESLINT_USE_FLAT_CONFIG env variable",
+  "packageName": "@fluentui/eslint-plugin-react-components",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-public-docsite-setup-0bd59889-cbe1-4d6e-9dae-0cab4c94d26d.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: add ESLINT_USE_FLAT_CONFIG env variable",
+  "packageName": "@fluentui/public-docsite-setup",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-7ec173f5-1468-4477-823c-359cf0b9aa92.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: add ESLINT_USE_FLAT_CONFIG env variable",
+  "packageName": "@fluentui/react",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-calendar-compat-ccf2a24a-179b-4136-a83f-f1f21e8fc724.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: add ESLINT_USE_FLAT_CONFIG env variable",
+  "packageName": "@fluentui/react-calendar-compat",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-experiments-7f00af0a-2557-4239-8221-34b219eac7ce.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: add ESLINT_USE_FLAT_CONFIG env variable",
+  "packageName": "@fluentui/react-experiments",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-monaco-editor-7469351c-5d8d-4b36-8743-552ecd8680c0.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: add ESLINT_USE_FLAT_CONFIG env variable",
+  "packageName": "@fluentui/react-monaco-editor",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-motion-0dad750c-4aae-452c-b5c4-6ba73bb8a00f.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: add ESLINT_USE_FLAT_CONFIG env variable",
+  "packageName": "@fluentui/react-motion",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-utilities-469a9e41-6f23-4a62-b6aa-8db5a5e802b0.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: add ESLINT_USE_FLAT_CONFIG env variable",
+  "packageName": "@fluentui/utilities",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-web-components-1fccbb04-a080-4c08-a1db-860f8257b53b.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: add ESLINT_USE_FLAT_CONFIG env variable",
+  "packageName": "@fluentui/web-components",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "none"
+}

nx.json

@@ -73,7 +73,7 @@
         "{workspaceRoot}/eslint.config.js"
       ],
       "options": {
-        "command": "eslint src"
+        "command": "cross-env ESLINT_USE_FLAT_CONFIG=false eslint src"
       }
     },
     "format": {

package.json

@@ -59,10 +59,12 @@
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.1",
+    "@eslint/compat": "1.1.1",
+    "@eslint/js": "9.17.0",
     "@floating-ui/dom": "1.6.12",
     "@fluentui/react-icons": "^2.0.245",
     "@griffel/babel-preset": "1.5.8",
-    "@griffel/eslint-plugin": "^1.6.4",
+    "@griffel/eslint-plugin": "^2.0.0",
     "@griffel/jest-serializer": "1.1.24",
     "@griffel/react": "^1.5.22",
     "@griffel/shadow-dom": "0.2.2",
@@ -71,7 +73,7 @@
     "@mdx-js/loader": "2.3.0",
     "@microsoft/api-extractor": "7.49.1",
     "@microsoft/api-extractor-model": "7.30.2",
-    "@microsoft/eslint-plugin-sdl": "0.1.9",
+    "@microsoft/eslint-plugin-sdl": "1.0.1",
     "@microsoft/load-themed-styles": "1.10.26",
     "@microsoft/loader-load-themed-styles": "2.0.17",
     "@microsoft/tsdoc": "0.15.1",
@@ -88,7 +90,7 @@
     "@phenomnomnominal/tsquery": "6.1.3",
     "@playwright/test": "1.49.1",
     "@react-native/babel-preset": "0.73.21",
-    "@rnx-kit/eslint-plugin": "0.8.2",
+    "@rnx-kit/eslint-plugin": "0.8.4",
     "@rollup/plugin-node-resolve": "13.3.0",
     "@storybook/addon-a11y": "7.6.20",
     "@storybook/addon-actions": "7.6.20",
@@ -134,7 +136,7 @@
     "@types/doctrine": "0.0.5",
     "@types/ejs": "3.1.5",
     "@types/enzyme": "3.10.7",
-    "@types/eslint": "8.56.10",
+    "@types/eslint": "9.6.1",
     "@types/express": "4.17.21",
     "@types/fs-extra": "8.0.1",
     "@types/glob": "7.1.1",
@@ -174,10 +176,7 @@
     "@types/webpack-hot-middleware": "2.25.9",
     "@types/yargs": "13.0.11",
     "@types/yargs-unparser": "2.0.1",
-    "@typescript-eslint/eslint-plugin": "8.8.1",
-    "@typescript-eslint/parser": "8.8.1",
-    "@typescript-eslint/rule-tester": "8.8.1",
-    "@typescript-eslint/utils": "8.8.1",
+    "@typescript-eslint/rule-tester": "8.19.1",
     "@wojtekmaj/enzyme-adapter-react-17": "0.6.7",
     "ajv": "8.4.0",
     "autoprefixer": "10.2.1",
@@ -227,20 +226,20 @@
     "enzyme-to-json": "3.6.2",
     "esbuild": "0.25.0",
     "esbuild-loader": "4.1.0",
-    "eslint": "8.57.0",
+    "eslint": "9.17.0",
     "eslint-config-airbnb": "18.2.1",
-    "eslint-config-prettier": "8.3.0",
-    "eslint-import-resolver-typescript": "3.6.1",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-import-resolver-typescript": "3.7.0",
     "eslint-plugin-compat": "6.0.2",
     "eslint-plugin-es": "4.1.0",
-    "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-jest": "28.8.0",
-    "eslint-plugin-jsdoc": "48.7.0",
-    "eslint-plugin-jsx-a11y": "6.9.0",
-    "eslint-plugin-playwright": "0.15.3",
-    "eslint-plugin-react": "7.26.0",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-jest": "28.10.0",
+    "eslint-plugin-jsdoc": "50.6.1",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-playwright": "2.1.0",
+    "eslint-plugin-react": "7.37.3",
     "eslint-plugin-react-compiler": "0.0.0-experimental-a97cca1-20240529",
-    "eslint-plugin-react-hooks": "4.6.2",
+    "eslint-plugin-react-hooks": "5.1.0",
     "express": "4.20.0",
     "extract-comments": "1.1.0",
     "file-loader": "6.2.0",
@@ -342,6 +341,7 @@
     "tsconfig-paths-webpack-plugin": "4.1.0",
     "tslib": "2.6.3",
     "typescript": "5.3.3",
+    "typescript-eslint": "8.19.1",
     "vinyl": "2.2.0",
     "vite": "6.0.9",
     "webpack": "5.94.0",
@@ -378,7 +378,6 @@
   "resolutions": {
     "@types/jest-axe/axe-core": "4.7.2",
     "esbuild": "0.25.0",
-    "eslint": "8.57.0",
     "@microsoft/api-extractor/typescript": "5.3.3",
     "swc-loader": "^0.2.6",
     "prettier": "2.8.8",

packages/charts/chart-web-components/package.json

@@ -77,7 +77,7 @@
     "clean": "node ./scripts/clean dist",
     "generate-api": "api-extractor run --local",
     "build": "yarn compile && yarn rollup -c && yarn generate-api",
-    "lint": "eslint . --ext .ts",
+    "lint": "ESLINT_USE_FLAT_CONFIG=false eslint . --ext .ts",
     "lint:fix": "eslint . --ext .ts --fix",
     "format": "prettier -w src/**/*.{ts,html} --ignore-path ../../.prettierignore",
     "format:check": "yarn format -c",

packages/charts/react-charts/stories/package.json

@@ -6,7 +6,7 @@
     "start": "yarn storybook",
     "storybook": "storybook dev",
     "type-check": "just-scripts type-check",
-    "lint": "eslint src/",
+    "lint": "ESLINT_USE_FLAT_CONFIG=false eslint src/",
     "format": "just-scripts prettier",
     "test-ssr": "test-ssr \"./src/**/*.stories.ssr.tsx\""
   },

packages/cra-template/package.json

@@ -8,7 +8,7 @@
     "directory": "packages/cra-template"
   },
   "scripts": {
-    "lint": "eslint --ext .js,.ts,.tsx .",
+    "lint": "ESLINT_USE_FLAT_CONFIG=false eslint --ext .js,.ts,.tsx .",
     "test-integration": "node -r @fluentui/scripts-babel/register scripts/test.ts",
     "type-check": "tsc -p ."
   },

packages/eslint-plugin/package.json

@@ -9,23 +9,22 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@griffel/eslint-plugin": "^1.6.4",
-    "@rnx-kit/eslint-plugin": "^0.8.2",
-    "@typescript-eslint/eslint-plugin": "^8.8.1",
-    "@typescript-eslint/utils": "^8.8.1",
-    "@typescript-eslint/rule-tester": "8.8.1",
-    "@typescript-eslint/parser": "^8.8.1",
-    "@typescript-eslint/type-utils": "^8.8.1",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
+    "@griffel/eslint-plugin": "^2.0.0",
+    "@rnx-kit/eslint-plugin": "^0.8.4",
+    "typescript-eslint": "8.19.1",
+    "@typescript-eslint/utils": "^8.19.1",
+    "@typescript-eslint/rule-tester": "8.19.1",
+    "@typescript-eslint/type-utils": "^8.19.1",
     "eslint-plugin-compat": "^6.0.2",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^28.6.0",
-    "eslint-plugin-jsdoc": "^48.7.0",
-    "eslint-plugin-jsx-a11y": "^6.9.0",
-    "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-typescript": "^3.7.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jest": "^28.10.0",
+    "eslint-plugin-jsdoc": "^50.6.1",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.3",
+    "eslint-plugin-react-hooks": "^5.1.0",
     "fs-extra": "^8.1.0",
     "minimatch": "^3.1.2",
     "jju": "^1.4.0"