feat: migrate to eslint flat config

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
+  "eslint.experimental.useFlatConfig": true
 	"eslint.validate": ["svelte"],
 	"eslint.workingDirectories": ["app"],
 	"prettier.configPath": "app/.prettierrc.js",

app/eslint.config.js

@@ -0,0 +1,142 @@
+import js from '@eslint/js';
+import tsParser from '@typescript-eslint/parser';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import eslintPluginSvelte from 'eslint-plugin-svelte';
+import globals from 'globals';
+import svelteParser from 'svelte-eslint-parser';
+import tsEslint from 'typescript-eslint';
+import squareSvelteStore from 'eslint-plugin-square-svelte-store';
+import pluginImportX from 'eslint-plugin-import-x';
+
+export default tsEslint.config(
+	js.configs.recommended,
+	...tsEslint.configs.recommended,
+	...eslintPluginSvelte.configs['flat/recommended'],
+	eslintConfigPrettier,
+	...eslintPluginSvelte.configs['flat/prettier'],
+	{
+		files: ['**/*.svelte'],
+		languageOptions: {
+			ecmaVersion: 2021,
+			sourceType: 'module',
+			globals: {
+				...globals.node,
+				...globals.browser,
+				$state: 'readonly',
+				$derived: 'readonly',
+				$props: 'readonly'
+			},
+			parser: svelteParser,
+			parserOptions: {
+				parser: tsParser,
+				extraFileExtensions: ['.svelte']
+			}
+		}
+	},
+	{
+		ignores: [
+			'**/.*', // dotfiles aren't ignored by default in FlatConfig
+			'.*', // dotfiles aren't ignored by default in FlatConfig
+			'**/.DS_Store',
+			'**/node_modules',
+			'butler/target',
+			'build',
+			'.svelte-kit',
+			'package',
+			'e2e',
+			'**/.env',
+			'**/.env.*',
+			'!**/.env.example',
+			'**/pnpm-lock.yaml',
+			'**/package-lock.json',
+			'**/yarn.lock',
+			'.github',
+			'.vscode',
+			'src-tauri',
+			'eslint.config.js',
+			'svelte.config.js',
+			'postcss.config.cjs',
+			'playwright.config.ts',
+			'**/.pnpm-store'
+		]
+	},
+	{
+		languageOptions: {
+			parserOptions: {
+				parser: tsEslint.parser,
+				project: true,
+				extraFileExtensions: ['.svelte']
+			}
+		},
+		rules: {
+			eqeqeq: ['error', 'always'],
+			'import-x/no-cycle': 'error',
+
+			'import-x/order': [
+				'error',
+				{
+					alphabetize: {
+						order: 'asc',
+						orderImportKind: 'asc',
+						caseInsensitive: false
+					},
+
+					groups: [
+						'index',
+						'sibling',
+						'parent',
+						'internal',
+						'external',
+						'builtin',
+						'object',
+						'type'
+					],
+
+					'newlines-between': 'never'
+				}
+			],
+
+			'import-x/no-unresolved': [
+				'error',
+				{
+					ignore: ['^\\$app', '^\\$env']
+				}
+			],
+
+			'func-style': [2, 'declaration'],
+			'@typescript-eslint/no-namespace': 'off',
+			'@typescript-eslint/no-empty-function': 'off',
+			'@typescript-eslint/no-explicit-any': 'off',
+
+			'@typescript-eslint/no-unused-vars': [
+				'error',
+				{
+					argsIgnorePattern: '^_',
+					varsIgnorePattern: '^_',
+					caughtErrorsIgnorePattern: '^_'
+				}
+			],
+
+			'no-return-await': 'off',
+			'@typescript-eslint/return-await': ['error', 'always'],
+			'@typescript-eslint/promise-function-async': 'error',
+			'@typescript-eslint/await-thenable': 'error',
+			'svelte/no-at-html-tags': 'off'
+		},
+		settings: {
+			'import-x/extensions': ['.ts'],
+			'import-x/parsers': {
+				'@typescript-eslint/parser': ['.ts']
+			},
+			'import-x/resolver': {
+				typescript: {
+					project: ['./tsconfig.json', './.svelte-kit/tsconfig.json']
+				}
+			}
+		},
+		plugins: {
+			'square-svelte-store': squareSvelteStore,
+			'import-x': pluginImportX
+		}
+	}
+);

app/package.json

@@ -43,6 +43,7 @@
 		"@codemirror/legacy-modes": "^6.4.0",
 		"@codemirror/state": "^6.4.1",
 		"@codemirror/view": "^6.26.3",
+		"@eslint/js": "^9.5.0",
 		"@lezer/common": "^1.2.1",
 		"@lezer/highlight": "^1.2.0",
 		"@octokit/rest": "^20.1.1",
@@ -56,21 +57,22 @@
 		"@types/crypto-js": "^4.2.2",
 		"@types/diff": "^5.2.1",
 		"@types/diff-match-patch": "^1.0.36",
+		"@types/eslint__js": "^8.42.3",
 		"@types/lscache": "^1.3.4",
 		"@types/marked": "^5.0.2",
