Replace formatting lint package with prettier. Fix lint issues.

eslint.config.js

@@ -1,5 +1,5 @@
 import pluginJs from '@eslint/js';
-import stylisticTs from '@stylistic/eslint-plugin-ts';
+import prettierRecommended from 'eslint-plugin-prettier/recommended';
 import reactPlugin from 'eslint-plugin-react';
 import tseslint from 'typescript-eslint';
 
@@ -18,23 +18,28 @@ export default [
         },
       },
     },
-    plugins: {
-      '@stylistic/ts': stylisticTs,
-    },
   },
   pluginJs.configs.recommended,
   ...tseslint.configs.recommended,
   reactPlugin.configs.flat.recommended,
+  prettierRecommended,
   {
     rules: {
       // 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'],
+      // Formatting
+      'prettier/prettier': [
+        'error',
+        {
+          semi: true,
+          tabWidth: 2,
+          singleQuote: true,
+          trailingComma: 'all',
+          bracketSpacing: true,
+          useTabs: false,
+        },
+      ],
 
       // TypeScript
       '@typescript-eslint/no-unused-vars': 'error',

package.json

@@ -49,7 +49,6 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
-    "@stylistic/eslint-plugin-ts": "^2.6.2",
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "16.0.0",
     "@testing-library/user-event": "14.5.2",
@@ -62,6 +61,8 @@
     "cypress": "13.13.3",
     "cypress-axe": "1.5.0",
     "eslint": "^9.9.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.35.0",
     "gh-pages": "^6.1.1",
     "mochawesome": "^7.1.3",

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)),