internal imports now prefixed with @

Author: barrymun

eslint.config.js

@@ -69,6 +69,14 @@ export default tseslint.config(
           "type",
           "unknown"
         ],
+        "pathGroups": [
+          {
+            "pattern": "@*",
+            "group": "internal",
+            "position": "after"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": ["builtin", "internal"],
         "newlines-between": "always",
         "alphabetize": {
           "order": "asc",

src/App.tsx

@@ -1,9 +1,9 @@
-import SnippetList from "components/SnippetList";
-import { useAppContext } from "contexts/AppContext";
-import Banner from "layouts/Banner";
-import Footer from "layouts/Footer";
-import Header from "layouts/Header";
-import Sidebar from "layouts/Sidebar";
+import SnippetList from "@components/SnippetList";
+import { useAppContext } from "@contexts/AppContext";
+import Banner from "@layouts/Banner";
+import Footer from "@layouts/Footer";
+import Header from "@layouts/Header";
+import Sidebar from "@layouts/Sidebar";
 
 const App = () => {
   const { category } = useAppContext();

src/components/CategoryList.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 
-import { useAppContext } from "contexts/AppContext";
-import { useCategories } from "hooks/useCategories";
+import { useAppContext } from "@contexts/AppContext";
+import { useCategories } from "@hooks/useCategories";
 
 const CategoryList = () => {
   const { category, setCategory } = useAppContext();

src/components/LanguageSelector.tsx

@@ -1,9 +1,9 @@
 import { useRef, useEffect, useState } from "react";
 
-import { useAppContext } from "contexts/AppContext";
-import { useKeyboardNavigation } from "hooks/useKeyboardNavigation";
-import { useLanguages } from "hooks/useLanguages";
-import { LanguageType } from "types";
+import { useAppContext } from "@contexts/AppContext";
+import { useKeyboardNavigation } from "@hooks/useKeyboardNavigation";
+import { useLanguages } from "@hooks/useLanguages";
+import { LanguageType } from "@types";
 
 // Inspired by https://blog.logrocket.com/creating-custom-select-dropdown-css/
 

src/components/SnippetList.tsx

@@ -1,8 +1,8 @@
 import { useState } from "react";
 
-import { useAppContext } from "contexts/AppContext";
-import { useSnippets } from "hooks/useSnippets";
-import { SnippetType } from "types";
+import { useAppContext } from "@contexts/AppContext";
+import { useSnippets } from "@hooks/useSnippets";
+import { SnippetType } from "@types";
 
 import { LeftAngleArrowIcon } from "./Icons";
 import SnippetModal from "./SnippetModal";

src/components/SnippetModal.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import ReactDOM from "react-dom";
 
-import { useEscapeKey } from "hooks/useEscapeKey";
-import { SnippetType } from "types";
-import { slugify } from "utils/slugify";
+import { useEscapeKey } from "@hooks/useEscapeKey";
+import { SnippetType } from "@types";
+import { slugify } from "@utils/slugify";
 
 import Button from "./Button";
 import CodePreview from "./CodePreview";

src/contexts/AppContext.tsx

@@ -1,6 +1,6 @@
 import { createContext, FC, useContext, useState } from "react";
 
-import { AppState, LanguageType, SnippetType } from "types";
+import { AppState, LanguageType, SnippetType } from "@types";
 
 // tokens
 const defaultLanguage: LanguageType = {

src/hooks/useCategories.ts

@@ -1,8 +1,8 @@
 import { useMemo } from "react";
 
-import { useAppContext } from "contexts/AppContext";
-import { SnippetType } from "types";
-import { slugify } from "utils/slugify";
+import { useAppContext } from "@contexts/AppContext";
+import { SnippetType } from "@types";
+import { slugify } from "@utils/slugify";
 
 import { useFetch } from "./useFetch";
 

src/hooks/useKeyboardNavigation.ts

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-import { LanguageType } from "types";
+import { LanguageType } from "@types";
 
 interface UseKeyboardNavigationProps {
   items: LanguageType[];

src/hooks/useLanguages.ts

@@ -1,4 +1,4 @@
-import { LanguageType } from "types";
+import { LanguageType } from "@types";
 
 import { useFetch } from "./useFetch";
 

src/hooks/useSnippets.ts

@@ -1,6 +1,6 @@
-import { useAppContext } from "contexts/AppContext";
-import { SnippetType } from "types";
-import { slugify } from "utils/slugify";
+import { useAppContext } from "@contexts/AppContext";
+import { SnippetType } from "@types";
+import { slugify } from "@utils/slugify";
 
 import { useFetch } from "./useFetch";
 

src/layouts/Header.tsx

@@ -1,8 +1,8 @@
-import { GitHubIcon } from "components/Icons";
-import LinkButton from "components/LinkButton";
-import Logo from "components/Logo";
-import SearchInput from "components/SearchInput";
-import ThemeToggle from "components/ThemeToggle";
+import { GitHubIcon } from "@components/Icons";
+import LinkButton from "@components/LinkButton";
+import Logo from "@components/Logo";
+import SearchInput from "@components/SearchInput";
+import ThemeToggle from "@components/ThemeToggle";
 
 const Header = () => {
   return (

src/layouts/Sidebar.tsx

@@ -1,5 +1,5 @@
-import CategoryList from "components/CategoryList";
-import LanguageSelector from "components/LanguageSelector";
+import CategoryList from "@components/CategoryList";
+import LanguageSelector from "@components/LanguageSelector";
 
 const Sidebar = () => {
   return (

src/main.tsx

@@ -1,10 +1,11 @@
-import "styles/main.css";
+import "@styles/main.css";
 
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 
-import App from "App";
-import { AppProvider } from "contexts/AppContext";
+import { AppProvider } from "@contexts/AppContext";
+
+import App from "./App";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>

tsconfig.app.json

@@ -5,7 +5,10 @@
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
-    "baseUrl": "./src",
+    "baseUrl": "./",
+    "paths": {
+      "@*": ["src/*"]
+    },
 
     /* Bundler mode */
     "moduleResolution": "bundler",