build: add lint (#1)

* build: add lint

* build: lint check

* build: add pnpm version

* chore: add nvmrc

* build: add lint check

* refactor: format

* chore: fix rules

.eslintrc.json

@@ -22,23 +22,24 @@
   },
   "plugins": ["react", "@typescript-eslint", "react-hooks"],
   "rules": {
-    "no-use-before-define": "off",
-    "@typescript-eslint/no-use-before-define": ["error"],
-    "react/jsx-filename-extension": ["warn", { "extensions": [".tsx"] }],
-    "import/extensions": ["error", "ignorePackages", { "ts": "never", "tsx": "never" }],
-    "no-shadow": "off",
-    "@typescript-eslint/no-shadow": ["error"],
-    "@typescript-eslint/explicit-function-return-type": ["error", { "allowExpressions": true }],
-    "max-len": ["warn", { "code": 100, "ignoreComments": true, "ignoreUrls": true }],
-    "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn",
-    "import/prefer-default-export": "off",
-    "react/prop-types": "off",
-    "prettier/prettier": ["error", { "endOfLine": "auto" }]
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-uses-react": "off",
+    "prettier/prettier": [
+      "error",
+      {
+        "endOfLine": "auto"
+      }
+    ]
   },
   "settings": {
+    "react": {
+      "version": "detect"
+    },
     "import/resolver": {
-      "typescript": {}
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"],
+        "moduleDirectory": ["node_modules", "src/"]
+      }
     }
   }
 }

.github/workflows/lint.yml

@@ -0,0 +1,32 @@
+name: Lint Pull Request
+
+on:
+  pull_request:
+    types: ["opened", "edited", "reopened", "synchronize"]
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - uses: pnpm/action-setup@v2
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+            node-version-file: '.nvmrc'
+            cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Lint
+        run: pnpm lint

.nvmrc

@@ -0,0 +1 @@
+lts/hydrogen

.prettierrc

@@ -1,8 +1,11 @@
 {
-  "semi": true,
+  "plugins": [
+    "prettier-plugin-organize-imports",
+    "prettier-plugin-tailwindcss"
+  ],
+  "trailingComma": "es5",
   "tabWidth": 2,
-  "printWidth": 100,
+  "semi": true,
   "singleQuote": false,
-  "trailingComma": "none",
-  "jsxBracketSameLine": true
+  "endOfLine": "auto"
 }

package.json

@@ -2,6 +2,7 @@
   "name": "johnjud-frontend",
   "private": true,
   "version": "0.0.0",
+  "packageManager": "[email protected]",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -12,6 +13,8 @@
     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css,md}\" --config ./.prettierrc.json"
   },
   "dependencies": {
+    "prettier-plugin-organize-imports": "^3.2.4",
+    "prettier-plugin-tailwindcss": "^0.5.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

src/App.tsx

@@ -1,13 +1,16 @@
-import { StrictMode, Suspense } from 'react';
-import { RouterProvider } from 'react-router-dom';
-import { router } from './routes';
+import { StrictMode, Suspense } from "react";
+import { RouterProvider } from "react-router-dom";
+import { router } from "./routes";
 
 function AppRoot() {
   return (
     <Suspense
       fallback={
-        <div className="min-h-screen flex flex-col justify-center items-center">Loading...</div>
-      }>
+        <div className="flex min-h-screen flex-col items-center justify-center">
+          Loading...
+        </div>
+      }
+    >
       <RouterProvider router={router} />
     </Suspense>
   );

src/app/404.tsx

@@ -1,4 +1,4 @@
-import MainLayout from '../layouts/MainLayout';
+import MainLayout from "../layouts/MainLayout";
 
 // Page
 const NotFound = () => {

src/app/example/[id]/page.tsx

@@ -1,13 +1,13 @@
-import { usePageParams } from '../../../hooks/usePageParams';
-import MainLayout from '../../../layouts/MainLayout';
+import { usePageParams } from "../../../hooks/usePageParams";
+import MainLayout from "../../../layouts/MainLayout";
 
 // Page
 const ExampleParamPage = () => {
-  const param = usePageParams(['id']);
+  const param = usePageParams(["id"]);
 
   return (
-    <div className="min-h-screen flex flex-col justify-center items-center">
-      <h2 className="font-bold text-2xl">ExampleParamPage</h2>
+    <div className="flex min-h-screen flex-col items-center justify-center">
+      <h2 className="text-2xl font-bold">ExampleParamPage</h2>
       <div>{param.id}</div>
     </div>
   );

src/app/page.tsx

@@ -4,7 +4,7 @@ import MainLayout from "../layouts/MainLayout";
 const Home = () => {
   return (
     <>
-      <div className="font-bold text-2xl">JohnJud Project</div>
+      <div className="text-2xl font-bold">JohnJud Project</div>
       <div>Welcome, Developers!</div>
     </>
   );

src/hooks/usePageParams.ts

@@ -1,14 +1,16 @@
-import { useMemo } from 'react';
-import { useParams } from 'react-router-dom';
+import { useMemo } from "react";
+import { useParams } from "react-router-dom";
 
-export function usePageParams<T extends string>(params: T[]): Record<T, string> {
+export function usePageParams<T extends string>(
+  params: T[]
+): Record<T, string> {
   const allParams = useParams();
 
   const filteredParams = useMemo(
     () =>
       params.reduce<Record<string, string>>((acc, param) => {
         if (!allParams[param]) throw new Error(`Missing param ${param}`);
-        acc[param] = allParams[param] ?? '';
+        acc[param] = allParams[param] ?? "";
         return acc;
       }, {}),
     [params, allParams]

src/layouts/MainLayout.tsx

@@ -10,9 +10,10 @@ const MainLayout = ({ children }: MainLayoutProps) => {
   return (
     <div
       style={{
-        backgroundImage: `url(${background})`
+        backgroundImage: `url(${background})`,
       }}
-      className="min-h-screen flex flex-col bg-cover bg-center">
+      className="flex min-h-screen flex-col bg-cover bg-center"
+    >
       <Navbar />
       {children}
       <Footer />

src/main.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App.tsx';
-import './index.css';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>