Merge pull request #4249 from serlo/chore/migrate-eslint

chore: migrate eslint to use new config format

apps/web/eslint.config.mjs

@@ -0,0 +1,28 @@
+import tsParser from '@typescript-eslint/parser'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import js from '@eslint/js'
+import { FlatCompat } from '@eslint/eslintrc'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+})
+
+export default [
+  ...compat.extends('@serlo/eslint-config/next.js'),
+  {
+    languageOptions: {
+      parser: tsParser,
+      ecmaVersion: 5,
+      sourceType: 'script',
+
+      parserOptions: {
+        project: true,
+      },
+    },
+  },
+]

apps/web/package.json

@@ -84,6 +84,8 @@
     "use-query-params": "^2.2.1"
   },
   "devDependencies": {
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.14.0",
     "@graphiql/toolkit": "^0.9.1",
     "@graphql-codegen/add": "^5.0.2",
     "@graphql-codegen/cli": "5.0.2",
@@ -116,7 +118,7 @@
     "eslint-config-next": "^14.2.2",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "graphql-tag": "2.12.6",

apps/web/src/fetcher/create-breadcrumbs.tsx

@@ -59,6 +59,8 @@ export function taxonomyParentsToRootToBreadcrumbsData(
 
   // get the subject from the secondary menu data so we link to the correct landing pages
   const subject = secondaryMenus.find(
+    // this is probably a bug in our code, but for now we ignore it:
+    // eslint-disable-next-line no-constant-binary-expression
     (menu) => menu.rootId === breadcrumbs[0]?.id ?? term.id
   )
 

eslint.config.mjs

@@ -0,0 +1,31 @@
+import tsParser from '@typescript-eslint/parser'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import js from '@eslint/js'
+import { FlatCompat } from '@eslint/eslintrc'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+})
+
+export default [
+  {
+    ignores: ['apps/**/*', 'packages/**/*', 'e2e-tests/**/*'],
+  },
+  ...compat.extends('@serlo/eslint-config/library.js'),
+  {
+    languageOptions: {
+      parser: tsParser,
+      ecmaVersion: 5,
+      sourceType: 'script',
+
+      parserOptions: {
+        project: true,
+      },
+    },
+  },
+]

package.json

@@ -47,6 +47,8 @@
     "test": "yarn workspace @serlo/frontend test"
   },
   "devDependencies": {
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.14.0",
     "@serlo/eslint-config": "workspace:*",
     "@serlo/typescript-config": "workspace:*",
     "cross-env": "^7.0.3",

packages/editor-web-component/eslint.config.mjs

@@ -0,0 +1,28 @@
+import tsParser from '@typescript-eslint/parser'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import js from '@eslint/js'
+import { FlatCompat } from '@eslint/eslintrc'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+})
+
+export default [
+  ...compat.extends('@serlo/eslint-config/editor.js'),
+  {
+    languageOptions: {
+      parser: tsParser,
+      ecmaVersion: 5,
+      sourceType: 'script',
+
+      parserOptions: {
+        project: true,
+      },
+    },
+  },
+]

packages/editor-web-component/package.json

@@ -43,6 +43,8 @@
     "@serlo/editor": "0.19.0"
   },
   "devDependencies": {
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.14.0",
     "@rollup/plugin-replace": "^5.0.5",
     "@serlo/editor": "0.19.0",
     "@serlo/typescript-config": "workspace:*",
@@ -53,7 +55,7 @@
     "eslint-config-next": "^14.2.2",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "npm": "^10.5.2",

packages/editor/eslint.config.mjs

@@ -0,0 +1,28 @@
+import tsParser from '@typescript-eslint/parser'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import js from '@eslint/js'
+import { FlatCompat } from '@eslint/eslintrc'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+})
+
+export default [
+  ...compat.extends('@serlo/eslint-config/editor.js'),
+  {
+    languageOptions: {
+      parser: tsParser,
+      ecmaVersion: 5,
+      sourceType: 'script',
+
+      parserOptions: {
+        project: true,
+      },
+    },
+  },
+]

packages/editor/package.json

