Apply new eslint rules; default to prettier for styling

Author: DaneEveritt

.eslintrc.js

@@ -0,0 +1,57 @@
+const prettier = {
+    singleQuote: true,
+    jsxSingleQuote: true,
+    printWidth: 120,
+};
+
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+    parser: '@typescript-eslint/parser',
+    parserOptions: {
+        ecmaVersion: 6,
+        ecmaFeatures: {
+            jsx: true,
+        },
+        project: './tsconfig.json',
+        tsconfigRootDir: './',
+    },
+    settings: {
+        react: {
+            pragma: 'React',
+            version: 'detect',
+        },
+        linkComponents: [
+            {name: 'Link', linkAttribute: 'to'},
+            {name: 'NavLink', linkAttribute: 'to'},
+        ],
+    },
+    env: {
+        browser: true,
+        es6: true,
+    },
+    plugins: [
+        'react',
+        'react-hooks',
+        'prettier',
+        '@typescript-eslint',
+    ],
+    extends: [
+        // 'standard',
+        'eslint:recommended',
+        'plugin:react/recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:jest-dom/recommended',
+    ],
+    rules: {
+        eqeqeq: 'error',
+        'prettier/prettier': ['error', prettier],
+        // This setup is required to avoid a spam of errors when running eslint about React being
+        // used before it is defined.
+        //
+        // @see https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-use-before-define.md#how-to-use
+        'no-use-before-define': 0,
+        '@typescript-eslint/no-use-before-define': 'warn',
+        '@typescript-eslint/no-unused-vars': ['warn', {argsIgnorePattern: '^_', varsIgnorePattern: '^_'}],
+        '@typescript-eslint/ban-ts-comment': ['error', {'ts-expect-error': 'allow-with-description'}],
+    }
+};

.eslintrc.yml

@@ -53,8 +53,6 @@ rules:
   multiline-ternary: 0
   "react-hooks/rules-of-hooks":
     - error
-  "react-hooks/exhaustive-deps": 0
-  "@typescript-eslint/explicit-function-return-type": 0
   "@typescript-eslint/explicit-member-accessibility": 0
   "@typescript-eslint/ban-ts-ignore": 0
   "@typescript-eslint/no-explicit-any": 0

package.json

@@ -99,14 +99,17 @@
         "babel-plugin-styled-components": "^2.0.7",
         "cross-env": "^7.0.2",
         "css-loader": "^5.2.7",
-        "eslint": "^7.27.0",
-        "eslint-config-standard": "^16.0.3",
-        "eslint-plugin-import": "^2.23.3",
+        "eslint": "^8.18.0",
+        "eslint-config-prettier": "^8.5.0",
+        "eslint-config-standard": "^17.0.0",
+        "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-jest-dom": "^4.0.2",
+        "eslint-plugin-n": "^15.2.3",
         "eslint-plugin-node": "^11.1.0",
-        "eslint-plugin-promise": "^5.1.0",
-        "eslint-plugin-react": "^7.23.2",
-        "eslint-plugin-react-hooks": "^4.2.0",
+        "eslint-plugin-prettier": "^4.0.0",
+        "eslint-plugin-promise": "^6.0.0",
+        "eslint-plugin-react": "^7.30.1",
+        "eslint-plugin-react-hooks": "^4.6.0",
         "fork-ts-checker-webpack-plugin": "^6.2.10",
         "identity-obj-proxy": "^3.0.0",
         "jest": "^28.1.1",
@@ -115,6 +118,7 @@
         "postcss-loader": "^4.0.0",
         "postcss-nesting": "^10.1.8",
         "postcss-preset-env": "^7.7.1",
+        "prettier": "^2.7.1",
         "redux-devtools-extension": "^2.13.8",
         "source-map-loader": "^1.1.3",
         "style-loader": "^2.0.0",

resources/scripts/TransitionRouter.tsx

