fix(ESLint): Import orders

Author: philipbrembeck

.eslintrc.json

@@ -1,4 +1,14 @@
 {
-  "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
-  "plugins": ["@typescript-eslint"]
+  "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended", "plugin:import/errors", "plugin:import/warnings", "plugin:import/typescript"],
+  "plugins": ["@typescript-eslint", "import"],
+  "rules": {
+    "import/order": ["error", {
+      "groups": ["builtin", "external", "internal", "parent", "sibling", "index"],
+      "newlines-between": "always",
+      "alphabetize": {
+        "order": "asc",
+        "caseInsensitive": true
+      }
+    }]
+  }
 }

package-lock.json

@@ -32,8 +32,10 @@
     "@types/react": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^5.42.0",
     "@typescript-eslint/parser": "^5.42.0",
+    "@typescript-eslint/typescript-estree": "^6.1.0",
     "eslint": "8.41.0",
-    "eslint-config-next": "^13.4.4"
+    "eslint-config-next": "^13.4.4",
+    "eslint-plugin-import": "^2.27.5"
   },
   "volta": {
     "node": "18.16.0",

package.json

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, { Component } from "react";
 import Quagga from "@ericblade/quagga2";
+import React, { Component } from "react";
 interface ScannerProps {
   onDetected: (result: any) => void;
   setScanning: (scanning: boolean) => void;

src/components/Scanner/scanner.tsx

@@ -1,10 +1,13 @@
-import React, { useState, useEffect, useRef } from "react";
+
 import VeganCheck from "@frontendnetwork/vegancheck";
-import Scan from "./Scanner/scanner";
 import Image from "next/image";
+import { useTranslations } from "next-intl";
+import React, { useState, useEffect, useRef } from "react";
+
 import ModalWrapper from "@/components/elements/modalwrapper";
 import ShareButton from "@/components/elements/share";
-import { useTranslations } from "next-intl";
+
+import Scan from "./Scanner/scanner";
 
 interface ProductResult {
   productname?: string;

src/components/check.tsx

@@ -1,5 +1,6 @@
-import Link from "next/link";
 import Image from "next/image";
+import Link from "next/link";
+
 import BackButton from '@/components/button_back'
 
 interface ContainerProps {

src/components/elements/container.tsx

@@ -1,6 +1,6 @@
-import { useState } from "react";
-import { useTranslations } from "next-intl";
 import Image from "next/image";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
 
 const SupportOption: React.FC = () => {
   const t = useTranslations("More");

src/components/elements/contents/donate.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from 'react';
 import { useTranslations } from 'next-intl';
+import React, { useState, useEffect } from 'react';
 
 const OLEDMode: React.FC = () => {
   const t = useTranslations('More');

src/components/elements/contents/oledmode.tsx

@@ -1,9 +1,10 @@
 /* eslint-disable @next/next/no-img-element */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useState, useEffect } from "react";
-import ModalWrapper from "@/components/elements/modalwrapper";
 import Image from "next/image";
 import { useTranslations } from "next-intl";
+import { useState, useEffect } from "react";
+
+import ModalWrapper from "@/components/elements/modalwrapper";
 
 const InstallPrompt = () => {
   const t = useTranslations("InstallPrompt");

src/components/elements/pwainstall.tsx

@@ -1,7 +1,8 @@
-import React, { useState, useEffect } from "react";
+import Image from "next/image";
 import { useTranslations } from "next-intl";
+import React, { useState, useEffect } from "react";
+
 import ModalWrapper from "@/components/elements/modalwrapper";
-import Image from "next/image";
 
 interface ShareButtonProps {
   productName: string | undefined;

src/components/elements/share.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useState, useEffect, FC } from "react";
 import Image from "next/image";
 import { useTranslations } from "next-intl";
+import { useState, useEffect, FC } from "react";
 
 interface ExtendedWindow extends Window {
   MSStream?: any;

src/components/elements/shortcutinstall.tsx

@@ -1,7 +1,8 @@
-import React, { useState, FormEvent } from "react";
 import VeganCheck from "@frontendnetwork/vegancheck";
-import { useTranslations } from "next-intl";
 import Image from "next/image";
+import { useTranslations } from "next-intl";
+import React, { useState, FormEvent } from "react";
+
 import ModalWrapper from "@/components/elements/modalwrapper";
 
 export interface FlaggedItem {

src/components/ingredientscheck.tsx

@@ -1,9 +1,9 @@
+import { GetStaticPropsContext } from "next";
 import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useEffect } from "react";
-import { GetStaticPropsContext } from "next";
 import { useTranslations } from "next-intl";
+import { useEffect } from "react";
 
 export default function Nav() {
   const t = useTranslations("Nav");

src/components/nav.tsx

@@ -1,8 +1,9 @@
-import Nav from "@/components/nav";
-import Container from "@/components/elements/container";
 import { GetStaticPropsContext } from 'next'
 import { useTranslations } from 'next-intl';
 
+import Container from "@/components/elements/container";
+import Nav from "@/components/nav";
+
 export default function NotFound() {
   const t = useTranslations('404');
   return (

src/pages/404.tsx

@@ -1,7 +1,7 @@
 import "@/styles/style.scss";
+import { init } from "@socialgouv/matomo-next";
 import type { AppProps } from "next/app";
 import { NextIntlProvider } from "next-intl";
-import { init } from "@socialgouv/matomo-next";
 import { useEffect } from "react";
 
 export default function App({ Component, pageProps }: AppProps) {

src/pages/_app.tsx

@@ -1,8 +1,9 @@
-import Container from "@/components/elements/container";
-import Nav from "@/components/nav";
-import React, { useState, useEffect } from 'react';
 import { GetStaticPropsContext } from 'next'
 import { useTranslations } from 'next-intl';
+import React, { useState, useEffect } from 'react';
+
+import Container from "@/components/elements/container";
+import Nav from "@/components/nav";
 
 const Impressum = () => {
   const t = useTranslations();

src/pages/impressum.tsx

@@ -1,9 +1,10 @@
-import Nav from "@/components/nav";
-import Footer from "@/components/footer";
+import { GetStaticPropsContext } from "next";
+
 import ProductSearch from "@/components/check";
 import InstallPrompt from "@/components/elements/pwainstall";
 import Shortcut from "@/components/elements/shortcutinstall";
-import { GetStaticPropsContext } from "next";
+import Footer from "@/components/footer";
+import Nav from "@/components/nav";
 
 export default function Home() {
   return (