update typescript-eslint (#43)

* update typescript-eslint

* improve imports

* update project typescript-eslint

.changeset/quick-bats-jog.md

@@ -0,0 +1,6 @@
+---
+'eslint-config-widen': patch
+'eslint-playground': patch
+---
+
+Upgrade the typescript-eslint package away from the legacy config setups.

README.md

@@ -11,7 +11,7 @@ Widen's shared ESLint config and plugins.
 yarn add -D eslint eslint-{config,plugin}-widen eslint-plugin-sort @babel/{core,eslint-parser}
 
 # If you use TypeScript
-yarn add -D @typescript-eslint/{eslint-plugin,parser}
+yarn add -D typescript-eslint
 
 # If you use React
 yarn add -D eslint-plugin-{react,react-hooks,jsx-a11y}

eslint.config.mjs

@@ -1,30 +1,17 @@
-import { FlatCompat } from '@eslint/eslintrc'
-import js from '@eslint/js'
+import eslint from '@eslint/js'
 import typescriptEslint from '@typescript-eslint/eslint-plugin'
 import tsParser from '@typescript-eslint/parser'
+import sort from 'eslint-plugin-sort'
 import globals from 'globals'
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = path.dirname(__filename)
-
-//TODO: cleanup compat https://acquia.atlassian.net/browse/FE-1172
-const compat = new FlatCompat({
-  allConfig: js.configs.all,
-  baseDirectory: __dirname,
-  recommendedConfig: js.configs.recommended,
-})
+import tseslint from 'typescript-eslint'
 
 export default [
   {
     ignores: ['**/lib/', '**/packages/eslint-playground/'],
   },
-  ...compat.extends(
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:sort/recommended',
-  ),
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  sort.configs['flat/recommended'],
   {
     languageOptions: {
       globals: {

package.json

@@ -22,8 +22,6 @@
     "@changesets/cli": "^2.27.7",
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.6.0",
-    "@typescript-eslint/eslint-plugin": "^7.16.0",
-    "@typescript-eslint/parser": "^7.16.0",
     "eslint": "^9.6.0",
     "eslint-plugin-sort": "^3.0.2",
     "globals": "^15.8.0",

packages/eslint-config-widen/package.json

@@ -16,24 +16,17 @@
   "name": "eslint-config-widen",
   "peerDependencies": {
     "@babel/eslint-parser": "^7.22.15",
-    "@typescript-eslint/eslint-plugin": "^6.9.1",
-    "@typescript-eslint/parser": "^6.9.1",
     "eslint": ">= 9",
     "eslint-plugin-jest": ">= 28",
     "eslint-plugin-jsx-a11y": ">= 6",
     "eslint-plugin-playwright": ">= 1",
     "eslint-plugin-react": ">= 7",
     "eslint-plugin-react-hooks": ">= 4",
     "eslint-plugin-sort": ">= 3",
-    "eslint-plugin-widen": ">=3.0.0"
+    "eslint-plugin-widen": ">=3.0.0",
+    "typescript-eslint": ">= 7.16.0"
   },
   "peerDependenciesMeta": {
-    "@typescript-eslint/eslint-plugin": {
-      "optional": true
-    },
-    "@typescript-eslint/parser": {
-      "optional": true
-    },
     "eslint-plugin-jest": {
       "optional": true
     },
@@ -48,6 +41,9 @@
     },
     "eslint-plugin-react-hooks": {
       "optional": true
+    },
+    "typescript-eslint": {
+      "optional": true
     }
   },
   "repository": {

packages/eslint-config-widen/src/base.ts

@@ -1,8 +1,8 @@
+import babelParser from '@babel/eslint-parser'
 import js from '@eslint/js'
 import prettier from 'eslint-plugin-prettier'
 import sort from 'eslint-plugin-sort'
 import widen from 'eslint-plugin-widen'
-import babelParser from '@babel/eslint-parser'
 import sharedGlobals from './sharedGlobals.js'
 
 export default [

packages/eslint-config-widen/src/typescript.ts

@@ -1,11 +1,14 @@
-import tseslint from 'typescript-eslint'
+import { configs, parser, plugin } from 'typescript-eslint'
 
 export default [
-  ...tseslint.configs.recommended,
+  ...configs.recommended,
   {
     files: ['*.ts', '*.tsx'],
     languageOptions: {
-      parser: tseslint.parser,
+      parser: parser,
+    },
+    plugins: {
+      '@typescript-eslint': plugin,
     },
     rules: {
       '@typescript-eslint/camelcase': 'off',

packages/eslint-playground/package.json

@@ -16,7 +16,8 @@
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-sort": "^3.0.2",
-    "eslint-plugin-widen": "workspace:^"
+    "eslint-plugin-widen": "workspace:^",
+    "typescript-eslint": "^7.16.0"
   },
   "dependencies": {
     "react": "^18.3.1"