chore: fix eslint stuff

eslint.config.mjs

@@ -1,16 +1,16 @@
-import eslintPluginReact from "eslint-plugin-react";
-import eslintPluginNoSecrets from "eslint-plugin-no-secrets";
+import { fixupPluginRules } from "@eslint/compat";
+import eslintJavascript from "@eslint/js";
+import eslintTypeScriptParser from "@typescript-eslint/parser";
 import eslintPluginImport from "eslint-plugin-import";
-import eslintPluginTailwindCSS from "eslint-plugin-tailwindcss";
-import eslintPluginPromise from "eslint-plugin-promise";
+import eslintPluginNoSecrets from "eslint-plugin-no-secrets";
 import eslintPluginPerfectionist from "eslint-plugin-perfectionist";
-import eslintPluginReactHooks from "eslint-plugin-react-hooks";
 import eslintPluginPrettier from "eslint-plugin-prettier/recommended";
-import eslintTypeScriptParser from "@typescript-eslint/parser";
-import eslintJavascript from "@eslint/js";
-import typescriptEslint from "typescript-eslint";
-import { fixupPluginRules } from "@eslint/compat";
+import eslintPluginPromise from "eslint-plugin-promise";
+import eslintPluginReact from "eslint-plugin-react";
+import eslintPluginReactHooks from "eslint-plugin-react-hooks";
+import eslintPluginTailwindCSS from "eslint-plugin-tailwindcss";
 import globals from "globals";
