Add linting, formatting, and type checking via CI and pre-commit hooks (#4)

This PR adds a bunch of improvements to help keep the codebase clean and consistent.

Author: steadyfall

.eslintrc.json

@@ -1,6 +1,41 @@
 {
   "extends": [
     "next/core-web-vitals",
-    "next/typescript"
-  ]
+    "next/typescript",
+    "plugin:prettier/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:import/typescript"
+  ],
+  "plugins": ["prettier", "import"],
+  "rules": {
+    // Code quality
+    "no-console": "warn",
+    "no-debugger": "error",
+    "no-unused-vars": "off", // Handled by TS version above
+
+    // Import sorting and cleanliness
+    "import/order": [
+      "error",
+      {
+        "groups": [
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index",
+          "object",
+          "type"
+        ],
+        "newlines-between": "always",
+        "alphabetize": { "order": "asc", "caseInsensitive": true }
+      }
+    ],
+    "import/newline-after-import": "error",
+    "import/no-duplicates": "error",
+
+    // Prettier takes over formatting rules now
+    "prettier/prettier": "error"
+  }
 }

.github/workflows/lint-and-check.yml

@@ -0,0 +1,83 @@
+name: Lint and Type-checking
+
+on:
+  push:
+    branches:
+      - main
+      - dev
+  pull_request:
+    branches:
+      - main
+      - dev
+
+jobs:
+  lint:
+    name: ESLint & Prettier 
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Get list of changed files
+        id: files
+        run: |
+          echo "CHANGED_FILES=$(git diff --name-only --diff-filter=ACMRT origin/${{ github.base_ref || github.ref_name }} | tr '\n' ' ')" >> $GITHUB_ENV
+
+      - name: Lint JS/TS files with ESLint (no auto-fix)
+        if: ${{ env.CHANGED_FILES != ''}}
+        run: |
+          FILES=$(echo "$CHANGED_FILES" | tr ' ' '\n' | grep -E '\.(js|jsx|ts|tsx)$' | xargs)
+          if [ -n "$FILES" ]; then
+            echo "Running ESLint on:"
+            echo "$FILES"
+            npx next lint --file $FILES
+          else
+            echo "No JS/TS files to lint."
+          fi
+
+      - name: Format other files with Prettier
+        if: ${{ env.CHANGED_FILES != ''}}
+        run: |
+          FILES=$(echo "$CHANGED_FILES" | tr ' ' '\n' | grep -E '\.(json|md|css|scss|html)$' | xargs)
+          if [ -n "$FILES" ]; then
+            echo "Running Prettier on:"
+            echo "$FILES"
+            npx prettier --check $FILES
+          else
+            echo "No files to format with Prettier."
+          fi
+      
+      - name: Type Check
+        run: |
+          echo "Running TypeScript type checking..."
+          npx tsc --noEmit
+  
+  type-check:
+    name: Type Checking 
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Type Check
+        run: |
+          echo "Running TypeScript type checking..."
+          npx tsc --noEmit

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

.lintstagedrc.js

@@ -0,0 +1,11 @@
+const path = require('path');
+
+const buildEslintCommand = (filenames) =>
+  `next lint --fix --file ${filenames
+    .map((f) => path.relative(process.cwd(), f))
+    .join(' --file ')}`;
+
+module.exports = {
+  '*.{js,jsx,ts,tsx}': [buildEslintCommand, 'prettier --write'],
+  '*.{json,md,css,scss,html}': ['prettier --write'],
+};

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "arrowParens": "always",
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

README.md

@@ -1,26 +1,31 @@
 # steadyfall.github.io
 
 ## color-palette
+
 main:
+
 - `text-pink-500`
 - `text-thunderbird-600`
 - `text-azure-radiance-600`
 - `text-neon-green-500 dark:text-neon-green-400`
 
 across_colors:
+
 - `text-midnight-blue-500`
 - `text-pink-500`
 - `text-orange-500`
 - `text-blue-violet-500`
 
 highlighter:
+
 - cyan: `bg-cyan-300 dark:bg-cyan-500/30`
 - pink/violet-web: `bg-[#ff77e4]`
 - slate-blue: `bg-[#7777ff]`
 - red: `bg-[#ff7777]`
 - yellow/lemon/laser-lemon: `bg-[#ffff77]`
 
 ## to-do:
+
 - [x] check out about highlighting words
 - [ ] YAML file parser for experience, projects
 - [x] skills, education section

next.config.mjs

@@ -1,5 +1,9 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+};
 
 export default nextConfig;