@@ -56,6 +56,8 @@
     "react-resizable": "^3.0.5"
   },
   "devDependencies": {
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.14.0",
     "@fortawesome/fontawesome-svg-core": "6.5.2",
     "@fortawesome/free-brands-svg-icons": "6.5.2",
     "@fortawesome/free-regular-svg-icons": "6.5.2",
@@ -85,7 +87,7 @@
     "eslint-config-next": "^14.2.2",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "fp-ts": "^2.16.5",

packages/editor/src/editor-ui/plugin-toolbar/plugin-toolbar.tsx

@@ -5,9 +5,9 @@ import { cn } from '@editor/utils/cn'
 import { faCircleQuestion } from '@fortawesome/free-regular-svg-icons'
 import { ReactElement } from 'react'
 
-import { PluginToolMenu } from './plugin-tool-menu/plugin-tool-menu'
 import { EditorTooltip } from '../editor-tooltip'
 import { FaIcon } from '../fa-icon'
+import { PluginToolMenu } from './plugin-tool-menu/plugin-tool-menu'
 
 interface PluginToolbarProps {
   pluginType: EditorPluginType | string

packages/editor/src/plugins/blanks-exercise/components/droppable-blank.tsx

@@ -2,8 +2,8 @@ import { cn } from '@editor/utils/cn'
 import { ReactNode, useContext } from 'react'
 import { useDrop } from 'react-dnd'
 
-import { blankDraggableAnswerDragType } from './blank-draggable-answer'
 import type { BlankId, DraggableId } from '..'
+import { blankDraggableAnswerDragType } from './blank-draggable-answer'
 import { BlanksContext } from '../context/blank-context'
 
 interface DroppableBlankProps {

packages/editor/src/plugins/course/editor/course.tsx

@@ -5,8 +5,8 @@ import { EditorPluginType } from '@editor/types/editor-plugin-type'
 import { useEffect, useState } from 'react'
 import { v4 as uuidv4 } from 'uuid'
 
-import { CourseNavigation } from './course-navigation'
 import type { CourseProps } from '..'
+import { CourseNavigation } from './course-navigation'
 
 export function CourseEditor(props: CourseProps) {
   const { state } = props

packages/editor/src/plugins/equations/editor/editor.tsx

@@ -25,11 +25,11 @@ import { includes } from 'ramda'
 import { useCallback, useEffect, useRef } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
 
+import type { EquationsProps } from '..'
 import { toTransformationTarget, TransformationTarget } from './editor-renderer'
 import { useGridFocus } from './grid-focus'
 import { StepEditor } from './step-editor'
 import { StepSegment } from './step-segment'
-import type { EquationsProps } from '..'
 import { renderDownArrow } from '../renderer'
 import { EquationsStaticRenderer } from '../static'
 import { EquationsToolbar } from '../toolbar'

packages/editor/src/plugins/equations/editor/step-editor.tsx

@@ -1,11 +1,11 @@
 import { useEditStrings } from '@editor/i18n/edit-strings-provider'
 import type { StateTypeReturnType } from '@editor/plugin'
 
+import type { stepProps } from '..'
 import { TransformationTarget } from './editor-renderer'
 import type { GridFocus } from './grid-focus'
 import { InlineMath } from './inline-math'
 import { StepSegment } from './step-segment'
-import type { stepProps } from '..'
 import { Sign, signStrings } from '../sign'
 
 export interface StepEditorProps {

packages/editor/src/plugins/exercise-group/editor/editor.tsx

@@ -7,8 +7,8 @@ import { EditorPluginType } from '@editor/types/editor-plugin-type'
 import { faArrowCircleUp, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
 import { useContext } from 'react'
 
-import { IntermediateTask } from './intermediate-task'
 import { type ExerciseGroupProps } from '..'
+import { IntermediateTask } from './intermediate-task'
 import { ExerciseGroupRenderer } from '../renderer'
 
 export function ExeriseGroupEditor({ state }: ExerciseGroupProps) {

packages/editor/src/plugins/image-gallery/components/editor-image-grid.tsx

@@ -5,11 +5,11 @@ import { isImageDocument } from '@editor/types/plugin-type-guards'
 import { cn } from '@editor/utils/cn'
 import { useEffect, useState } from 'react'
 
+import type { ImageGalleryProps } from '..'
 import { DragAndDropOverlay } from './drag-and-drop-overlay'
 import { ImageGrid } from './image-grid'
 import { ImageGridSkeleton } from './image-grid-skeleton'
 import { RemoveImageButton } from './remove-image-button'
-import type { ImageGalleryProps } from '..'
 import { getDimensions } from '../utils/helpers'
 
 interface EditorImageGridProps {

packages/editor/src/plugins/image/components/image-selection-screen.tsx

@@ -4,8 +4,8 @@ import { isTempFile } from '@editor/plugin'
 import { cn } from '@editor/utils/cn'
 import React, { type RefObject } from 'react'
 
-import { PixabaySearch } from './pixabay-search/pixabay-search'
 import type { ImageProps } from '..'
+import { PixabaySearch } from './pixabay-search/pixabay-search'
 import { UploadButton } from '../controls/upload-button'
 import { isImageUrl } from '../utils/check-image-url'
 

packages/editor/src/plugins/multimedia/toolbar/size-select.tsx

@@ -1,5 +1,5 @@
-import { MultimediaSizeSelectButton } from './size-select-button'
 import type { MultimediaProps } from '..'
+import { MultimediaSizeSelectButton } from './size-select-button'
 
 interface MultimediaSizeSelectProps {
   state: MultimediaProps['state']['width']

packages/editor/src/plugins/page-layout/toolbar/toolbar.tsx

@@ -7,8 +7,8 @@ import { EditorPluginType } from '@editor/types/editor-plugin-type'
 import { faPencilAlt } from '@fortawesome/free-solid-svg-icons'
 import { type Dispatch, type SetStateAction } from 'react'
 
-import { LayoutChooser } from './layout-chooser'
 import type { PageLayoutPluginProps } from '..'
+import { LayoutChooser } from './layout-chooser'
 
 export const PageLayoutToolbar = ({
   id,

packages/editor/src/plugins/rows/components/row-editor.tsx

@@ -3,8 +3,8 @@ import { editorPlugins } from '@editor/plugin/helpers/editor-plugins'
 import { selectIsFocused, useAppSelector } from '@editor/store'
 import { type MouseEvent, useRef } from 'react'
 
-import { AddRowButtonFloating } from './add-row-button-floating'
 import type { RowsPluginConfig, RowsPluginState } from '..'
+import { AddRowButtonFloating } from './add-row-button-floating'
 import { EditorRowRenderer } from '../editor-renderer'
 
 interface RowEditorProps {

packages/editor/src/plugins/rows/components/rows-inner-editor.tsx

@@ -7,10 +7,10 @@ import {
 import { EditorPluginType } from '@editor/types/editor-plugin-type'
 import { useContext } from 'react'
 
+import type { RowsProps } from '..'
 import { AddRowButtonLarge } from './add-row-button-large'
 import { PluginMenuModal } from './plugin-menu-modal'
 import { RowEditor } from './row-editor'
-import type { RowsProps } from '..'
 import {
   PluginMenuActionTypes,
   PluginMenuContext,

packages/editor/src/plugins/serlo-table/editor.tsx

@@ -19,8 +19,8 @@ import type { SerloTableProps } from '.'
 import { CellSwitchButton } from './cell-switch-button'
 import { SerloTableRenderer, TableType } from './renderer'
 import { SerloTableToolbar } from './toolbar'
-import { getTableType } from './utils/get-table-type'
 import { TextEditorConfig } from '../text'
+import { getTableType } from './utils/get-table-type'
 import { instanceStateStore } from '../text/utils/instance-state-store'
 
 const newCell = { content: { plugin: EditorPluginType.Text } }

packages/editor/src/store/root/saga.ts

@@ -1,8 +1,8 @@
 import { all, call, put, select, takeEvery } from 'redux-saga/effects'
 
 import { runInitRootSaga } from '.'
-import { ROOT } from './constants'
 import type { ReversibleAction } from '..'
+import { ROOT } from './constants'
 import { selectDocuments } from '../documents'
 import { handleRecursiveInserts } from '../documents/saga'
 import { persistHistory } from '../history'

packages/eslint-config/package.json

@@ -13,7 +13,7 @@
     "eslint-config-next": "^14.2.2",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "typescript": "^5.4.5"