+import typescriptEslint from "typescript-eslint";
 export default [
 	{
 		ignores: ["**/watch.js", "dist/**/*", "releases/**/*"]
@@ -22,16 +22,10 @@ export default [
 	eslintPluginImport.flatConfigs.typescript,
 	eslintPluginPromise.configs["flat/recommended"],
 	eslintPluginPrettier,
+	eslintPluginPerfectionist.configs["recommended-natural"],
 	{
-		plugins: {
-			react: eslintPluginReact,
-			"no-secrets": eslintPluginNoSecrets,
-			perfectionist: eslintPluginPerfectionist,
-			"react-hooks": fixupPluginRules(eslintPluginReactHooks)
-		},
 		languageOptions: {
 			ecmaVersion: "latest",
-			sourceType: "module",
 			globals: {
 				...globals.browser,
 				...globals.node,
@@ -44,43 +38,54 @@ export default [
 				},
 				project: "./tsconfig.json",
 				tsconfigRootDir: "."
-			}
-		},
-		settings: {
-			tailwindcss: {
-				callees: ["cn"],
-				config: "./tailwind.config.ts"
 			},
-			react: {
-				version: "detect"
-			}
+			sourceType: "module"
+		},
+		plugins: {
+			"no-secrets": eslintPluginNoSecrets,
+			react: eslintPluginReact,
+			"react-hooks": fixupPluginRules(eslintPluginReactHooks)
 		},
 		rules: {
-			"react/react-in-jsx-scope": "off",
+			"@typescript-eslint/explicit-module-boundary-types": "off",
+			"@typescript-eslint/no-explicit-any": "off",
+			"@typescript-eslint/no-floating-promises": "error",
 			"@typescript-eslint/no-unused-vars": [
 				"error",
 				{
-					varsIgnorePattern: "^_",
-					argsIgnorePattern: "^_"
+					args: "all",
+					argsIgnorePattern: "^_",
+					caughtErrors: "all",
+					caughtErrorsIgnorePattern: "^_",
+					destructuredArrayIgnorePattern: "^_",
+					ignoreRestSiblings: true,
+					varsIgnorePattern: "^_"
 				}
 			],
-			"@typescript-eslint/no-explicit-any": "off",
-			"@typescript-eslint/explicit-module-boundary-types": "off",
 			"@typescript-eslint/restrict-template-expressions": "off",
-			quotes: ["error", "double", { avoidEscape: true, allowTemplateLiterals: true }],
-			semi: ["error", "always"],
-			"prefer-const": ["error", { destructuring: "any", ignoreReadBeforeAssign: false }],
-			"prefer-destructuring": ["error", { array: true, object: true }, { enforceForRenamedProperties: true }],
-			"no-useless-escape": "off",
+			"import/first": ["error"],
+			"import/no-named-as-default-member": "off",
+			"import/no-unresolved": "off",
 			"no-empty": ["error", { allowEmptyCatch: true }],
 			"no-mixed-spaces-and-tabs": ["error", "smart-tabs"],
-			"import/first": ["error"],
 			"no-secrets/no-secrets": ["error", { tolerance: 5.0 }],
-			"import/no-unresolved": "off",
-			"tailwindcss/no-custom-classname": "off",
+			"no-useless-escape": "off",
+			"prefer-const": ["error", { destructuring: "any", ignoreReadBeforeAssign: false }],
+			"prefer-destructuring": ["error", { array: true, object: true }, { enforceForRenamedProperties: true }],
+			quotes: ["error", "double", { allowTemplateLiterals: true, avoidEscape: true }],
+			"react/react-in-jsx-scope": "off",
+			semi: ["error", "always"],
 			"tailwindcss/classnames-order": "error",
-			"@typescript-eslint/no-floating-promises": "error",
-			"import/no-named-as-default-member": "off"
+			"tailwindcss/no-custom-classname": "off"
+		},
+		settings: {
+			react: {
+				version: "detect"
+			},
+			tailwindcss: {
+				callees: ["cn"],
+				config: "./tailwind.config.ts"
+			}
 		}
 	},
 	{

public/locales/en-US.json.d.ts

@@ -179,14 +179,14 @@ interface EnUS {
 			};
 			miscellaneous: {
 				features: {
-					automaticTheaterMode: {
-						label: "Automatic theater mode";
-						title: "Automatically enables theater mode when you load a video";
-					};
 					automaticallyDisableClosedCaptions: {
 						label: "Automatically disable closed captions";
 						title: "Automatically disables closed captions when you load a video";
 					};
+					automaticTheaterMode: {
+						label: "Automatic theater mode";
+						title: "Automatically enables theater mode when you load a video";
+					};
 					copyTimestampUrlButton: {
 						label: "Copy video URL with timestamp button";
 						title: "Copies video URL with timestamp (?t=123)";

src/components/Inputs/CSSEditor/CSSEditor.tsx

@@ -4,10 +4,10 @@ import { cn, debounce } from "@/src/utils/utilities";
 import { Editor, type Monaco } from "@monaco-editor/react";
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 
-import EditorProblems from "./EditorProblems";
-import ExpandButton from "./ExpandButton";
 import { editorOptions } from "./editorOptions";
+import EditorProblems from "./EditorProblems";
 import "./editorWorkerConfig";
+import ExpandButton from "./ExpandButton";
 
 export type CSSEditorProps = {
 	className?: string;

src/components/Inputs/CSSEditor/EditorProblems/index.tsx

@@ -1,6 +1,6 @@
 import { useSettings } from "@/src/components/Settings/Settings";
 import { type Nullable } from "@/src/types";
-import { MarkerSeverity, type editor } from "@/src/utils/monaco";
+import { type editor, MarkerSeverity } from "@/src/utils/monaco";
 import { cn } from "@/src/utils/utilities";
 import React, { forwardRef } from "react";
 
@@ -16,14 +16,14 @@ const EditorProblems = forwardRef<HTMLDivElement, EditorProblemsProps>(({ classN
 	} = useSettings();
 	const getIcon = (severity: MarkerSeverity) => {
 		switch (severity) {
+			case MarkerSeverity.Error:
+				return "error";
 			case MarkerSeverity.Hint:
 				return "hint";
 			case MarkerSeverity.Info:
 				return "info";
 			case MarkerSeverity.Warning:
 				return "warning";
-			case MarkerSeverity.Error:
-				return "error";
 			default:
 				return "";
 		}

src/components/Inputs/CSSEditor/editorOptions.ts

@@ -4,8 +4,8 @@ export const editorOptions: editor.IStandaloneEditorConstructionOptions = {
 	acceptSuggestionOnEnter: "on",
 	accessibilitySupport: "auto",
 	autoIndent: "full",
-	autoSurround: "languageDefined",
 	automaticLayout: true,
+	autoSurround: "languageDefined",
 	bracketPairColorization: {
 		enabled: true,
 		independentColorPoolPerBracketType: true
@@ -59,9 +59,9 @@ export const editorOptions: editor.IStandaloneEditorConstructionOptions = {
 	rulers: [],
 	scrollBeyondLastColumn: 5,
 	scrollBeyondLastLine: false,
-	selectOnLineNumbers: true,
 	selectionClipboard: true,
 	selectionHighlight: true,
+	selectOnLineNumbers: true,
 	"semanticHighlighting.enabled": true,
 	showFoldingControls: "always",
 	smoothScrolling: true,

src/components/Inputs/Select/Select.tsx

@@ -1,4 +1,4 @@
-import type { PathValue, configuration, configurationId } from "@/src/types";
+import type { configuration, configurationId, PathValue } from "@/src/types";
 import type { ClassValue } from "clsx";
 import type { ChangeEvent } from "react";
 

src/components/Inputs/index.tsx

@@ -1,10 +1,10 @@
 import type { SelectOption } from "./Select/Select";
 
-import { CSSEditor } from "./CSSEditor";
 import { Checkbox } from "./CheckBox";
 import { ColorPicker } from "./ColorPicker";
+import { CSSEditor } from "./CSSEditor";
 import { NumberInput } from "./Number";
 import { Select } from "./Select";
 import { Slider } from "./Slider";
 import { TextInput } from "./TextInput";
-export { CSSEditor, Checkbox, ColorPicker, NumberInput, Select, type SelectOption, Slider, TextInput };
+export { Checkbox, ColorPicker, CSSEditor, NumberInput, Select, type SelectOption, Slider, TextInput };

src/components/Settings/Settings.tsx

@@ -1,6 +1,5 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable tailwindcss/enforces-shorthand */
-import type { AllButtonNames, Nullable, Path, configuration, configurationKeys } from "@/src/types";
+import type { AllButtonNames, configuration, configurationKeys, Nullable, Path } from "@/src/types";
 import type { ClassValue } from "clsx";
 import type EnUS from "public/locales/en-US.json";
 import type { ChangeEvent, ChangeEventHandler } from "react";
@@ -18,7 +17,7 @@ import { configurationImportSchema, defaultConfiguration as defaultSettings } fr
 import { updateStoredSettings } from "@/src/utils/updateStoredSettings";
 import { cn, deepMerge, formatDateForFileName, getPathValue, isButtonSelectDisabled, parseStoredValue } from "@/src/utils/utilities";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { Suspense, createContext, useContext, useEffect, useRef, useState } from "react";
+import { createContext, Suspense, useContext, useEffect, useRef, useState } from "react";
 import { MdOutlineOpenInNew } from "react-icons/md";
 import { generateErrorMessage } from "zod-error";
 
@@ -751,20 +750,20 @@ export default function Settings() {
 						type="checkbox"
 					/>
 					<Setting
-						type="checkbox"
 						checked={settings.enable_hide_official_artist_videos_from_home_page?.toString() === "true"}
 						id="enable_hide_official_artist_videos_from_home_page"
 						label={t("settings.sections.miscellaneous.features.hideOfficialArtistVideosFromHomePage.label")}
 						onChange={setCheckboxOption("enable_hide_official_artist_videos_from_home_page")}
 						title={t("settings.sections.miscellaneous.features.hideOfficialArtistVideosFromHomePage.title")}
+						type="checkbox"
 					/>
 					<Setting
-						type="checkbox"
 						checked={settings.enable_automatically_disable_closed_captions?.toString() === "true"}
 						id="enable_automatically_disable_closed_captions"
 						label={t("settings.sections.miscellaneous.features.automaticallyDisableClosedCaptions.label")}
 						onChange={setCheckboxOption("enable_automatically_disable_closed_captions")}
 						title={t("settings.sections.miscellaneous.features.automaticallyDisableClosedCaptions.title")}
+						type="checkbox"
 					/>
 				</SettingSection>
 				<SettingSection title={t("settings.sections.videoHistory.title")}>
@@ -1010,25 +1009,25 @@ export default function Settings() {
 						disabled={settings.enable_forced_playback_speed?.toString() !== "true"}
 						id="player_speed"
 						label={t("settings.sections.playbackSpeed.select.label")}
-						onChange={setValueOption("player_speed")}
-						title={t("settings.sections.playbackSpeed.select.title")}
-						value={settings.player_speed}
 						max={youtubePlayerMaxSpeed}
 						min={youtubePlayerSpeedStep}
+						onChange={setValueOption("player_speed")}
 						step={youtubePlayerSpeedStep}
+						title={t("settings.sections.playbackSpeed.select.title")}
 						type="number"
+						value={settings.player_speed}
 					/>
 					<Setting
 						disabled={settings.enable_playback_speed_buttons?.toString() !== "true"}
 						id="playback_buttons_speed"
 						label={t("settings.sections.playbackSpeed.playbackSpeedButtons.select.label")}
-						onChange={setValueOption("playback_buttons_speed")}
-						value={settings.playback_buttons_speed}
 						max={1}
 						min={youtubePlayerSpeedStep}
+						onChange={setValueOption("playback_buttons_speed")}
 						step={youtubePlayerSpeedStep}
 						title={t("settings.sections.playbackSpeed.playbackSpeedButtons.select.title")}
 						type="number"
+						value={settings.playback_buttons_speed}
 					/>
 				</SettingSection>
 				<SettingSection title={t("settings.sections.volumeBoost.title")}>

src/components/Settings/components/Setting.tsx

@@ -3,15 +3,15 @@ import type { configurationId } from "@/src/types";
 import useSectionTitle from "@/src/hooks/useSectionTitle";
 import useSettingsFilter from "@/src/hooks/useSettingsFilter";
 
-import type { CSSEditorProps } from "../../Inputs/CSSEditor/CSSEditor";
 import type { CheckboxProps } from "../../Inputs/CheckBox/CheckBox";
 import type { ColorPickerProps } from "../../Inputs/ColorPicker/ColorPicker";
+import type { CSSEditorProps } from "../../Inputs/CSSEditor/CSSEditor";
 import type { NumberInputProps } from "../../Inputs/Number/Number";
 import type { SelectProps } from "../../Inputs/Select/Select";
 import type { SliderProps } from "../../Inputs/Slider/Slider";
 import type { TextInputProps } from "../../Inputs/TextInput/TextInput";
 
-import { CSSEditor, Checkbox, ColorPicker, NumberInput, Select, Slider, TextInput } from "../../Inputs";
+import { Checkbox, ColorPicker, CSSEditor, NumberInput, Select, Slider, TextInput } from "../../Inputs";
 
 type SettingInputProps<ID extends configurationId> = {
 	id: ID;

src/features/automaticallyDisableClosedCaptions/index.ts

@@ -1,4 +1,5 @@
 import type { YouTubePlayerDiv } from "@/src/types";
+
 import { isLivePage, isWatchPage, waitForAllElements, waitForSpecificMessage } from "@/src/utils/utilities";
 let captionsWhereEnabled = false;
 export async function enableAutomaticallyDisableClosedCaptions() {

src/features/buttonPlacement/index.ts

@@ -4,7 +4,7 @@ import type { AllButtonNames, ButtonPlacement, MultiButtonNames, SingleButtonFea
 import { addFeatureItemToMenu, removeFeatureItemFromMenu } from "@/src/features/featureMenu/utils";
 import { findKeyByValue, removeTooltip, waitForSpecificMessage } from "@/src/utils/utilities";
 
-import { type ListenerType, getFeatureButtonId, makeFeatureButton, placeButton } from "./utils";
+import { getFeatureButtonId, type ListenerType, makeFeatureButton, placeButton } from "./utils";
 export const featuresInControls = new Set<AllButtonNames>();
 
 export async function addFeatureButton<Name extends AllButtonNames, Placement extends ButtonPlacement, Label extends string, Toggle extends boolean>(

src/features/featureMenu/index.ts

@@ -1,7 +1,7 @@
 import type { FeatureMenuOpenType } from "@/src/types";
 
 import eventManager from "@/src/utils/EventManager";
-import { createSVGElement, createStyledElement, createTooltip, isWatchPage, waitForAllElements, waitForSpecificMessage } from "@/src/utils/utilities";
+import { createStyledElement, createSVGElement, createTooltip, isWatchPage, waitForAllElements, waitForSpecificMessage } from "@/src/utils/utilities";
 
 import { isNewYouTubeVideoLayout } from "../../utils/utilities";
 

src/features/hideOfficialArtistVideosFromHomePage/index.ts

@@ -1,11 +1,13 @@
 import type { Nullable } from "@/src/types";
-import "./index.css";
-import { waitForSpecificMessage } from "@/src/utils/utilities";
+
 import {
 	hideOfficialArtistVideosFromHomePage,
 	observeOfficialArtistVideosFromHomePage,
 	showOfficialArtistVideosFromHomePage
 } from "@/src/features/hideOfficialArtistVideosFromHomePage/utils";
+import { waitForSpecificMessage } from "@/src/utils/utilities";
+
+import "./index.css";
 let officialArtistVideosObserver: Nullable<MutationObserver> = null;
 export async function enableHideOfficialArtistVideosFromHomePage() {
 	// Wait for the "options" message from the content script

src/features/playbackSpeedButtons/index.ts

@@ -1,12 +1,11 @@
-import { youtubePlayerMinSpeed, type YouTubePlayerDiv } from "@/src/types";
-
 import { addFeatureButton, removeFeatureButton } from "@/src/features/buttonPlacement";
 import { checkIfFeatureButtonExists, getFeatureButton } from "@/src/features/buttonPlacement/utils";
 import { setPlayerSpeed } from "@/src/features/playerSpeed";
 import { getFeatureIcon } from "@/src/icons";
+import { type YouTubePlayerDiv, youtubePlayerMinSpeed } from "@/src/types";
 import eventManager from "@/src/utils/EventManager";
 import OnScreenDisplayManager from "@/src/utils/OnScreenDisplayManager";
-import { createTooltip, isWatchPage, waitForSpecificMessage, round } from "@/src/utils/utilities";
+import { createTooltip, isWatchPage, round, waitForSpecificMessage } from "@/src/utils/utilities";
 
 import type { AddButtonFunction, RemoveButtonFunction } from "../index";
 let currentPlaybackSpeed = 1;

src/features/playlistLength/index.ts

@@ -1,7 +1,7 @@
 import type { Nullable } from "@/src/types";
 
-import eventManager from "@/src/utils/EventManager";
 import { YouTube_Enhancer_Public_Youtube_Data_API_V3_Key } from "@/src/utils/constants";
+import eventManager from "@/src/utils/EventManager";
 import { isWatchPage, waitForAllElements, waitForSpecificMessage } from "@/src/utils/utilities";
 
 import { headerSelector, initializePlaylistLength, playlistItemsSelector } from "./utils";
@@ -31,7 +31,7 @@ export async function enablePlaylistLength() {
 			playlistLengthGetMethod,
 			playlistWatchTimeGetMethod
 		});
-	} catch (error) {
+	} catch (_error) {
 		documentObserver?.disconnect();
 		documentObserver = null;
 		documentObserver = await initializePlaylistLength({

src/features/rememberVolume/utils.ts

@@ -1,4 +1,4 @@
-import type { YouTubePlayerDiv, configuration } from "@/src/types";
+import type { configuration, YouTubePlayerDiv } from "@/src/types";
 
 import eventManager from "@/src/utils/EventManager";
 import { browserColorLog, isLivePage, isShortsPage, isWatchPage, sendContentOnlyMessage, waitForSpecificMessage } from "@/src/utils/utilities";

src/features/screenshotButton/index.ts

@@ -55,7 +55,7 @@ async function takeScreenshot(videoElement: HTMLVideoElement) {
 				break;
 			}
 		}
-	} catch (error) {}
+	} catch (_error) {}
 }
 
 export const addScreenshotButton: AddButtonFunction = async () => {