Replace deprecated eslint rules with eslint-stylistic

frontend/.eslintrc.cjs

@@ -2,10 +2,12 @@ module.exports = {
   root: true,
   extends: [
     'eslint:recommended',
+    'plugin:@stylistic/disable-legacy',
   ],
   plugins: [
     '@typescript-eslint',
     'import',
+    '@stylistic',
   ],
   parserOptions: {
     sourceType: 'module',
@@ -26,17 +28,19 @@ module.exports = {
         parser: '@typescript-eslint/parser',
       },
       rules: {
-        'svelte/indent': ['error', { indent: 2 }],
+        /// linting
         'svelte/valid-compile': ['error', { ignoreWarnings: true }],
+        'svelte/no-extra-reactive-curlies': 'warn',
+        'svelte/html-self-closing': 'error',
+        '@typescript-eslint/no-unused-vars': 'warn',
+        /// formatting
+        '@stylistic/indent': 'off',
+        'svelte/indent': ['error', { indent: 2 }],
         'svelte/first-attribute-linebreak': 'warn',
         'svelte/max-attributes-per-line': ['warn', { singleline: 3 }],
         'svelte/mustache-spacing': 'warn',
-        'svelte/no-extra-reactive-curlies': 'warn',
         'svelte/no-spaces-around-equal-signs-in-attribute': 'error',
         'svelte/sort-attributes': 'warn',
-        'svelte/html-self-closing': 'error',
-        '@typescript-eslint/no-unused-vars': 'warn',
-        indent: 'off',
       },
     },
     {
@@ -60,16 +64,20 @@ module.exports = {
     node: true,
   },
   rules: {
-    'no-multi-spaces': 'error',
-    indent: ['error', 2],
-    quotes: ['error', 'single'],
+    /// linting
     curly: ['error', 'multi-line'],
-    'no-extra-semi': 'error',
     'no-var': 'error',
-    'quote-props': ['error', 'as-needed', { keywords: false, unnecessary: true, numbers: false }],
-    semi: ['error', 'always'],
-    'comma-dangle': ['error', 'always-multiline'],
-    'object-curly-spacing': ['error', 'always'],
+    /// formatting
+    // general
+    '@stylistic/no-multi-spaces': 'error',
+    '@stylistic/indent': ['error', 2],
+    '@stylistic/quotes': ['error', 'single'],
+    '@stylistic/no-extra-semi': 'error',
+    '@stylistic/quote-props': ['error', 'as-needed', { keywords: false, unnecessary: true, numbers: false }],
+    '@stylistic/semi': ['error', 'always'],
+    '@stylistic/comma-dangle': ['error', 'always-multiline'],
+    '@stylistic/object-curly-spacing': ['error', 'always'],
+    // imports
     'import/order': ['error', { 'newlines-between': 'always' }],
     'import/newline-after-import': ['error'],
     'import/no-duplicates': ['error'],

frontend/package.json

@@ -50,6 +50,7 @@
     "@mdi/js": "^7.3.67",
     "@skeletonlabs/skeleton": "^2.7.1",
     "@skeletonlabs/tw-plugin": "^0.3.1",
+    "@stylistic/eslint-plugin": "^1.6.1",
     "@sveltejs/vite-plugin-svelte": "^3.0.1",
     "@tsconfig/svelte": "^5.0.2",
     "@types/async": "^3.2.24",

frontend/src/lib/components/Select.svelte

@@ -63,7 +63,7 @@
   }
 
   // eslint-disable-next-line no-undef
-  const dispatch = createEventDispatcher<{change: T}>();
+  const dispatch = createEventDispatcher<{ change: T }>();
 
   function onChange({ target }: Event) {
     const newValue = (target as HTMLButtonElement).value;

frontend/src/lib/components/left-bar/Settings.svelte

@@ -34,7 +34,7 @@
     closeQuery: '[data-popup="start-view-menu"] .listbox-item',
   } satisfies PopupSettings;
 
-  let views: {id: ViewType, name: string}[] = [
+  let views: { id: ViewType, name: string }[] = [
     {
       id: 'compact',
       name: 'Compact',
@@ -55,7 +55,7 @@
     closeQuery: '[data-popup="update-check-mode-menu"] .listbox-item',
   } satisfies PopupSettings;
 
-  let updateCheckModes: {id: 'launch'|'exit'|'ask', name: string}[] = [
+  let updateCheckModes: { id: 'launch'|'exit'|'ask', name: string }[] = [
     {
       id: 'launch',
       name: 'On start',
@@ -80,7 +80,7 @@
     closeQuery: '[data-popup="queue-mode-menu"] .listbox-item',
   } satisfies PopupSettings;
 
-  let queueModes: {id: boolean, name: string}[] = [
+  let queueModes: { id: boolean, name: string }[] = [
     {
       id: true,
       name: 'Start immediately',
@@ -101,7 +101,7 @@
     closeQuery: '[data-popup="launch-button-menu"] .listbox-item',
   } satisfies PopupSettings;
 
-  let launchButtons: {id: LaunchButtonType, name: string}[] = [
+  let launchButtons: { id: LaunchButtonType, name: string }[] = [
     {
       id: 'normal',
       name: 'Normal',

frontend/src/lib/components/modals/ErrorModal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { GenerateDebugInfo } from '$lib/generated/wailsjs/go/app/app';
 
-  export let parent: {onClose: () => void};
+  export let parent: { onClose: () => void };
 
   export let error: string;
 </script>

frontend/src/lib/components/modals/ModChangelog.svelte

@@ -6,7 +6,7 @@
   import { GetChangelogDocument } from '$lib/generated';
   import { offline } from '$lib/store/settingsStore';
 
-  export let parent: {onClose: () => void};
+  export let parent: { onClose: () => void };
 
   export let mod: string;
   export let versionRange: string | { from: string, to: string };

frontend/src/lib/components/modals/ModImage.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   // Skeleton passes the parent prop to the modal component, and we would get a warning if the prop is not present here
-  export let parent: {onClose: () => void};
+  export let parent: { onClose: () => void };
 
   // Just so that it's not unused
   $: parent;

frontend/src/lib/components/modals/ServerManager.svelte

@@ -10,7 +10,7 @@
 
   export let parent: { onClose: () => void };
   
-  type RemoteType = ({ type: 'remote'; protocol: string; } | { type: 'local' }) & { name: string; }
+  type RemoteType = ({ type: 'remote'; protocol: string; } | { type: 'local' }) & { name: string; };
 
   const remoteTypes: RemoteType[] = [
     { type: 'remote', protocol: 'ftp://', name: 'FTP' },

frontend/src/lib/components/modals/profiles/AddProfile.svelte

@@ -5,7 +5,7 @@
   import { selectedProfile } from '$lib/store/ficsitCLIStore';
   import { error } from '$lib/store/generalStore';
 
-  export let parent: {onClose: () => void};
+  export let parent: { onClose: () => void };
 
   async function finishAddProfile() {
     try {