Add more lint rules. Fix lint errors.

eslint.config.js

@@ -1,4 +1,5 @@
 import pluginJs from '@eslint/js';
+import stylisticTs from '@stylistic/eslint-plugin-ts';
 import reactPlugin from 'eslint-plugin-react';
 import tseslint from 'typescript-eslint';
 
@@ -17,15 +18,32 @@ export default [
         },
       },
     },
+    plugins: {
+      '@stylistic/ts': stylisticTs,
+    },
   },
   pluginJs.configs.recommended,
   ...tseslint.configs.recommended,
   reactPlugin.configs.flat.recommended,
   {
     rules: {
-      '@typescript-eslint/no-unsafe-function-type': 'off',
-      '@typescript-eslint/no-unused-expressions': 'off',
+      // Base Warnings
+      'no-console': 'warn',
+
+      // Stylistic Issues
+      '@stylistic/ts/quotes': ['error', 'single'],
+      '@stylistic/ts/indent': ['error', 2],
+      '@stylistic/ts/semi': ['error', 'always'],
+      '@stylistic/ts/comma-dangle': ['error', 'always-multiline'],
+
+      // TypeScript
+      '@typescript-eslint/no-unused-vars': 'error',
+    },
+  },
+  {
+    rules: {
       'react/react-in-jsx-scope': 'off',
     },
+    ignores: ['*.test.tsx'],
   },
 ];

package.json

@@ -49,6 +49,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.8.0",
+    "@stylistic/eslint-plugin-ts": "^2.6.1",
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "16.0.0",
     "@testing-library/user-event": "14.5.2",

src/components/header/header.tsx

@@ -31,7 +31,7 @@ export const Header = (): React.ReactElement => {
 
   useEffect(() => {
     const ref = document.body.style;
-    showMenu ? (ref.overflow = 'hidden') : (ref.overflow = 'visible');
+    ref.overflow = showMenu ? 'hidden' : 'visible';
   }, [showMenu]);
 
   useEffect(() => {

src/data/spacecraft.ts

@@ -50,7 +50,7 @@ const data: Spacecraft[] = [
     id: 6,
     name: 'TIE Reaper',
     description:
-      "The TIE/rp Reaper attack lander, also known simply as the TIE Reaper, was a troop carrier variant of Sienar Fleet Systems' TIE line used by the Galactic Empire. The TIE Reaper differed from the standard craft of the TIE line in that it was a troop carrier; designed for ferrying troops amidst the heat of battle, such as the death troopers on Scarif.",
+      'The TIE/rp Reaper attack lander, also known simply as the TIE Reaper, was a troop carrier variant of Sienar Fleet Systems\' TIE line used by the Galactic Empire. The TIE Reaper differed from the standard craft of the TIE line in that it was a troop carrier; designed for ferrying troops amidst the heat of battle, such as the death troopers on Scarif.',
     affiliation: 'Galactic Empire',
     dimensions: '22.5m x 16.5m x 4.3m',
     appearances: 1,

src/pages/dashboard/dashboard.tsx

@@ -20,14 +20,14 @@ export const Dashboard = (): React.ReactElement => {
   } = useQuery<Spacecraft[], { message: string }>({
     queryKey: ['dashboard'],
     queryFn: () =>
-      // axios
-      //   .get('/spacecraft')
-      //   .then((response) => {
-      //     return response.data;
-      //   })
-      //   .then((data) => {
-      //     return data.items;
-      //   }),
+    // axios
+    //   .get('/spacecraft')
+    //   .then((response) => {
+    //     return response.data;
+    //   })
+    //   .then((data) => {
+    //     return data.items;
+    //   }),
 
       // TODO: Remove this mock response and uncomment above if API available
       Promise.resolve(mockData.items),

src/pages/details/details.tsx

@@ -15,9 +15,9 @@ export const Details = (): React.ReactElement => {
   const { isLoading, error, data } = useQuery<Spacecraft, { message: string }>({
     queryKey: ['details', id],
     queryFn: () =>
-      // axios.get(`/spacecraft/${id}`).then((response) => {
-      //   return response.data;
-      // }),
+    // axios.get(`/spacecraft/${id}`).then((response) => {
+    //   return response.data;
+    // }),
 
       // TODO: Remove this mock response and uncomment above if API available
       Promise.resolve(

src/pages/search-results/search-results.tsx

@@ -13,14 +13,14 @@ export const SearchResults = (): React.ReactElement => {
   const { error, data: items } = useQuery<Spacecraft[], { message: string }>({
     queryKey: ['results', searchParams.get('q')],
     queryFn: () =>
-      // axios
-      //   .get('/search?q=' + searchParams.get('q'))
-      //   .then((response) => {
-      //     return response.data;
-      //   })
-      //   .then((data) => {
-      //     return data.items;
-      //   }),
+    // axios
+    //   .get('/search?q=' + searchParams.get('q'))
+    //   .then((response) => {
+    //     return response.data;
+    //   })
+    //   .then((data) => {
+    //     return data.items;
+    //   }),
 
       // TODO: Remove this mock response and uncomment above if API available
       Promise.resolve(filterResults(mockData.items)),