Upgrade ESLint

.eslintrc.js

@@ -25,6 +25,8 @@ module.exports = {
         'typescript-sort-keys',
       ],
       rules: {
+        '@stylistic/member-delimiter-style': 'error',
+        '@stylistic/type-annotation-spacing': 'error',
         '@typescript-eslint/array-type': [
           'error',
           {
@@ -41,20 +43,6 @@ module.exports = {
           },
         ],
         '@typescript-eslint/explicit-module-boundary-types': 'off',
-        '@typescript-eslint/indent': [
-          'error',
-          2,
-          {
-            FunctionDeclaration: {
-              parameters: 'first',
-            },
-            FunctionExpression: {
-              parameters: 'first',
-            },
-            SwitchCase: 1,
-          },
-        ],
-        '@typescript-eslint/member-delimiter-style': 'error',
         '@typescript-eslint/member-ordering': [
           'error',
           {
@@ -101,17 +89,17 @@ module.exports = {
         '@typescript-eslint/no-unsafe-member-access': 'warn',
         '@typescript-eslint/no-unsafe-return': 'warn',
         '@typescript-eslint/no-unused-expressions': 'error',
-        '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', ignoreRestSiblings: true }],
+        '@typescript-eslint/no-unused-vars': [
+          'error', {
+            argsIgnorePattern: '^_',
+            caughtErrorsIgnorePattern: '^_',
+            ignoreRestSiblings: true,
+          },
+        ],
         '@typescript-eslint/no-use-before-define': 'off',
-        '@typescript-eslint/object-curly-spacing': ['error', 'always'],
         '@typescript-eslint/prefer-for-of': 'error',
         '@typescript-eslint/prefer-function-type': 'error',
         '@typescript-eslint/prefer-readonly': 'error',
-        '@typescript-eslint/quotes': [
-          'error',
-          'single',
-          { avoidEscape: true },
-        ],
         '@typescript-eslint/restrict-template-expressions': [
           'error',
           {
@@ -121,15 +109,13 @@ module.exports = {
             allowNumber: true,
           },
         ],
-        '@typescript-eslint/semi': ['error', 'always'],
         // TODO: make more strict.
         '@typescript-eslint/strict-boolean-expressions': [
           'error',
           {
             allowNullableBoolean: true,
           },
         ],
-        '@typescript-eslint/type-annotation-spacing': 'error',
         '@typescript-eslint/unified-signatures': 'error',
         'dot-notation': 'off',
         'no-invalid-this': 'off',
@@ -190,22 +176,57 @@ module.exports = {
     sourceType: 'module',
   },
   plugins: [
+    '@stylistic',
     'eslint-plugin-jsdoc',
     'eslint-plugin-import',
   ],
   rules: {
+    '@stylistic/arrow-parens': 'error',
+    '@stylistic/arrow-spacing': 'error',
+    '@stylistic/brace-style': 'error',
+    '@stylistic/comma-dangle': ['error', 'always-multiline'],
+    '@stylistic/eol-last': 'error',
+    '@stylistic/indent': [
+      'error',
+      2,
+      {
+        FunctionDeclaration: {
+          parameters: 'first',
+        },
+        FunctionExpression: {
+          parameters: 'first',
+        },
+        SwitchCase: 1,
+      },
+    ],
+    '@stylistic/max-len': 'off',
+    '@stylistic/new-parens': 'error',
+    '@stylistic/no-multiple-empty-lines': 'error',
+    '@stylistic/no-trailing-spaces': 'error',
+    '@stylistic/object-curly-spacing': ['error', 'always'],
+    '@stylistic/quote-props': ['error', 'as-needed'],
+    '@stylistic/quotes': [
+      'error',
+      'single',
+      { avoidEscape: true },
+    ],
+    '@stylistic/semi': ['error', 'always'],
+    '@stylistic/space-before-function-paren': [
+      'error',
+      {
+        anonymous: 'never',
+        asyncArrow: 'always',
+        named: 'never',
+      },
+    ],
+    '@stylistic/spaced-comment': 'error',
     'arrow-body-style': 'error',
-    'arrow-parens': 'error',
-    'arrow-spacing': 'error',
-    'brace-style': 'error',
-    'comma-dangle': ['error', 'always-multiline'],
     complexity: 'off',
     curly: ['error', 'multi-line'],
     'dot-notation': 'error',
-    'eol-last': 'error',
     eqeqeq: ['error', 'smart'],
     'guard-for-in': 'error',
-    'id-blacklist': [
+    'id-denylist': [
       'error',
       'any',
       'Number',
@@ -221,43 +242,22 @@ module.exports = {
     'import/order': ['error', { alphabetize: { order: 'asc' } }],
     'jsdoc/check-alignment': 'error',
     'jsdoc/check-indentation': 'error',
-    'jsdoc/newline-after-description': 'error',
+    'jsdoc/tag-lines': ['error', 'never', { startLines: 1 }],
     'max-classes-per-file': 'error',
-    'max-len': 'off',
-    'new-parens': 'error',
     'no-bitwise': 'error',
     'no-caller': 'error',
     'no-console': ['error', { allow: ['error', 'warn'] }],
     'no-empty-function': 'error',
     'no-eval': 'error',
     'no-invalid-this': 'error',
-    'no-multiple-empty-lines': 'error',
     'no-new-wrappers': 'error',
     'no-shadow': ['error', { hoist: 'all' }],
     'no-throw-literal': 'error',
-    'no-trailing-spaces': 'error',
     'no-undef-init': 'error',
     'no-unsafe-finally': 'error',
-    'object-curly-spacing': ['error', 'always'],
     'object-shorthand': 'error',
     'one-var': ['error', 'never'],
-    'quote-props': ['error', 'as-needed'],
-    quotes: [
-      'error',
-      'single',
-      { avoidEscape: true },
-    ],
     radix: 'error',
-    semi: ['error', 'always'],
     'sort-keys': ['error', 'asc', { caseSensitive: false }],
-    'space-before-function-paren': [
-      'error',
-      {
-        anonymous: 'never',
-        asyncArrow: 'always',
-        named: 'never',
-      },
-    ],
-    'spaced-comment': 'error',
   },
 };

.github/workflows/lint.yml

@@ -49,7 +49,7 @@ jobs:
       - name: Install js dependencies
         run: yarn --frozen-lockfile
 
-      - run: 'yarn lint --max-warnings 87 > /dev/null'
+      - run: 'yarn lint --max-warnings 86 > /dev/null'
 
       - run: yarn pretty
 

package.json

@@ -102,15 +102,16 @@
     "ziggy-js": "^1.8.1"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^6.6.0",
-    "@typescript-eslint/parser": "^6.6.0",
+    "@stylistic/eslint-plugin": "^2.11.0",
+    "@typescript-eslint/eslint-plugin": "^8.17.0",
+    "@typescript-eslint/parser": "^8.17.0",
     "clean-webpack-plugin": "^4.0.0",
-    "eslint": "^7.15.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsdoc": "^30.7.8",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-typescript-sort-keys": "^3.0.0",
+    "eslint": "^8.57.1",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsdoc": "^50.6.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-typescript-sort-keys": "^3.3.0",
     "jasmine-core": "^4.1.0",
     "karma": "^6.4.1",
     "karma-chrome-launcher": "^3.1.1",

resources/js/artist-tracks-index/search-form.tsx

@@ -39,8 +39,7 @@ export type ArtistTrackSort = `${ArtistTrackSortField}_${ArtistTrackSortOrder}`;
 export const artistTrackSearchRelevanceParams = ['album', 'artist', 'query'] as const;
 type ArtistTrackSearchRelevanceParam = typeof artistTrackSearchRelevanceParams[number];
 
-const artistTrackSearchNumberRangeParams = ['bpm', 'length'] as const;
-type ArtistTrackSearchNumberRangeParam = typeof artistTrackSearchNumberRangeParams[number];
+type ArtistTrackSearchNumberRangeParam = 'bpm' | 'length';
 
 export type ArtistTrackSearch = {
   exclusive_only: boolean;

resources/js/beatmap-discussions/discussion-mode.ts

@@ -4,6 +4,6 @@
 import DiscussionPage from './discussion-page';
 
 type DiscussionMode = Exclude<DiscussionPage, 'events'>;
-export const discussionModes: Readonly<DiscussionMode[]> = ['reviews', 'generalAll', 'general', 'timeline'] as const;
+export const discussionModes: readonly DiscussionMode[] = ['reviews', 'generalAll', 'general', 'timeline'] as const;
 
 export default DiscussionMode;

resources/js/beatmap-discussions/editor.tsx

@@ -124,7 +124,7 @@ export default class Editor extends React.Component<Props, State> {
       if (saved != null) {
         try {
           this.initialValue = JSON.parse(saved) as SlateElement[];
-        } catch (error) {
+        } catch (_error) {
           console.error('invalid json in localStorage, ignoring');
           localStorage.removeItem(this.localStorageKey);
         }

resources/js/beatmap-discussions/new-discussion.tsx

@@ -501,7 +501,7 @@ export class NewDiscussion extends React.Component<Props> {
   private readonly updateStickToHeight = () => this.stickToHeight = this.props.stickTo?.current?.getBoundingClientRect().height;
 
   private validPost(type: string): type is DiscussionType {
-    if (!(discussionTypes as Readonly<string[]>).includes(type)) return false;
+    if (!(discussionTypes as readonly string[]).includes(type)) return false;
     if (!validMessageLength(this.message, this.isTimeline)) return false;
     if (!this.isTimeline) return true;
 

resources/js/beatmap-discussions/review-post.tsx

@@ -34,7 +34,7 @@ export class ReviewPost extends React.Component<Props> {
             break;
         }
       });
-    } catch (e) {
+    } catch (_error) {
       docBlocks.push(<div key={null}>[error parsing review]</div>);
     }
 

resources/js/beatmapsets-show/hype.tsx

@@ -81,10 +81,10 @@ export default class Hype extends React.Component<Props> {
             </p>
           ) : (
             <p
-              className={`${bn}__description-row ${bn}__description-row--action`}
               dangerouslySetInnerHTML={{
                 __html: trans('beatmapsets.show.hype.action'),
               }}
+              className={`${bn}__description-row ${bn}__description-row--action`}
             />
           )}
         </div>

resources/js/beatmapsets-show/info.tsx

@@ -121,10 +121,10 @@ export default class Info extends React.Component<Props> {
             </h3>
 
             <div
-              className='beatmapset-info__value-overflow'
               dangerouslySetInnerHTML={{
                 __html: this.controller.beatmapset.description.description ?? '',
               }}
+              className='beatmapset-info__value-overflow'
             />
           </div>
         </div>

resources/js/components/comment.tsx

@@ -130,7 +130,7 @@ export default class Comment extends React.Component<Props> {
 
     const replies = this.replies;
 
-    return replies.length > 0 && replies.some((reply) => reply.isVisible);
+    return replies.some((reply) => reply.isVisible);
   }
 
   @computed
@@ -510,10 +510,10 @@ export default class Comment extends React.Component<Props> {
               : this.shouldRenderContent &&
               <>
                 <div
-                  className='comment__message'
                   dangerouslySetInnerHTML={{
                     __html: this.props.comment.messageHtml ?? '',
                   }}
+                  className='comment__message'
                 />
                 {this.isLongContent && this.renderToggleClipButton()}
               </>

resources/js/components/sort.tsx

@@ -13,7 +13,7 @@ interface Props {
   showTitle?: boolean;
   title?: string;
   transPrefix: string;
-  values: Readonly<string[]>;
+  values: readonly string[];
 }
 
 export class Sort extends React.PureComponent<Props> {

resources/js/core/click-menu.ts

@@ -47,7 +47,7 @@ export default class ClickMenu {
     }
   };
 
-  show = (target?: string | null | undefined) => {
+  show = (target?: string | null) => {
     const previousTree = this.tree();
 
     this.current = target;

resources/js/core/osu-audio/main.ts

@@ -170,7 +170,7 @@ export default class Main {
     this.setState('loading');
     const promise = this.audio.play();
     // old api returns undefined
-    promise?.catch((error: { name: string }) => {
+    promise?.catch((error: DOMException) => {
       if (Main.ignoredErrors.includes(error.name)) {
         console.error('playback failed:', error.name);
         this.stop();
@@ -213,7 +213,7 @@ export default class Main {
             if (node.classList.contains('js-audio--player')) {
               newPlayers.push(node);
             } else {
-              for (const player of [...node.querySelectorAll('.js-audio--player')]) {
+              for (const player of node.querySelectorAll('.js-audio--player')) {
                 if (player instanceof HTMLElement) {
                   newPlayers.push(player);
                 }

resources/js/core/twitch-embed-player.d.ts

@@ -6,7 +6,7 @@ declare module 'twitch-embed-player' {
   export default class TwitchEmbedPlayer {
     static PLAY: string;
 
-    constructor (id: string, options: Record<string, unknown>);
+    constructor(id: string, options: Record<string, unknown>);
     addEventListener(action: string, callback: () => void): void;
   }
 }

resources/js/entrypoints/notifications-index.tsx

@@ -2,8 +2,8 @@
 // See the LICENCE file in the repository root for full licence text.
 
 import { dispatch } from 'app-dispatcher';
-import { Main } from 'notifications-index/main';
 import { NotificationEventMoreLoaded } from 'notifications/notification-events';
+import { Main } from 'notifications-index/main';
 import core from 'osu-core-singleton';
 import * as React from 'react';
 import { parseJson } from 'utils/json';

resources/js/interfaces/beatmap-discussion-review.ts

@@ -32,5 +32,5 @@ export type PersistedBeatmapReviewBlock = DocumentParagraph | PersistedDocumentI
 export type PersistedBeatmapDiscussionReview = PersistedBeatmapReviewBlock[];
 
 export function isBeatmapReviewDiscussionType(type: string): type is BeatmapReviewDiscussionType {
-  return (beatmapReviewDiscussionTypes as Readonly<string[]>).includes(type);
+  return (beatmapReviewDiscussionTypes as readonly string[]).includes(type);
 }

resources/js/interfaces/beatmapset-discussion-json.ts

@@ -52,14 +52,10 @@ export default BeatmapsetDiscussionJson;
 
 // bundle versions; beatmap is only on modding history events version
 export type BeatmapsetDiscussionJsonForBundle =
-Omit<BeatmapsetDiscussionJson, 'posts'> // bundle explicitly does not include posts; need this for type discrimination.
-& Required<Pick<BeatmapsetDiscussionJson,
-'starting_post'
->>;
+  Omit<BeatmapsetDiscussionJson, 'posts'> // bundle explicitly does not include posts; need this for type discrimination.
+& Required<Pick<BeatmapsetDiscussionJson, 'starting_post'>>;
 
 // discussions page version
 export type BeatmapsetDiscussionJsonForShow =
-BeatmapsetDiscussionJson & Required<Pick<BeatmapsetDiscussionJson,
-'posts'
-| 'votes'
->>;
+  BeatmapsetDiscussionJson
+& Required<Pick<BeatmapsetDiscussionJson, 'posts' | 'votes'>>;

resources/js/interfaces/chat/channel-event-json.ts

@@ -8,7 +8,7 @@ const channelEvents = ['chat.channel.join', 'chat.channel.part'] as const;
 type ChannelEvent = (typeof channelEvents)[number];
 
 export function isChannelEvent(arg: SocketEventData): arg is ChannelEventJson {
-  return arg.event != null && (channelEvents as Readonly<string[]>).includes(arg.event);
+  return arg.event != null && (channelEvents as readonly string[]).includes(arg.event);
 }
 
 export default interface ChannelEventJson {