Replaces ESLint import sorting with Pretttier import sorting

.prettierrc.js

@@ -6,4 +6,11 @@ module.exports = {
   trailingComma: 'all',
   useTabs: false,
   endOfLine: 'auto',
+  plugins: ['@ianvs/prettier-plugin-sort-imports'],
+  importOrder: [
+    '<BUILTIN_MODULES>', // Node.js built-in modules
+    '<THIRD_PARTY_MODULES>', // Imports not matched by other special words or groups.
+    '^(@src)(/.*)$',
+    '^[.]', // relative imports
+  ],
 };

package.json

@@ -19,6 +19,7 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
     "@mui/icons-material": "^5.17.1",
     "@mui/material": "^5.17.1",
     "@plasmohq/messaging": "^0.7.1",
@@ -46,7 +47,6 @@
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-simple-import-sort": "^12.1.1",
     "postcss": "^8.5.3",
     "prettier": "^3.5.3",
     "tailwindcss": "^3.4.17",
@@ -65,7 +65,6 @@
     ],
     "parser": "@typescript-eslint/parser",
     "plugins": [
-      "simple-import-sort",
       "@typescript-eslint"
     ],
     "rules": {
@@ -85,8 +84,6 @@
           ]
         }
       ],
-      "simple-import-sort/imports": "error",
-      "simple-import-sort/exports": "error",
       "import/first": "error",
       "import/newline-after-import": "error",
       "import/no-duplicates": "error",

src/app/index.tsx

@@ -1,6 +1,4 @@
 import { sendToBackground } from '@plasmohq/messaging';
-import React, { useEffect, useState } from 'react';
-
 import type { ShowCourseTabPayload } from '~background';
 import CourseOverview from '~components/CourseOverview';
 import Landing from '~components/Landing';
@@ -17,10 +15,11 @@ import type { GenericFetchedData } from '~types/GenericFetchedData';
 import type { GradesData, GradesType } from '~types/GradesType';
 import {
   convertToProfOnly,
-  type SearchQuery,
   searchQueryEqual,
   searchQueryLabel,
+  type SearchQuery,
 } from '~types/SearchQuery';
+import React, { useEffect, useState } from 'react';
 
 //Find GPA, total, and grade_distribution based on including some set of semesters
 function calculateGrades(grades: GradesData, academicSessions?: string[]) {

src/background/index.ts

@@ -1,5 +1,4 @@
 import { Storage } from '@plasmohq/storage';
-
 import {
   addGCalButtons,
   listenForTableChange,

src/background/messages/getScrapeData.ts

@@ -1,5 +1,4 @@
 import type { PlasmoMessaging } from '@plasmohq/messaging';
-
 import { getScrapedCourseData } from '..';
 
 const handler: PlasmoMessaging.MessageHandler = async (req, res) => {

src/components/BarGraph.tsx

@@ -1,10 +1,9 @@
 import { useMediaQuery } from '@mui/material';
+import { useRainbowColors } from '~utils/colors';
 import { type ApexOptions } from 'apexcharts';
 import dynamic from 'next/dynamic';
 import React from 'react';
 
-import { useRainbowColors } from '~utils/colors';
-
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
 
 type GraphProps = {

src/components/CourseOverview.tsx

@@ -1,11 +1,10 @@
 import { Skeleton } from '@mui/material';
-import React from 'react';
-
 import { TRENDS_URL } from '~data/config';
 import type { GenericFetchedData } from '~types/GenericFetchedData';
 import type { GradesType } from '~types/GradesType';
-import { type SearchQuery, searchQueryLabel } from '~types/SearchQuery';
+import { searchQueryLabel, type SearchQuery } from '~types/SearchQuery';
 import gpaToLetterGrade from '~utils/gpaToLetterGrade';
+import React from 'react';
 
 type CourseOverviewProps = {
   header: string | SearchQuery;