Added eslint to webpack config

src/dashboardWebView/components/App.tsx

@@ -54,7 +54,7 @@ export const App: React.FunctionComponent<IAppProps> = ({
     return isAllowed(mode?.features || [], FEATURE_FLAG.dashboard.taxonomy.view);
   }, [mode?.features]);
 
-  const checkDevMode = (retry: number = 0) => {
+  const checkDevMode = (retry = 0) => {
     if (!window.fmExternal) {
       if (retry < 5) {
         setTimeout(() => checkDevMode(retry + 1), 150);

src/dashboardWebView/components/Chatbot/Chatbot.tsx

@@ -11,10 +11,11 @@ import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 import { messageHandler } from '@estruyf/vscode/dist/client';
 import { GeneralCommands, WEBSITE_LINKS } from '../../../constants';
+import { l10nJsonFormat } from '@vscode/l10n';
 
 export interface IChatbotProps { }
 
-export const Chatbot: React.FunctionComponent<IChatbotProps> = ({ }: React.PropsWithChildren<IChatbotProps>) => {
+export const Chatbot: React.FunctionComponent<IChatbotProps> = () => {
   const { aiUrl } = useSettingsContext();
   const [company, setCompany] = React.useState<string | undefined>(undefined);
   const [chatId, setChatId] = React.useState<number | undefined>(undefined);
@@ -27,7 +28,7 @@ export const Chatbot: React.FunctionComponent<IChatbotProps> = ({ }: React.Props
 
   const init = async () => {
     setLoading(true);
-    messageHandler.request<any>(GeneralCommands.toVSCode.getLocalization).then((data) => {
+    messageHandler.request<l10nJsonFormat>(GeneralCommands.toVSCode.getLocalization).then((data) => {
       if (data) {
         l10n.config({
           contents: data

src/dashboardWebView/components/DataView/DataForm.tsx

@@ -53,7 +53,7 @@ export const DataForm: React.FunctionComponent<IDataFormProps> = ({
       };
     } catch (error) {
       setError((error as Error).message);
-      return () => { };
+      return () => void 0;
     }
   };
 

src/dashboardWebView/components/DataView/DataView.tsx

@@ -68,15 +68,14 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
   );
 
   const onSubmit = useCallback(
-    (data: any) => {
+    (data: unknown) => {
       if (selectedData?.singleEntry) {
         // Needs to add a single entry
         updateData(data);
         return;
       }
 
-      debugger
-      const dataClone: any[] = Object.assign([], dataEntries);
+      const dataClone: unknown[] = Object.assign([], dataEntries);
       if (selectedIndex !== null && selectedIndex !== undefined) {
         dataClone[selectedIndex] = data;
       } else {
@@ -140,7 +139,7 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
     return dataEntries && selectedIndex !== null && selectedIndex !== undefined
       ? dataEntries[selectedIndex]
       : null;
-  }, [selectedData, , dataEntries, selectedIndex]);
+  }, [selectedData, dataEntries, selectedIndex]);
 
   // Retrieve the data files, check if they have a schema or ID, if not, they shouldn't be shown
   const dataFiles = useMemo(() => {

src/dashboardWebView/components/Filters/LanguageFilter.tsx

@@ -9,7 +9,7 @@ import { LocalizationKey } from '../../../localization';
 
 export interface ILanguageFilterProps { }
 
-export const LanguageFilter: React.FunctionComponent<ILanguageFilterProps> = ({ }: React.PropsWithChildren<ILanguageFilterProps>) => {
+export const LanguageFilter: React.FunctionComponent<ILanguageFilterProps> = () => {
   const locales = useRecoilValue(LocalesAtom);
   const [crntLocale, setCrntLocale] = useRecoilState(LocaleAtom);
 

src/dashboardWebView/components/Header/ClearFilters.tsx

@@ -21,16 +21,16 @@ import { useEffect, useMemo } from 'react';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 
-export const guardRecoilDefaultValue = (candidate: any): candidate is DefaultValue => {
-  if (candidate instanceof DefaultValue) return true;
+export const guardRecoilDefaultValue = (candidate: unknown): candidate is DefaultValue => {
+  if (candidate instanceof DefaultValue) {
+    return true;
+  }
   return false;
 };
 
 export interface IClearFiltersProps { }
 
-export const ClearFilters: React.FunctionComponent<IClearFiltersProps> = (
-  _: React.PropsWithChildren<IClearFiltersProps>
-) => {
+export const ClearFilters: React.FunctionComponent<IClearFiltersProps> = () => {
   const [show, setShow] = React.useState(false);
 
   const folder = useRecoilValue(FolderSelector);
@@ -75,7 +75,9 @@ export const ClearFilters: React.FunctionComponent<IClearFiltersProps> = (
     }
   }, [folder, tag, category, locale, hasCustomFilters]);
 
-  if (!show) return null;
+  if (!show) {
+    return null;
+  }
 
   return (
     <button

src/dashboardWebView/components/Header/Filters.tsx

@@ -36,7 +36,7 @@ export const Filters: React.FunctionComponent<IFiltersProps> = (_: React.PropsWi
           activeItem={crntFilters[filterName]}
           items={values}
           onClick={(value) => setCrntFilters((prev) => {
-            let clone = Object.assign({}, prev);
+            const clone = Object.assign({}, prev);
             if (!clone[filterName] && value) {
               clone[filterName] = value;
             } else {

src/dashboardWebView/components/Header/FoldersFilter.tsx

@@ -10,7 +10,7 @@ export interface IFoldersFilterProps { }
 
 export const FoldersFilter: React.FunctionComponent<
   IFoldersFilterProps
-> = ({ }: React.PropsWithChildren<IFoldersFilterProps>) => {
+> = () => {
   const DEFAULT_TYPE = l10n.t(LocalizationKey.dashboardHeaderFoldersDefault);
   const [crntFolder, setCrntFolder] = useRecoilState(FolderAtom);
   const settings = useRecoilValue(SettingsSelector);

src/dashboardWebView/components/Header/Grouping.tsx

@@ -11,12 +11,12 @@ export interface IGroupingProps { }
 
 export const Grouping: React.FunctionComponent<
   IGroupingProps
-> = ({ }: React.PropsWithChildren<IGroupingProps>) => {
+> = () => {
   const [group, setGroup] = useRecoilState(GroupingAtom);
   const pages = useRecoilValue(AllPagesAtom);
 
   const GROUP_OPTIONS = React.useMemo(() => {
-    let options: { name: string, id: GroupOption }[] = [];
+    const options: { name: string, id: GroupOption }[] = [];
 
     if (pages.length > 0) {
       if (pages.some((x) => x.fmYear)) {

src/dashboardWebView/components/Header/Navigation.tsx

@@ -37,9 +37,7 @@ const NavigationItem: React.FunctionComponent<INavigationItemProps> = ({
   )
 };
 
-export const Navigation: React.FunctionComponent<INavigationProps> = ({
-
-}: React.PropsWithChildren<INavigationProps>) => {
+export const Navigation: React.FunctionComponent<INavigationProps> = () => {
   const [crntTab, setCrntTab] = useRecoilState(TabAtom);
   const tabInfo = useRecoilValue(TabInfoAtom);
   const settings = useRecoilValue(SettingsAtom);

src/dashboardWebView/components/Header/RefreshDashboardData.tsx

@@ -21,9 +21,7 @@ import { ArrowClockwiseIcon } from '../../../components/icons/ArrowClockwiseIcon
 
 export interface IRefreshDashboardDataProps { }
 
-export const RefreshDashboardData: React.FunctionComponent<IRefreshDashboardDataProps> = (
-  { }: React.PropsWithChildren<IRefreshDashboardDataProps>
-) => {
+export const RefreshDashboardData: React.FunctionComponent<IRefreshDashboardDataProps> = () => {
   const view = useRecoilValue(DashboardViewAtom);
   const [, setLoading] = useRecoilState(LoadingAtom);
   const resetSearch = useResetRecoilState(SearchAtom);

src/dashboardWebView/components/Header/Sorting.tsx

@@ -165,7 +165,7 @@ export const Sorting: React.FunctionComponent<ISortingProps> = ({
         }
       }
 
-      let sort = allOptions.find((x) => x.id === crntSortingOption?.id) || sortOptions[0];
+      const sort = allOptions.find((x) => x.id === crntSortingOption?.id) || sortOptions[0];
       setCrntSort(sort);
     };
 

src/dashboardWebView/components/Media/Media.tsx

@@ -67,7 +67,7 @@ export const Media: React.FunctionComponent<IMediaProps> = (
       return [];
     }
 
-    let groupedFolders = [];
+    const groupedFolders = [];
 
     for (const cFolder of settings?.contentFolders || []) {
       const foldersPath = parseWinPath(cFolder.path);

src/dashboardWebView/components/Media/MediaHeaderTop.tsx

@@ -23,7 +23,7 @@ export interface IMediaHeaderTopProps { }
 
 export const MediaHeaderTop: React.FunctionComponent<
   IMediaHeaderTopProps
-> = ({ }: React.PropsWithChildren<IMediaHeaderTopProps>) => {
+> = () => {
   const [lastUpdated, setLastUpdated] = React.useState<string | null>(null);
   const selectedFolder = useRecoilValue(SelectedMediaFolderSelector);
   const crntSorting = useRecoilValue(SortingSelector);

src/dashboardWebView/components/Preview/Preview.tsx

@@ -20,7 +20,8 @@ export const Preview: React.FunctionComponent<IPreviewProps> = ({
 
   const onRefresh = () => {
     if (iframeRef.current?.src) {
-      iframeRef.current.src = iframeRef.current.src;
+      const url = iframeRef.current.src;
+      iframeRef.current.src = url;
     }
   };
 
@@ -34,10 +35,12 @@ export const Preview: React.FunctionComponent<IPreviewProps> = ({
       navUrl = `https://${navUrl}`;
       setCrntUrl(navUrl);
     }
-    iframeRef.current!.src = navUrl;
+    if (iframeRef.current) {
+      iframeRef.current.src = navUrl;
+    }
   };
 
-  const msgListener = (message: MessageEvent<EventData<any>>) => {
+  const msgListener = (message: MessageEvent<EventData<string>>) => {
     if (message.data.command === PreviewCommands.toWebview.updateUrl) {
       setCrntUrl(message.data.payload);
     }

src/dashboardWebView/components/SettingsView/IntegrationsView.tsx

@@ -8,7 +8,7 @@ import { Button as VSCodeButton } from 'vscrui';
 
 export interface IIntegrationsViewProps { }
 
-export const IntegrationsView: React.FunctionComponent<IIntegrationsViewProps> = ({ }: React.PropsWithChildren<IIntegrationsViewProps>) => {
+export const IntegrationsView: React.FunctionComponent<IIntegrationsViewProps> = () => {
   const [deeplApiKey, setDeeplApiKey] = React.useState<string>('');
   const [azureApiKey, setAzureApiKey] = React.useState<string>('');
   const [azureRegion, setAzureRegion] = React.useState<string>('');

src/dashboardWebView/components/SettingsView/SettingsView.tsx

@@ -24,7 +24,7 @@ export const SettingsView: React.FunctionComponent<ISettingsViewProps> = (_: Rea
   const settings = useRecoilValue(SettingsSelector);
 
   const tabs: ITab[] = React.useMemo(() => {
-    let temp = [
+    const temp = [
       { id: "view-1", label: l10n.t(LocalizationKey.settingsViewCommon) },
       { id: "view-2", label: l10n.t(LocalizationKey.settingsViewContentFolders) }
     ];
@@ -44,7 +44,7 @@ export const SettingsView: React.FunctionComponent<ISettingsViewProps> = (_: Rea
       return [];
     }
 
-    let temp = [
+    const temp = [
       {
         id: "view-1",
         content: <CommonSettings />

src/dashboardWebView/components/SnippetsView/Item.tsx

@@ -75,7 +75,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
       return;
     }
 
-    let snippets: Snippets = Object.assign({}, settings?.snippets || {});
+    const snippets: Snippets = Object.assign({}, settings?.snippets || {});
     const snippetLines = snippetOriginalBody.split('\n');
 
     const crntSnippet = Object.assign({}, snippets[snippetKey]);

src/dashboardWebView/components/SnippetsView/SnippetForm.tsx

@@ -79,11 +79,11 @@ const SnippetForm: React.ForwardRefRenderFunction<SnippetFormHandle, ISnippetFor
   );
 
   const snippetBody = useMemo(() => {
-    let body = typeof snippet.body === 'string' ? snippet.body : snippet.body.join(`\n`);
+    const body = typeof snippet.body === 'string' ? snippet.body : snippet.body.join(`\n`);
 
-    const obj: any = {};
+    const obj: { [key: string]: string } = {};
     for (const field of fields) {
-      obj[field.name] = field.value;
+      obj[field.name] = field.value as string;
     }
 
     return SnippetParser.render(body, obj, snippet.openingTags, snippet.closingTags);

src/dashboardWebView/components/SnippetsView/SnippetInputField.tsx

@@ -31,7 +31,7 @@ export const SnippetInputField: React.FunctionComponent<ISnippetInputFieldProps>
         <div className="relative">
           <select
             name={field.name}
-            value={field.value || ''}
+            value={field.value as string || ''}
             className={`block w-full sm:text-sm pr-2 appearance-none disabled:opacity-50 rounded bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] placeholder-[var(--vscode-input-placeholderForeground)] border-[var(--frontmatter-border)] focus:border-[var(--vscode-focusBorder)] focus:outline-0`}
             style={{
               boxShadow: "none"
@@ -69,7 +69,7 @@ export const SnippetInputField: React.FunctionComponent<ISnippetInputFieldProps>
     return (
       <TextField
         name={field.name}
-        value={field.value || ''}
+        value={field.value as string || ''}
         description={field.description}
         onChange={(e) => onValueChange(field, e)}
         rows={4}
@@ -81,7 +81,7 @@ export const SnippetInputField: React.FunctionComponent<ISnippetInputFieldProps>
   return (
     <TextField
       name={field.name}
-      value={field.value || ''}
+      value={field.value as string || ''}
       description={field.description}
       onChange={(e) => onValueChange(field, e)}
     />

src/dashboardWebView/components/TaxonomyView/TaxonomyLookup.tsx

@@ -41,7 +41,7 @@ export const TaxonomyLookup: React.FunctionComponent<ITaxonomyLookupProps> = ({
         return false;
       }
 
-      let fieldName = getTaxonomyField(taxonomy, contentType);
+      const fieldName = getTaxonomyField(taxonomy, contentType);
 
       return fieldName && page[fieldName] ? page[fieldName].includes(value) : false;
     }).length;

src/dashboardWebView/components/TaxonomyView/TaxonomyManager.tsx

@@ -80,7 +80,7 @@ export const TaxonomyManager: React.FunctionComponent<ITaxonomyManagerProps> = (
   }, [data, taxonomy, debounceFilterValue]);
 
   const unmappedItems = useMemo(() => {
-    let unmapped: string[] = [];
+    const unmapped: string[] = [];
 
     if (!pages || !settings?.contentTypes || !taxonomy) {
       return unmapped;
@@ -100,7 +100,7 @@ export const TaxonomyManager: React.FunctionComponent<ITaxonomyManagerProps> = (
           return false;
         }
 
-        let fieldName = getTaxonomyField(taxonomy, contentType);
+        const fieldName = getTaxonomyField(taxonomy, contentType);
 
         if (fieldName && page[fieldName]) {
           values = page[fieldName];

src/dashboardWebView/components/TaxonomyView/TaxonomyTagging.tsx

@@ -70,7 +70,7 @@ export const TaxonomyTagging: React.FunctionComponent<ITaxonomyTaggingProps> = (
           continue;
         }
 
-        let fieldName = getTaxonomyField(taxonomy, contentType);
+        const fieldName = getTaxonomyField(taxonomy, contentType);
 
         if (fieldName && (!page[fieldName] || page[fieldName].indexOf(value) === -1)) {
           untagged.push(page);
@@ -78,7 +78,7 @@ export const TaxonomyTagging: React.FunctionComponent<ITaxonomyTaggingProps> = (
       }
     }
 
-    untagged = untagged.sort(Sorting.number('fmPublished')).reverse();
+    untagged = untagged.sort(Sorting.numerically('fmPublished')).reverse();
 
     if (debounceFilterValue) {
       return untagged.filter((p) => p.title.toLowerCase().includes(debounceFilterValue.toLowerCase()));

src/dashboardWebView/hooks/useMediaInfo.tsx

@@ -42,7 +42,7 @@ export default function useMediaInfo(media?: MediaInfo) {
   }, [media]);
 
   const mediaDetails = useMemo(() => {
-    let sizeDetails = [];
+    const sizeDetails = [];
 
     if (mediaDimensions) {
       sizeDetails.push(mediaDimensions);

src/dashboardWebView/hooks/usePages.tsx

@@ -159,8 +159,6 @@ export default function usePages(pages: Page[]) {
 
         if (tab !== Tab.All) {
           crntPages = crntPages.filter((page) => page.fmDraft === tab);
-        } else {
-          crntPages = crntPages;
         }
       } else {
         // Draft field is a boolean field
@@ -194,8 +192,6 @@ export default function usePages(pages: Page[]) {
             crntPages = drafts;
           } else if (tab === Tab.Scheduled) {
             crntPages = scheduled;
-          } else {
-            crntPages = crntPages;
           }
         }
       }
@@ -240,11 +236,11 @@ export default function usePages(pages: Page[]) {
   };
 
   useEffect(() => {
-    let usedSorting = sorting;
+    const usedSorting = sorting;
 
     const startPageProcessing = () => {
       // Check if search needs to be performed
-      let searchedPages = pages;
+      const searchedPages = pages;
       if (search) {
         Messenger.send(DashboardMessage.searchPages, { query: search });
       } else {

src/dashboardWebView/index.tsx

@@ -14,6 +14,7 @@ import { I10nProvider } from './providers/I10nProvider';
 import { SentryInit } from '../utils/sentryInit';
 import { WEBSITE_LINKS } from '../constants';
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 declare const acquireVsCodeApi: <T = unknown>() => {
   getState: () => T;
   setState: (data: T) => void;
@@ -119,4 +120,8 @@ if (elm) {
 }
 
 // Webpack HMR
-if ((module as any).hot) (module as any).hot.accept();
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+if ((module as any).hot) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (module as any).hot.accept();
+}

src/dashboardWebView/utils/darkenColor.ts

@@ -57,7 +57,7 @@ export const darkenColor = (color: string | undefined, percentage: number) => {
       // Check if the color is in rgba format
       if (color.startsWith('rgba')) {
         // Extract the alpha value
-        const alphaMatch = color.match(/[\d\.]+(?=\))/);
+        const alphaMatch = color.match(/[\d.]+(?=\))/);
         const alpha = alphaMatch ? Number(alphaMatch[0]) : 1;
 
         return `rgba(${darkenedR}, ${darkenedG}, ${darkenedB}, ${alpha})`;

src/dashboardWebView/utils/updateCssVariables.ts

@@ -1,6 +1,6 @@
 import { darkenColor, opacityColor, preserveColor } from '.';
 
-export const updateCssVariables = (isDarkTheme: boolean = true) => {
+export const updateCssVariables = (isDarkTheme = true) => {
   const styles = getComputedStyle(document.documentElement);
 
   // Lightbox