@@ -7,7 +7,7 @@ import tw from 'twin.macro';
 
 const StyledSwitchTransition = styled(SwitchTransition)`
     ${tw`relative`};
-    
+
     & section {
         ${tw`absolute w-full top-0 left-0`};
     }
@@ -19,9 +19,7 @@ const TransitionRouter: React.FC = ({ children }) => {
             render={({ location }) => (
                 <StyledSwitchTransition>
                     <Fade timeout={150} key={location.pathname + location.search} in appear unmountOnExit>
-                        <section>
-                            {children}
-                        </section>
+                        <section>{children}</section>
                     </Fade>
                 </StyledSwitchTransition>
             )}

resources/scripts/api/account/activity.ts

@@ -8,19 +8,26 @@ import useFilteredObject from '@/plugins/useFilteredObject';
 
 export type ActivityLogFilters = QueryBuilderParams<'ip' | 'event', 'timestamp'>;
 
-const useActivityLogs = (filters?: ActivityLogFilters, config?: ConfigInterface<PaginatedResult<ActivityLog>, AxiosError>): responseInterface<PaginatedResult<ActivityLog>, AxiosError> => {
-    const key = useUserSWRContentKey([ 'account', 'activity', JSON.stringify(useFilteredObject(filters || {})) ]);
+const useActivityLogs = (
+    filters?: ActivityLogFilters,
+    config?: ConfigInterface<PaginatedResult<ActivityLog>, AxiosError>
+): responseInterface<PaginatedResult<ActivityLog>, AxiosError> => {
+    const key = useUserSWRContentKey(['account', 'activity', JSON.stringify(useFilteredObject(filters || {}))]);
 
-    return useSWR<PaginatedResult<ActivityLog>>(key, async () => {
-        const { data } = await http.get('/api/client/account/activity', {
-            params: {
-                ...withQueryBuilderParams(filters),
-                include: [ 'actor' ],
-            },
-        });
+    return useSWR<PaginatedResult<ActivityLog>>(
+        key,
+        async () => {
+            const { data } = await http.get('/api/client/account/activity', {
+                params: {
+                    ...withQueryBuilderParams(filters),
+                    include: ['actor'],
+                },
+            });
 
-        return toPaginatedSet(data, Transformers.toActivityLog);
-    }, { revalidateOnMount: false, ...(config || {}) });
+            return toPaginatedSet(data, Transformers.toActivityLog);
+        },
+        { revalidateOnMount: false, ...(config || {}) }
+    );
 };
 
 export { useActivityLogs };

resources/scripts/api/account/createApiKey.ts

@@ -7,11 +7,13 @@ export default (description: string, allowedIps: string): Promise<ApiKey & { sec
             description,
             allowed_ips: allowedIps.length > 0 ? allowedIps.split('\n') : [],
         })
-            .then(({ data }) => resolve({
-                ...rawDataToApiKey(data.attributes),
-                // eslint-disable-next-line camelcase
-                secretToken: data.meta?.secret_token ?? '',
-            }))
+            .then(({ data }) =>
+                resolve({
+                    ...rawDataToApiKey(data.attributes),
+                    // eslint-disable-next-line camelcase
+                    secretToken: data.meta?.secret_token ?? '',
+                })
+            )
             .catch(reject);
     });
 };

resources/scripts/api/account/ssh-keys.ts

@@ -5,15 +5,19 @@ import { SSHKey, Transformers } from '@definitions/user';
 import { AxiosError } from 'axios';
 
 const useSSHKeys = (config?: ConfigInterface<SSHKey[], AxiosError>) => {
-    const key = useUserSWRContentKey([ 'account', 'ssh-keys' ]);
+    const key = useUserSWRContentKey(['account', 'ssh-keys']);
 
-    return useSWR(key, async () => {
-        const { data } = await http.get('/api/client/account/ssh-keys');
+    return useSWR(
+        key,
+        async () => {
+            const { data } = await http.get('/api/client/account/ssh-keys');
 
-        return (data as FractalResponseList).data.map((datum: any) => {
-            return Transformers.toSSHKey(datum.attributes);
-        });
-    }, { revalidateOnMount: false, ...(config || {}) });
+            return (data as FractalResponseList).data.map((datum: any) => {
+                return Transformers.toSSHKey(datum.attributes);
+            });
+        },
+        { revalidateOnMount: false, ...(config || {}) }
+    );
 };
 
 const createSSHKey = async (name: string, publicKey: string): Promise<SSHKey> => {

resources/scripts/api/auth/login.ts

@@ -15,12 +15,14 @@ export interface LoginData {
 export default ({ username, password, recaptchaData }: LoginData): Promise<LoginResponse> => {
     return new Promise((resolve, reject) => {
         http.get('/sanctum/csrf-cookie')
-            .then(() => http.post('/auth/login', {
-                user: username,
-                password,
-                'g-recaptcha-response': recaptchaData,
-            }))
-            .then(response => {
+            .then(() =>
+                http.post('/auth/login', {
+                    user: username,
+                    password,
+                    'g-recaptcha-response': recaptchaData,
+                })
+            )
+            .then((response) => {
                 if (!(response.data instanceof Object)) {
                     return reject(new Error('An error occurred while processing the login request.'));
                 }

resources/scripts/api/auth/loginCheckpoint.ts

@@ -6,12 +6,14 @@ export default (token: string, code: string, recoveryToken?: string): Promise<Lo
         http.post('/auth/login/checkpoint', {
             confirmation_token: token,
             authentication_code: code,
-            recovery_token: (recoveryToken && recoveryToken.length > 0) ? recoveryToken : undefined,
+            recovery_token: recoveryToken && recoveryToken.length > 0 ? recoveryToken : undefined,
         })
-            .then(response => resolve({
-                complete: response.data.data.complete,
-                intended: response.data.data.intended || undefined,
-            }))
+            .then((response) =>
+                resolve({
+                    complete: response.data.data.complete,
+                    intended: response.data.data.intended || undefined,
+                })
+            )
             .catch(reject);
     });
 };

resources/scripts/api/auth/performPasswordReset.ts

@@ -19,10 +19,12 @@ export default (email: string, data: Data): Promise<PasswordResetResponse> => {
             password: data.password,
             password_confirmation: data.passwordConfirmation,
         })
-            .then(response => resolve({
-                redirectTo: response.data.redirect_to,
-                sendToLogin: response.data.send_to_login,
-            }))
+            .then((response) =>
+                resolve({
+                    redirectTo: response.data.redirect_to,
+                    sendToLogin: response.data.send_to_login,
+                })
+            )
             .catch(reject);
     });
 };