feat!: migrate to eslint flat config (#409)

erik-slovak · web-flow · commit e91d6adb86e8 · 2023-11-09T19:12:45.000+01:00
BREAKING CHANGE:  migrate to eslint flat config
diff --git a/.eslintignore b/.eslintignore
diff --git a/.eslintrc.json b/.eslintrc.json
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,37 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug Jest Tests with yarn",
+      "type": "node",
+      "request": "launch",
+      "runtimeExecutable": "yarn",
+      "args": [
+        "test",
+        "--",
+        "--runInBand",
+        "--coverage=false"
+      ],
+      "runtimeArgs": [
+        "--inspect-brk"
+      ],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen"
+    },
+    {
+      "name": "eslint",
+      "type": "node",
+      "request": "launch",
+      "runtimeExecutable": "yarn",
+      "cwd": "${workspaceFolder}",
+      "runtimeArgs": [
+        "eslint",
+        "${relativeFile}"
+      ],
+      "sourceMaps": true,
+    }
+  ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,4 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "eslint.experimental.useFlatConfig": true
 }
diff --git a/__tests__/Tests/Lint.test.ts b/__tests__/Tests/Lint.test.ts
@@ -1,14 +1,18 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /**
  * @Author: Rostislav Simonik <rostislav.simonik@technologystudio.sk>
  * @Date:   2018-01-09T00:56:40+01:00
  * @Copyright: Technology Studio
 **/
 
