Migrate to dedicated indent style line plugin

eslint.config.mjs

@@ -1,6 +1,7 @@
 import { dirname } from 'path';
 import { fileURLToPath } from 'url';
 import { FlatCompat } from '@eslint/eslintrc';
+import stylistic from '@stylistic/eslint-plugin';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -11,10 +12,14 @@ const compat = new FlatCompat({
 
 const eslintConfig = [
   ...compat.extends('next/core-web-vitals', 'next/typescript'), {
+    plugins: {
+      '@stylistic': stylistic,
+    },
     rules: {
       '@next/next/no-img-element': 'off',
       '@typescript-eslint/no-explicit-any': 'off',
       '@typescript-eslint/no-require-imports': 'off',
+      '@stylistic/indent': ['warn', 2],
       'no-unused-expressions': ['warn'],
       'no-duplicate-imports': ['warn'],
       '@typescript-eslint/no-unused-vars': [
@@ -27,10 +32,6 @@ const eslintConfig = [
         'warn',
         'always-multiline',
       ],
-      'indent': [
-        'warn',
-        2,
-      ],
       'linebreak-style': [
         'warn',
         'unix',

package.json

@@ -52,6 +52,7 @@
     "@eslint/eslintrc": "^3.3.1",
     "@next/bundle-analyzer": "15.4.5",
     "@next/eslint-plugin-next": "^15.4.5",
+    "@stylistic/eslint-plugin": "^5.2.3",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/postcss": "^4.1.11",

pnpm-lock.yaml

@@ -132,6 +132,9 @@ importers:
       '@next/eslint-plugin-next':
         specifier: ^15.4.5
         version: 15.4.5
+      '@stylistic/eslint-plugin':
+        specifier: ^5.2.3
+        version: 5.2.3(eslint@9.32.0(jiti@2.5.1))
       '@tailwindcss/container-queries':
         specifier: ^0.1.1
         version: 0.1.1(tailwindcss@4.1.11)
@@ -1687,6 +1690,12 @@ packages:
     resolution: {integrity: sha512-slcr1wdRbX7NFphXZOxtxRNA7hXAAtJAXJDE/wdoMAos27SIquVCKiSqfB6/28YzQ8FCsB5NKkhdM5gMADbqxg==}
     engines: {node: '>=18.0.0'}
 
+  '@stylistic/eslint-plugin@5.2.3':
+    resolution: {integrity: sha512-oY7GVkJGVMI5benlBDCaRrSC1qPasafyv5dOBLLv5MTilMGnErKhO6ziEfodDDIZbo5QxPUNW360VudJOFODMw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: '>=9.0.0'
+
   '@swc/helpers@0.5.15':
     resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
 
@@ -6576,6 +6585,16 @@ snapshots:
       '@smithy/types': 4.3.1
       tslib: 2.8.1
 
+  '@stylistic/eslint-plugin@5.2.3(eslint@9.32.0(jiti@2.5.1))':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.7.0(eslint@9.32.0(jiti@2.5.1))
+      '@typescript-eslint/types': 8.39.0
+      eslint: 9.32.0(jiti@2.5.1)
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
+      estraverse: 5.3.0
+      picomatch: 4.0.3
+
   '@swc/helpers@0.5.15':
     dependencies:
       tslib: 2.8.1

src/admin/config/AdminAppConfigurationClient.tsx

@@ -136,7 +136,7 @@ export default function AdminAppConfigurationClient({
   Partial<Awaited<ReturnType<typeof testConnectionsAction>>> & {
     simplifiedView?: boolean
     isAnalyzingConfiguration?: boolean
-}) {
+  }) {
   const [hasScrolled, setHasScrolled] = useState(false);
 
   useEffect(() => {
@@ -405,7 +405,8 @@ export default function AdminAppConfigurationClient({
               optional
             >
               {hasNavCaption && renderContent(navCaption)}
-            Store in environment variable (seen in top-right nav, under title):
+              Store in environment variable
+              (seen in top-right nav, under title):
               {renderEnvVars(['NEXT_PUBLIC_NAV_CAPTION'])}
             </ChecklistRow>
             <ChecklistRow

src/app/AppState.ts

@@ -28,8 +28,9 @@ export type AppStateContextType = {
   clearNextPhotoAnimation?: (id?: string) => void
   shouldRespondToKeyboardCommands?: boolean
   setShouldRespondToKeyboardCommands?: Dispatch<SetStateAction<boolean>>
-  categoriesWithCounts?:
-    Awaited<ReturnType<typeof getCountsForCategoriesCachedAction>>
+  categoriesWithCounts?: Awaited<ReturnType<
+    typeof getCountsForCategoriesCachedAction
+  >>
   // MODAL
   isCommandKOpen?: boolean
   setIsCommandKOpen?: Dispatch<SetStateAction<boolean>>

src/components/TagInput.tsx

@@ -226,9 +226,7 @@ export default function TagInput({
         case 'Backspace':
           if (inputText === '' && selectedOptions.length > 0) {
             removeOption(selectedOptions[selectedOptions.length - 1]);
-          if (!showMenuOnDelete) {
-            hideMenu();
-          }
+            if (!showMenuOnDelete) { hideMenu(); }
           }
           break;
         case 'Escape':

src/components/image/ZoomControls.tsx

@@ -16,8 +16,8 @@ export default function ZoomControls({
 }: {
   ref?: RefObject<ZoomControlsRef | null>
   children: ReactNode
-  selectImageElement?:
-    (container: HTMLElement | null) => HTMLImageElement | null
+  selectImageElement?: (container: HTMLElement | null) =>
+    HTMLImageElement | null
   isEnabled?: boolean
 }) {
   const refImageContainer = useRef<HTMLDivElement>(null);

src/photo/form/PhotoForm.tsx

@@ -243,7 +243,10 @@ export default function PhotoForm({
         case 'blurData':
           return shouldDebugImageFallbacks && type === 'edit' && formData.url
             ? <UpdateBlurDataButton
-            photoUrl={getNextImageUrlForManipulation(formData.url, IS_PREVIEW)}
+              photoUrl={getNextImageUrlForManipulation(
+                formData.url,
+                IS_PREVIEW,
+              )}
               onUpdatedBlurData={blurData =>
                 setFormData(data => ({ ...data, blurData }))}
             />