BC-8147 - Upgrade to ESLint 9 (#3411)

This PR upgrades ESLint 8 to ESLint 9.

* change eslintrc format to flat config
* remove .eslintignore, move it to the ignores object
* adjust custom plugin accordingly
* change to flat config in eslint webpack plugin
* upgrade to eslint9
* exclude eslint config from sonarcloud coverage
* move mock-store-module to test folder
* refactor SonarCloud configuration and github action

---------

Co-authored-by: SevenWaysDP <[email protected]>

.github/workflows/test.yml

@@ -28,22 +28,13 @@ jobs:
           NODE_OPTIONS: "--unhandled-rejections=warn"
       - uses: actions/setup-java@v4
         with:
-          distribution: 'temurin'
-          java-version: '17'
+          distribution: "temurin"
+          java-version: "17"
       - name: SonarCloud upload coverage
         uses: SonarSource/[email protected]
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           SONAR_TOKEN: ${{ secrets.SONARCLOUD_TOKEN }}
-        with:
-          args: >
-            -Dsonar.organization=schulcloud-verbund
-            -Dsonar.projectKey=hpi-schul-cloud_nuxt-client
-            -Dsonar.sources=.
-            -Dsonar.exclusions=src/serverApi/**/*.*,src/fileStorageApi/**/*.*,src/h5pEditorApi/**/*.*
-            -Dsonar.coverage.exclusions=tests/**/*.*,**/*.unit.ts,**/*.unit.js
-            -Dsonar.cpd.exclusions=tests/**/*.*,**/*.unit.ts,**/*.unit.js,**/locales/*.ts
-            -Dsonar.javascript.lcov.reportPaths=./coverage/lcov.info
 
   lint:
     runs-on: ubuntu-latest
@@ -56,4 +47,4 @@ jobs:
       - name: npm ci
         run: npm ci --prefer-offline --no-audit
       - name: npm run lint
-        run: npm run lint
+        run: npm run lint

Dockerfile

@@ -7,10 +7,10 @@ RUN apt update && apt install -y g++ libcairo2-dev libpango1.0-dev libjpeg-dev l
 WORKDIR /app
 
 COPY package.json package-lock.json ./
-COPY lib/eslint-plugin-schulcloud ./lib/eslint-plugin-schulcloud
 RUN npm ci
 
-COPY babel.config.js .eslintrc.js LICENSE.md .prettierrc.js tsconfig.json tsconfig.build.json .eslintignore .prettierignore ./
+COPY babel.config.js eslint.config.js LICENSE.md .prettierrc.js tsconfig.json tsconfig.build.json .prettierignore ./
+COPY lib/eslint-plugin-schulcloud ./lib/eslint-plugin-schulcloud
 COPY public ./public
 COPY src ./src
 COPY config/webpack ./config/webpack

config/webpack/webpack.common.js

@@ -109,6 +109,7 @@ module.exports = {
 			extensions: [".js", ".jsx", ".vue", ".ts", ".tsx"],
 			failOnWarning: false,
 			failOnError: true,
+			configType: "flat",
 		}),
 	],
 

eslint.config.js

@@ -0,0 +1,142 @@
+const js = require("@eslint/js");
+const pluginVue = require("eslint-plugin-vue");
+const vueTsEslintConfig = require("@vue/eslint-config-typescript");
+const schulcloud = require("./lib/eslint-plugin-schulcloud");
+const eslintPluginPrettierRecommended = require("eslint-plugin-prettier/recommended");
+const globals = require("globals");
+
+module.exports = [
+	...pluginVue.configs["flat/essential"],
+	js.configs.recommended,
+	...vueTsEslintConfig({
+		extends: ["recommended"],
+		supportedScriptLangs: {
+			ts: true,
+
+			// [!DISCOURAGED]
+			// Set to `true` to allow plain `<script>` or `<script setup>` blocks.
+			// This might result-in false positive or negatives in some rules for `.vue` files.
+			// Note you also need to configure `allowJs: true` and `checkJs: true`
+			// in corresponding `tsconfig.json` files.
+			js: true,
+		},
+	}),
+	eslintPluginPrettierRecommended,
+
+	{
+		ignores: [
+			".vscode/**",
+			"node_modules/**",
+			"**/dist/**",
+			"src/serverApi/**",
+			"src/fileStorageApi/**",
+			"src/h5pEditorApi/**",
+		],
+	},
+	{
+		languageOptions: {
+			ecmaVersion: "latest",
+			globals: {
+				...globals.node,
+			},
+		},
+		plugins: {
+			schulcloud,
+		},
+		rules: {
+			"@typescript-eslint/ban-ts-comment": "error",
+			"@typescript-eslint/no-empty-function": "error",
+			"@typescript-eslint/no-empty-object-type": [
+				"error",
+				{ allowInterfaces: "with-single-extends" },
+			],
+			"@typescript-eslint/no-explicit-any": "warn",
+			"@typescript-eslint/no-inferrable-types": "error",
+			"@typescript-eslint/no-require-imports": "warn",
+			"@typescript-eslint/no-restricted-imports": [
+				"warn",
+				{
+					patterns: [
+						{
+							group: [
+								"@data-*/*",
+								"@feature-*/*",
+								"@page-*/*",
+								"@ui-*/*",
+								"@util-*/*",
+							],
+							message: "Do not deep import into a module",
+						},
+						{
+							group: ["@/modules/data/*", "*/../data/*", "../**/data/*"],
+							message:
+								"Data-Modules have to be imported using the pattern '@data-<name>'",
+						},
+						{
+							group: [
+								"@/modules/feature/*",
+								"*/../feature/*",
+								"../**/feature/*",
+							],
+							message:
+								"Feature-Modules have to be imported using the pattern '@feature-<name>'",
+						},
+						{
+							group: ["@/modules/page/*", "*/../page/*", "../**/page/*/*"],
+							message:
+								"Page-Modules have to be imported using the pattern '@page-<name>'",
+						},
+						{
+							group: ["@/modules/ui/*", "*/../ui/*", "../**/ui/*/*"],
+							message:
+								"Ui-Modules have to be imported using the pattern '@ui-<name>'",
+						},
+						{
+							group: ["@/modules/util/*", "*/../util/*", "../**/util/*/*"],
+							message:
+								"Util-Modules have to be imported using the pattern '@util-<name>'",
+						},
+					],
+				},
+			],
+			"@typescript-eslint/no-unused-vars": "warn",
+			"no-console": process.env.NODE_ENV === "production" ? "off" : "warn",
+			"no-debugger": process.env.NODE_ENV === "production" ? "off" : "warn",
+			"no-empty": "error",
+			"no-irregular-whitespace": "error",
+			"no-prototype-builtins": "error",
+			"no-undef": "warn",
+			"no-unused-vars": "off", // disable the base rule for @typescript-eslint/no-unused-vars
+			"no-useless-escape": "error",
+			"no-var": "error",
+			"prefer-const": "error",
+			"prettier/prettier": "error",
+			"schulcloud/material-icon-imports": "error",
+			"vue/html-self-closing": [
+				"error",
+				{
+					html: {
+						void: "always",
+					},
+				},
+			],
+			"vue/multi-word-component-names": "off", // TODO - make a final decision about this rule
+			"vue/no-mutating-props": "error",
+			"vue/no-setup-props-reactivity-loss": "error",
+			"vue/no-useless-template-attributes": "error",
+			"vue/no-v-html": "error",
+			"vue/no-v-text-v-html-on-component": "error",
+		},
+	},
+	{
+		files: ["**/*.unit.{j,t}s?(x)", "tests/**"],
+		languageOptions: {
+			globals: {
+				...globals.jest,
+				mount: "readonly",
+				shallowMount: "readonly",
+				fail: "readonly",
+			},
+		},
+	},
+];

lib/eslint-plugin-schulcloud/material-icon-imports.unit.js

@@ -1,13 +1,14 @@
 "use strict";
 
 const { RuleTester } = require("eslint");
-const rule = require("./material-icon-imports.js");
+const materialIconImportRule = require("./material-icon-imports.js");
 
-const ruleTester = new RuleTester({
-	parserOptions: { ecmaVersion: 2020, sourceType: "module" },
-});
+global.structuredClone = (value) => {
+	return JSON.parse(JSON.stringify(value));
+};
+const ruleTester = new RuleTester();
 
-ruleTester.run("material-icon-imports", rule, {
+ruleTester.run("material-icon-imports", materialIconImportRule, {
 	valid: [
 		{
 			code: `import { mdiCheck } from "@icons/material";`,