build(lint): Update eslint and prettier settings (#23)

alphatrl · web-flow · commit 7c2396daa751 · 2026-01-30T02:28:54.000+08:00
* build(deps): Bump eslint and prettier

* build(eslint): Move to eslint.config.mjs

* build(prettier): update prettier

* chore(vs-code): Add settings.json

* refactor: run eslint
diff --git a/.eslintrc b/.eslintrc
diff --git a/.prettierrc b/.prettierrc
@@ -1,6 +1,6 @@
 {
   "semi": true,
-  "trailingComma": "es5",
+  "trailingComma": "all",
   "singleQuote": true,
-  "tabWidth": 2
+  "tabWidth": 2,
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,12 @@
+{
+  "editor.formatOnSave": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ]
+}
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -0,0 +1,53 @@
+import js from '@eslint/js';
+import { defineConfig } from 'eslint/config';
+import prettierConfig from 'eslint-config-prettier';
+import prettierPlugin from 'eslint-plugin-prettier';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import simpleImportSortPlugin from 'eslint-plugin-simple-import-sort';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+export default defineConfig([
+  {
+    ignores: ['dist'],
+  },
+  {
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      prettierConfig,
+    ],
+    files: ['**/*.{ts,tsx,js,jsx,mjs,cjs}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+      prettier: prettierPlugin,
+      'simple-import-sort': simpleImportSortPlugin,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        {
+          allowConstantExport: true,
+        },
+      ],
+      'react/react-in-jsx-scope': 'off',
+      'simple-import-sort/imports': 'warn',
+      'simple-import-sort/exports': 'warn',
+      'prettier/prettier': 'error',
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+  },
+]);
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "lint": "eslint --ext .js,.jsx,.ts,.tsx src"
+    "lint": "eslint ."
   },
   "dependencies": {
     "lodash": "^4.17.21",
@@ -16,21 +16,25 @@
     "styled-components": "^5.3.3"
   },
   "devDependencies": {
+    "@eslint/js": "^9.39.2",
     "@types/node": "^16.4.13",
     "@types/react": "^17.0.16",
     "@types/react-dom": "^17.0.9",
     "@types/styled-components": "^5.1.12",
-    "@typescript-eslint/eslint-plugin": "^4.29.0",
-    "@typescript-eslint/parser": "^4.20.0",
     "@vitejs/plugin-react": "^5.1.2",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-simple-import-sort": "^7.0.0",
-    "prettier": "^2.5.1",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.26",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "globals": "^17.2.0",
+    "prettier": "^3.8.1",
     "ts-node": "^10.4.0",
-    "typescript": "4.5.4",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.54.0",
     "vite": "^7.3.1",
     "vite-plugin-svgr": "^4.5.0"
   },
diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, lazy, Suspense } from 'react';
+import React, { lazy, Suspense, useCallback } from 'react';
 
 const Email = lazy(() => import('./components/Email'));
 const Github = lazy(() => import('./components/Github'));
@@ -32,11 +32,7 @@ const Icon: React.FC<Props> = (props) => {
     }
   }, [height, name, width]);
 
-  return (
-    <Suspense fallback={null}>
-      {getIcon()}
-    </Suspense>
-  );
+  return <Suspense fallback={null}>{getIcon()}</Suspense>;
 };
 
 export default Icon;
diff --git a/src/components/SEO.tsx b/src/components/SEO.tsx
@@ -31,16 +31,10 @@ const SEO: React.FC<Props> = function (props) {
       <meta name="og:title" content={`${title} | ${siteMetadata.title}`} />
       <meta name="og:description" content={metaDescription} />
       <meta name="og:type" content="website" />
-      <meta
-        name="og:image"
-        content={logoUrl}
-      />
+      <meta name="og:image" content={logoUrl} />
       <meta name="og:url" content={siteMetadata.siteUrl} />
       <meta name="twitter:card" content={metaDescription} />
-      <meta
-        name="twitter:image"
-        content={logoUrl}
-      />
+      <meta name="twitter:image" content={logoUrl} />
       <meta name="twitter:creator" content={siteMetadata.author} />
       <meta name="twitter:url" content={siteMetadata.siteUrl} />
       <meta name="twitter:title" content={`${title} | ${siteMetadata.title}`} />
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,14 +1,16 @@
+import './styles.css';
+
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { HelmetProvider } from 'react-helmet-async';
+
 import App from './App';
-import './styles.css';
 
 ReactDOM.render(
   <React.StrictMode>
     <HelmetProvider>
       <App />
     </HelmetProvider>
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById('root'),
 );
diff --git a/src/styles.css b/src/styles.css
@@ -3,9 +3,9 @@ body {
   color: #111111;
 
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-      sans-serif;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,5 +1,5 @@
-import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
 import svgr from 'vite-plugin-svgr';
 
 // https://vitejs.dev/config/
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"semi": true,`
`3`		`- "trailingComma": "es5",`
	`3`	`+ "trailingComma": "all",`
`4`	`4`	`"singleQuote": true,`
`5`		`- "tabWidth": 2`
	`5`	`+ "tabWidth": 2,`
`6`	`6`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<!DOCTYPE html>`
	`1`	`+<!doctype html>`
`2`	`2`	`<html lang="en">`
`3`	`3`	`<head>`
`4`	`4`	`<meta charset="UTF-8" />`