Add initial typescript config and use it for eslint,vitest,playwright (#31186)

This enables eslint to use the typescript parser and resolver which
brings some benefits that eslint rules now have type information
available and a tsconfig.json is required for the upcoming typescript
migration as well. Notable changes done:

- Add typescript parser and resolver
- Move the vue-specific config into the root file
- Enable `vue-scoped-css/enforce-style-type` rule, there was only one
violation and I added a inline disable there.
- Fix new lint errors that were detected because of the parser change
- Update `i/no-unresolved` to remove now-unnecessary workaround for the
resolver
- Disable `i/no-named-as-default` as it seems to raise bogus issues in
the webpack config
- Change vitest config to typescript
- Change playwright config to typescript
- Add `eslint-plugin-playwright` and fix issues
- Add `tsc` linting to `make lint-js`

Author: silverwind

.eslintrc.yaml

@@ -6,9 +6,20 @@ ignorePatterns:
   - /web_src/fomantic
   - /public/assets/js
 
+parser: "@typescript-eslint/parser"
+
 parserOptions:
   sourceType: module
   ecmaVersion: latest
+  project: true
+  extraFileExtensions: [".vue"]
+
+settings:
+  import/extensions: [".js", ".ts"]
+  import/parsers:
+    "@typescript-eslint/parser": [".js", ".ts"]
+  import/resolver:
+    typescript: true
 
 plugins:
   - "@eslint-community/eslint-plugin-eslint-comments"
@@ -103,6 +114,22 @@ overrides:
   - files: ["web_src/js/modules/fetch.js", "web_src/js/standalone/**/*"]
     rules:
       no-restricted-syntax: [2, WithStatement, ForInStatement, LabeledStatement, SequenceExpression]
+  - files: ["**/*.vue"]
+    plugins:
+      - eslint-plugin-vue
+      - eslint-plugin-vue-scoped-css
+    extends:
+      - plugin:vue/vue3-recommended
+      - plugin:vue-scoped-css/vue3-recommended
+    rules:
+      vue/attributes-order: [0]
+      vue/html-closing-bracket-spacing: [2, {startTag: never, endTag: never, selfClosingTag: never}]
+      vue/max-attributes-per-line: [0]
+      vue/singleline-html-element-content-newline: [0]
+  - files: ["tests/e2e/**"]
+    plugins:
+      - eslint-plugin-playwright
+    extends: plugin:playwright/recommended
 
 rules:
   "@eslint-community/eslint-comments/disable-enable-pair": [2]
@@ -264,7 +291,7 @@ rules:
   i/no-internal-modules: [0]
   i/no-mutable-exports: [0]
   i/no-named-as-default-member: [0]
-  i/no-named-as-default: [2]
+  i/no-named-as-default: [0]
   i/no-named-default: [0]
   i/no-named-export: [0]
   i/no-namespace: [0]
@@ -274,7 +301,7 @@ rules:
   i/no-restricted-paths: [0]
   i/no-self-import: [2]
   i/no-unassigned-import: [0]
-  i/no-unresolved: [2, {commonjs: true, ignore: ["\\?.+$", ^vitest/]}]
+  i/no-unresolved: [2, {commonjs: true, ignore: ["\\?.+$"]}]
   i/no-unused-modules: [2, {unusedExports: true}]
   i/no-useless-path-segments: [2, {commonjs: true}]
   i/no-webpack-loader-syntax: [2]

Makefile

@@ -375,11 +375,13 @@ lint-backend-fix: lint-go-fix lint-go-vet lint-editorconfig
 
 .PHONY: lint-js
 lint-js: node_modules
-	npx eslint --color --max-warnings=0 --ext js,vue $(ESLINT_FILES)
+	npx eslint --color --max-warnings=0 --ext js,ts,vue $(ESLINT_FILES)
+	npx tsc
 
 .PHONY: lint-js-fix
 lint-js-fix: node_modules
-	npx eslint --color --max-warnings=0 --ext js,vue $(ESLINT_FILES) --fix
+	npx eslint --color --max-warnings=0 --ext js,ts,vue $(ESLINT_FILES) --fix
+	npx tsc
 
 .PHONY: lint-css
 lint-css: node_modules

package-lock.json

@@ -51,6 +51,7 @@
     "tippy.js": "6.3.7",
     "toastify-js": "1.12.0",
     "tributejs": "5.1.3",
+    "typescript": "5.5.2",
     "uint8-to-base64": "0.2.0",
     "vanilla-colorful": "0.7.2",
     "vue": "3.4.29",
@@ -67,13 +68,16 @@
     "@stoplight/spectral-cli": "6.11.1",
     "@stylistic/eslint-plugin-js": "2.2.1",
     "@stylistic/stylelint-plugin": "2.1.2",
+    "@typescript-eslint/parser": "7.14.1",
     "@vitejs/plugin-vue": "5.0.5",
     "eslint": "8.57.0",
+    "eslint-import-resolver-typescript": "3.6.1",
     "eslint-plugin-array-func": "4.0.0",
     "eslint-plugin-github": "5.0.1",
     "eslint-plugin-i": "2.29.1",
     "eslint-plugin-no-jquery": "3.0.1",
     "eslint-plugin-no-use-extend-native": "0.5.0",
+    "eslint-plugin-playwright": "1.6.2",
     "eslint-plugin-regexp": "2.6.0",
     "eslint-plugin-sonarjs": "1.0.3",
     "eslint-plugin-unicorn": "54.0.0",

package.json

@@ -1,15 +1,12 @@
-// @ts-check
 import {devices} from '@playwright/test';
+import {env} from 'node:process';
+import type {PlaywrightTestConfig} from '@playwright/test';
 
-const BASE_URL = process.env.GITEA_URL?.replace?.(/\/$/g, '') || 'http://localhost:3000';
+const BASE_URL = env.GITEA_URL?.replace?.(/\/$/g, '') || 'http://localhost:3000';
 
-/**
- * @see https://playwright.dev/docs/test-configuration
- * @type {import('@playwright/test').PlaywrightTestConfig}
- */
 export default {
   testDir: './tests/e2e/',
-  testMatch: /.*\.test\.e2e\.js/, // Match any .test.e2e.js files
+  testMatch: /.*\.test\.e2e\.ts/, // Match any .test.e2e.ts files
 
   /* Maximum time one test can run for. */
   timeout: 30 * 1000,
@@ -24,13 +21,13 @@ export default {
   },
 
   /* Fail the build on CI if you accidentally left test.only in the source code. */
-  forbidOnly: Boolean(process.env.CI),
+  forbidOnly: Boolean(env.CI),
 
   /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
+  retries: env.CI ? 2 : 0,
 
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: process.env.CI ? 'list' : [['list'], ['html', {outputFolder: 'tests/e2e/reports/', open: 'never'}]],
+  reporter: env.CI ? 'list' : [['list'], ['html', {outputFolder: 'tests/e2e/reports/', open: 'never'}]],
 
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
@@ -98,4 +95,4 @@ export default {
   outputDir: 'tests/e2e/test-artifacts/',
   /* Folder for test artifacts such as screenshots, videos, traces, etc. */
   snapshotDir: 'tests/e2e/test-snapshots/',
-};
+} satisfies PlaywrightTestConfig;

playwright.config.js renamed to playwright.config.ts

@@ -65,7 +65,7 @@ TEST_MSSQL_HOST=localhost:1433 TEST_MSSQL_DBNAME=gitea_test TEST_MSSQL_USERNAME=
 
 ## Running individual tests
 
-Example command to run `example.test.e2e.js` test file:
+Example command to run `example.test.e2e.ts` test file:
 
 _Note: unlike integration tests, this filtering is at the file level, not function_
 

tests/e2e/README.md

@@ -73,10 +73,10 @@ func TestMain(m *testing.M) {
 	os.Exit(exitVal)
 }
 
-// TestE2e should be the only test e2e necessary. It will collect all "*.test.e2e.js" files in this directory and build a test for each.
+// TestE2e should be the only test e2e necessary. It will collect all "*.test.e2e.ts" files in this directory and build a test for each.
 func TestE2e(t *testing.T) {
 	// Find the paths of all e2e test files in test directory.
-	searchGlob := filepath.Join(filepath.Dir(setting.AppPath), "tests", "e2e", "*.test.e2e.js")
+	searchGlob := filepath.Join(filepath.Dir(setting.AppPath), "tests", "e2e", "*.test.e2e.ts")
 	paths, err := filepath.Glob(searchGlob)
 	if err != nil {
 		t.Fatal(err)