fix: eslint and prettier configuration (#17)

Author: lamngockhuong

docs/.prettierrc.mjs

@@ -0,0 +1,5 @@
+export default {
+  singleQuote: true,
+  trailingComma: 'all',
+  plugins: ['prettier-plugin-organize-imports'],
+};

docs/eslint.config.mjs

@@ -1,8 +1,8 @@
 import eslint from '@eslint/js';
 import prettierRecommended from 'eslint-plugin-prettier/recommended';
-import next from "@next/eslint-plugin-next";
-import { fixupConfigRules } from "@eslint/compat";
-import tsEslint from "typescript-eslint";
+import next from '@next/eslint-plugin-next';
+import { fixupConfigRules } from '@eslint/compat';
+import tsEslint from 'typescript-eslint';
 import { FlatCompat } from '@eslint/eslintrc';
 import path from 'path';
 import { fileURLToPath } from 'url';
@@ -12,7 +12,7 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 const compat = new FlatCompat({
-  baseDirectory: __dirname, // optional; default: process.cwd()
+  baseDirectory: __dirname,
 });
 
 const tsConfig = (
@@ -21,7 +21,7 @@ const tsConfig = (
 
 const nextConfig = (
   fixupConfigRules(
-    (compat.config(next.configs["core-web-vitals"])),
+    (compat.config(next.configs['core-web-vitals'])),
   )
 );
 
@@ -32,16 +32,18 @@ export default [
     prettierRecommended,
     {
       ignores: [
-        ".*.?(c|m)js",
-        "*.setup*.?(c|m)js",
-        "*.config*.?(c|m)js",
-        "*.d.ts",
-        ".turbo/",
-        ".git/",
-        "build/",
-        "dist/",
-        "coverage/",
-        "node_modules/",
+        '.*.?(c|m)js',
+        '*.setup*.?(c|m)js',
+        '*.config*.?(c|m)js',
+        '*.d.ts',
+        '.turbo/',
+        '.git/',
+        'build/',
+        'dist/',
+        'coverage/',
+        'node_modules/',
+        '.next/',
+        'public/',
       ],
     },
   ),
@@ -53,11 +55,41 @@ export default [
         React: true,
         JSX: true,
       },
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
     },
     rules: {
-      "@typescript-eslint/array-type": "off",
-      "@typescript-eslint/consistent-type-definitions": "off",
-      "@typescript-eslint/no-empty-function": "off",
+      // TypeScript specific rules
+      '@typescript-eslint/array-type': 'off',
+      '@typescript-eslint/consistent-type-definitions': 'off',
+      '@typescript-eslint/no-empty-function': 'off',
+      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/explicit-function-return-type': 'off',
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+
+      // React specific rules
+      'react/react-in-jsx-scope': 'off',
+      'react/prop-types': 'off',
+      'react/display-name': 'off',
+
+      // Next.js specific rules
+      '@next/next/no-html-link-for-pages': 'error',
+      '@next/next/no-img-element': 'warn',
+      '@next/next/no-unwanted-polyfillio': 'error',
+
+      // General rules
+      'no-console': ['warn', { allow: ['warn', 'error'] }],
+      'no-debugger': 'warn',
+      'no-duplicate-imports': 'error',
+      'no-unused-expressions': 'error',
+      'prefer-const': 'warn',
+      'no-var': 'error',
     },
   },
 ];

docs/mdx-components.ts

@@ -1,4 +1,4 @@
-import { useMDXComponents as getDocsMDXComponents } from "nextra-theme-docs";
+import { useMDXComponents as getDocsMDXComponents } from 'nextra-theme-docs';
 
 const docsComponents = getDocsMDXComponents();
 

docs/package.json

@@ -7,6 +7,7 @@
     "build": "next build",
     "start": "next start",
     "postbuild": "pagefind --site .next/server/app --output-path out/_pagefind",
+    "format": "prettier --write \"*.{ts,tsx,js,jsx}\"",
     "lint": "eslint \"*.{ts,tsx,js,jsx}\" --fix"
   },
   "dependencies": {
@@ -32,6 +33,7 @@
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-prettier": "^5.4.1",
     "pagefind": "^1.3.0",
+    "prettier-plugin-organize-imports": "^4.1.0",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.34.0"
   },

docs/pnpm-lock.yaml

@@ -1,16 +1,16 @@
-import type { Config } from "tailwindcss";
+import type { Config } from 'tailwindcss';
 
 export default {
   content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
     extend: {
       colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
+        background: 'var(--background)',
+        foreground: 'var(--foreground)',
       },
     },
   },