-import { ESLint } from 'eslint'
+const { FlatESLint } = require('eslint/use-at-your-own-risk')
 
 test('shoud not have lint issues', async () => {
-  const eslint = new ESLint()
+  const eslint = new FlatESLint()
   const results = await eslint.lintFiles(['test/**/*.ts'])
-  const isWithoutError = results.every((result) => result.errorCount === 0)
+  const isWithoutError = results.every((result: { errorCount: number }) => result.errorCount === 0)
   expect(isWithoutError).toBe(true)
-})
+}, 20000)
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,16 @@
+const txoConfig = require('./lib/index.js')
+
+/** @type {import('eslint').Linter.FlatConfig[]} */
+const config = [
+  ...txoConfig.default,
+  {
+    files: ['test/**/*.ts', 'test/**/*.tsx'],
+    languageOptions: {
+      parserOptions: {
+        project: './tsconfig.test.json'
+      }
+    }
+  }
+]
+
+module.exports = config
diff --git a/package.json b/package.json
@@ -15,43 +15,31 @@
   "license": "MIT",
   "private": false,
   "scripts": {
-    "lint": "eslint --ext .jsx,.js,.ts,.tsx .",
-    "fixcode": "eslint --ext .jsx,.js,.ts,.tsx . --fix",
+    "lint": "eslint --max-warnings 0 .",
+    "fixcode": "eslint . --fix",
     "git-hook": "yarn -s lint",
     "compile": "tsc",
     "prepare": "husky install && yarn compile",
-    "sanity": "yarn lint && yarn test && tsc --noEmit && yarn outdated && echo 'success'",
+    "sanity": "yarn lint && yarn test --coverage && tsc --noEmit && yarn outdated && echo 'success'",
     "semantic-release": "semantic-release",
-    "test": "jest"
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
   },
   "engines": {
     "node": ">=18.0.0"
   },
   "dependencies": {
-    "eslint-config-txo-typescript": "^3.4.0"
-  },
-  "peerDependencies": {
+    "eslint-config-txo-typescript": "^4.0.2",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0"
   },
   "devDependencies": {
     "@txo/commitlint": "^1.0.5",
     "@txo/semantic-release": "^1.0.2",
+    "@txo/tsconfig": "^1.1.0",
     "@types/eslint": "^8.44.7",
     "@types/jest": "^29.5.8",
     "@types/react": "^18.2.37",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
-    "eslint": "^8.53.0",
-    "eslint-plugin-eslint-comments": "^3.2.0",
-    "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-jest": "^27.6.0",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-n": "^16.3.0",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.3",
     "jest": "^29.7.0",
     "lint-staged": "^15.0.2",
diff --git a/src/configs/jsx-a11y.ts b/src/configs/jsx-a11y.ts
@@ -4,20 +4,20 @@
  * @Copyright: Technology Studio
 **/
 
-module.exports = {
-  rules: {
-    'jsx-a11y/aria-props': 'error',
-    'jsx-a11y/label-has-associated-control': [
-      'error',
-      {
-        // NOTE: If this error triggers, either disable it or add
-        // your custom components, labels and attributes via these options
-        // See https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-associated-control.md
-        controlComponents: ['Input'],
-      },
-    ],
-    'jsx-a11y/mouse-events-have-key-events': 'error',
-    'jsx-a11y/role-has-required-aria-props': 'error',
-    'jsx-a11y/role-supports-aria-props': 'error',
-  },
+import type { Linter } from 'eslint'
+
+export const jsxA11yRules: Linter.RulesRecord = {
+  'jsx-a11y/aria-props': 'error',
+  'jsx-a11y/label-has-associated-control': [
+    'error',
+    {
+      // NOTE: If this error triggers, either disable it or add
+      // your custom components, labels and attributes via these options
+      // See https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-associated-control.md
+      controlComponents: ['Input'],
+    },
+  ],
+  'jsx-a11y/mouse-events-have-key-events': 'error',
+  'jsx-a11y/role-has-required-aria-props': 'error',
+  'jsx-a11y/role-supports-aria-props': 'error',
 }
diff --git a/src/configs/react.ts b/src/configs/react.ts
@@ -4,12 +4,12 @@
  * @Copyright: Technology Studio
 **/
 
-module.exports = {
-  rules: {
-    'react-hooks/rules-of-hooks': 'error',
-    'react-hooks/exhaustive-deps': 'error',
-    'react/jsx-first-prop-new-line': ['error', 'multiline'],
-    'react/jsx-uses-vars': 'error',
-    'react/display-name': 'off',
-  },
+import type { Linter } from 'eslint'
+
+export const reactRules: Linter.RulesRecord = {
+  'react-hooks/rules-of-hooks': 'error',
+  'react-hooks/exhaustive-deps': 'error',
+  'react/jsx-first-prop-new-line': ['error', 'multiline'],
+  'react/jsx-uses-vars': 'error',
+  'react/display-name': 'off',
 }
diff --git a/src/index.ts b/src/index.ts
@@ -1,34 +1,37 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-var-requires */
 /**
  * @Author: Rostislav Simonik <rostislav.simonik@technologystudio.sk>
  * @Author: Erik Slovak <erik.slovak@technologystudio.sk>
  * @Date: 2020-06-10T16:06:00+02:00
  * @Copyright: Technology Studio
 **/
 
-module.exports = {
-  extends: [
-    'txo-typescript',
-    ...[
-      './configs/jsx-a11y',
-      './configs/react',
-    ].map(relativePath => require.resolve(relativePath)),
-  ],
-  parser: '@typescript-eslint/parser',
-  plugins: [
-    '@typescript-eslint',
-    'react',
-    'react-hooks',
-    'jsx-a11y',
-  ],
-  parserOptions: {
-    ecmaVersion: 6,
-    sourceType: 'module',
-    ecmaFeatures: {
-      jsx: true,
+import type { Linter } from 'eslint'
+
+import { jsxA11yRules } from './configs/jsx-a11y'
+import { reactRules } from './configs/react'
+
+const txoConfig = require('eslint-config-txo-typescript')
+const react = require('eslint-plugin-react')
+const reactHooksPlugin = require('eslint-plugin-react-hooks')
+const jsxA11yPlugin = require('eslint-plugin-jsx-a11y')
+
+const config: Linter.FlatConfig[] = [
+  ...txoConfig.default,
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    rules: {
+      ...jsxA11yRules,
+      ...reactRules,
+    },
+    plugins: {
+      'jsx-a11y': jsxA11yPlugin,
+      'react-hooks': reactHooksPlugin,
+      react,
     },
-    project: './tsconfig.json',
-  },
-  rules: {
-    strict: 'error',
   },
-}
+]
+
+export default config
diff --git a/test/React.tsx b/test/React.tsx
@@ -4,7 +4,7 @@
  * @Copyright: Technology Studio
 **/
 
-import { useEffect } from 'react'
+import React, { useEffect } from 'react'
 
 // react-hooks/rules-of-hooks
 type RulesOfHooksProps = { someProp?: string }
@@ -48,7 +48,24 @@ export const ExhaustiveDepsError = (props: ExhaustiveDepsProps): null => {
   return null
 }
 
+const Component = (_props: { test: string, test2: { a: string, b: string } }): null => null
+
+export const FirstPropNewLineOk = (): JSX.Element => (
+  <Component
+    test='test'
+    test2={{
+      a: 'abc',
+      b: 'def',
+    }}
+  />
+)
+
+export const FirstPropNewLineError = (): JSX.Element => (
+  // eslint-disable-next-line react/jsx-first-prop-new-line
+  <Component test='test'
+    test2={{ a: 'abc', b: 'def' }} />
+)
+
 // TODO: add tests for:
-// react/jsx-first-prop-new-line
 // react/jsx-uses-vars
 // react/display-name
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,13 +1,7 @@
 {
+  "extends": "@txo/tsconfig",
   "compilerOptions": {
-    "lib": ["esnext"],
-    "strict": true,
-    "noImplicitAny": true,
-    "noImplicitThis": true,
-    "alwaysStrict": true,
-    "strictBindCallApply": true,
-    "strictFunctionTypes": true,
-    "sourceMap": true,
+    "noEmit": false,
     "outDir": "lib"
   },
   "include": [
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
`1`	`1`	`{`
`2`		`- "typescript.tsdk": "node_modules/typescript/lib"`
	`2`	`+ "typescript.tsdk": "node_modules/typescript/lib",`
	`3`	`+ "eslint.experimental.useFlatConfig": true`
`3`	`4`	`}`