-		"@typescript-eslint/eslint-plugin": "^7.13.0",
-		"@typescript-eslint/parser": "^7.13.0",
+		"@typescript-eslint/parser": "^7.13.1",
 		"autoprefixer": "^10.4.19",
 		"class-transformer": "^0.5.1",
 		"crypto-js": "^4.2.0",
 		"date-fns": "^2.30.0",
 		"diff-match-patch": "^1.0.5",
-		"eslint": "^8.57.0",
+		"eslint": "^9.5.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-import-resolver-typescript": "^3.6.1",
-		"eslint-plugin-import": "^2.29.1",
+		"eslint-plugin-import-x": "^0.5.1",
 		"eslint-plugin-square-svelte-store": "^1.0.0",
-		"eslint-plugin-svelte": "2.36.0-next.13",
+		"eslint-plugin-svelte": "2.40.0",
+		"globals": "^15.6.0",
 		"inter-ui": "^4.0.2",
 		"leven": "^4.0.0",
 		"lscache": "^1.3.2",
@@ -88,6 +90,7 @@
 		"rxjs": "^7.8.1",
 		"svelte": "5.0.0-next.149",
 		"svelte-check": "^3.8.0",
+		"svelte-eslint-parser": "^0.39.1",
 		"svelte-floating-ui": "^1.5.8",
 		"svelte-french-toast": "^1.2.0",
 		"svelte-loadable-store": "^2.0.1",
@@ -98,6 +101,7 @@
 		"tinykeys": "^2.1.0",
 		"tslib": "^2.6.3",
 		"typescript": "^5.4.5",
+		"typescript-eslint": "^7.13.1",
 		"vite": "^5.2.13",
 		"vitest": "^0.34.6"
 	},

app/src/lib/components/BaseBranchCard.svelte

@@ -15,7 +15,6 @@
 	const project = getContext(Project);
 
 	$: base = baseBranchService.base;
-	// eslint-disable-next-line svelte/valid-compile
 	$: selected = $page.url.href.endsWith('/base');
 
 	let baseContents: HTMLElement;

app/src/lib/components/BranchItem.svelte

@@ -18,7 +18,6 @@
 	}
 
 	$: href = getBranchLink(branch);
-	// eslint-disable-next-line svelte/valid-compile
 	$: selected = href ? $page.url.href.endsWith(href) : false;
 </script>
 

app/src/lib/components/DomainButton.svelte

@@ -14,7 +14,6 @@
 
 	const baseBranch = getContextStore(BaseBranch);
 
-	// eslint-disable-next-line svelte/valid-compile
 	$: selected = $page.url.href.includes(href);
 </script>
 

app/src/lib/components/ShareIssueModal.svelte

@@ -44,7 +44,6 @@
 	let sendProjectData = false;
 	let sendProjectRepository = false;
 
-	// eslint-disable-next-line svelte/valid-compile
 	$: projectId = $page.params.projectId;
 
 	function reset() {

app/src/lib/components/settings/Sidebar.svelte

@@ -11,7 +11,6 @@
 	const user = userService.user;
 
 	let currentSection: string | undefined;
-	// eslint-disable-next-line svelte/valid-compile
 	$: currentSection = getPageName($page.url.pathname);
 
 	const settingsPageRegExp = /\/settings\/(.*?)(?:$|\/)/;

app/src/lib/utils/tooltip.ts

@@ -17,7 +17,6 @@ export function tooltip(node: HTMLElement, optsOrString: ToolTipOptions | string
 	let timeoutId: any;
 
 	// Options
-	// eslint-disable-next-line prefer-const
 	let { text, delay, noMaxWidth } = defaultOptions;
 
 	// Most use cases only involve passing a string, so we allow either opts of

app/src/routes/+error.svelte

@@ -2,7 +2,6 @@
 	import SomethingWentWrong from '$lib/components/SomethingWentWrong.svelte';
 	import { page } from '$app/stores';
 
-	// eslint-disable-next-line svelte/valid-compile
 	$: message = $page.error
 		? $page.error.message
 		: $page.status === 404

app/src/routes/+page.svelte

@@ -16,7 +16,6 @@
 
 	const projects = projectService.projects;
 
-	// eslint-disable-next-line svelte/valid-compile
 	$: debug = $page.url.searchParams.get('debug');
 
 	const analyticsConfirmed = appAnalyticsConfirmed();

app/src/routes/[projectId]/+page.svelte

@@ -2,7 +2,6 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 
-	// eslint-disable-next-line svelte/valid-compile
 	$: projectId = $page.params.projectId;
 	$: if (projectId) {
 		goto(`/${projectId}/board`, { replaceState: true });

app/src/routes/[projectId]/pull/[number]/+page.svelte

@@ -14,7 +14,6 @@
 	const githubService = getContext(GitHubService);
 
 	$: pr$ = githubService.prs$?.pipe(
-		// eslint-disable-next-line svelte/valid-compile
 		map((prs) => prs.find((b) => b.number.toString() === $page.params.number))
 	);
 </script>