feat: 模板配置

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_size = 2
+max_line_length = 100
+insert_final_newline = true
+trim_trailing_whitespace = true
+charset = utf-8
+indent_style = space

.prettierignore

@@ -0,0 +1,5 @@
+dist/
+*.log
+.env*
+.vscode/
+.idea/

.prettierrc.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc.json",
+  "tabWidth": 2,
+  "printWidth": 100,
+  "semi": true,
+  "useTabs": false,
+  "singleQuote": false,
+  "bracketSpacing": false,
+  "endOfLine": "auto",
+  "arrowParens": "always",
+  "trailingComma": "all"
+}

eslint.config.js

@@ -1,23 +1,139 @@
-import js from '@eslint/js'
+import {defineConfig, globalIgnores} from 'eslint/config'
+import {fixupConfigRules, fixupPluginRules} from '@eslint/compat'
+import react from 'eslint-plugin-react'
+import unusedImports from 'eslint-plugin-unused-imports'
+import _import from 'eslint-plugin-import'
+import typescriptEslint from '@typescript-eslint/eslint-plugin'
+import jsxA11Y from 'eslint-plugin-jsx-a11y'
+import prettier from 'eslint-plugin-prettier'
 import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
+import tsParser from '@typescript-eslint/parser'
-import reactRefresh from 'eslint-plugin-react-refresh'
+import path from 'node:path'
-import tseslint from 'typescript-eslint'
+import {fileURLToPath} from 'node:url'
-import { globalIgnores } from 'eslint/config'
+import js from '@eslint/js'
+import {FlatCompat} from '@eslint/eslintrc'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all
+})
+
+export default defineConfig([globalIgnores([
+  '**/*.css',
+  '**/.changeset',
+  '**/dist',
+  'esm/*',
+  'public/*',
+  'tests/*',
+  'scripts/*',
+  '**/*.config.js',
+  '**/.DS_Store',
+  '**/node_modules',
+  '**/coverage'
+]), {
+  extends: fixupConfigRules(compat.extends(
+    'plugin:react/recommended',
+    'plugin:prettier/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:jsx-a11y/recommended'
+  )),
+
+  plugins: {
+    react: fixupPluginRules(react),
+    'unused-imports': unusedImports,
+    import: fixupPluginRules(_import),
+    '@typescript-eslint': typescriptEslint,
+    'jsx-a11y': fixupPluginRules(jsxA11Y),
+    prettier: fixupPluginRules(prettier)
+  },
 
-export default tseslint.config([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs['recommended-latest'],
-      reactRefresh.configs.vite,
-    ],
   languageOptions: {
-      ecmaVersion: 2020,
+    globals: {
-      globals: globals.browser,
+      ...Object.fromEntries(Object.entries(globals.browser).map(([key]) => [key, 'off'])),
+      ...globals.node
     },
+
+    parser: tsParser,
+    ecmaVersion: 12,
+    sourceType: 'module',
+
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true
+      }
+    }
   },
-])
+
+  settings: {
+    react: {
+      version: 'detect'
+    }
+  },
+
+  files: [
+    '**/*.{ts,tsx,js,jsx}'
+  ],
+
+  rules: {
+    'no-console': 'warn',
+    'react/prop-types': 'off',
+    'react/jsx-uses-react': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'react-hooks/exhaustive-deps': 'off',
+    'jsx-a11y/click-events-have-key-events': 'warn',
+    'jsx-a11y/interactive-supports-focus': 'warn',
+    'prettier/prettier': 'warn',
+    'no-unused-vars': 'off',
+    'unused-imports/no-unused-vars': 'off',
+    'unused-imports/no-unused-imports': 'warn',
+
+    '@typescript-eslint/no-unused-vars': ['warn', {
+      args: 'after-used',
+      ignoreRestSiblings: false,
+      argsIgnorePattern: '^_.*?$'
+    }],
+
+    'import/order': ['error', {
+      'groups': [['external', 'builtin'], 'internal', 'parent', 'sibling', 'index'],
+
+      alphabetize: {
+        order: 'asc',
+        caseInsensitive: true
+      },
+
+      'newlines-between': 'always'
+    }],
+
+    'react/self-closing-comp': 'warn',
+
+    'react/jsx-sort-props': ['warn', {
+      callbacksLast: true,
+      shorthandFirst: true,
+      noSortAlphabetically: false,
+      reservedFirst: true
+    }],
+
+    'padding-line-between-statements': ['warn', {
+      blankLine: 'always',
+      prev: '*',
+      next: 'return'
+    }, {
+      blankLine: 'always',
+      prev: ['const', 'let', 'var'],
+      next: '*'
+    }, {
+      blankLine: 'any',
+      prev: ['const', 'let', 'var'],
+      next: ['const', 'let', 'var']
+    }],
+
+    'import/consistent-type-specifier-style': ['error', 'prefer-top-level'],
+
+    '@typescript-eslint/consistent-type-imports': ['error', {
+      fixStyle: 'inline-type-imports'
+    }]
+  }
+}])

package.json

@@ -7,25 +7,45 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "lint": "eslint .",
+    "lint": "npm run eslint && npm run stylelint",
     "preview": "vite preview",
-    "preinstall": "npx only-allow pnpm"
+    "preinstall": "npx only-allow pnpm",
+    "eslint": "eslint . --cache",
+    "stylelint": "stylelint '**/*.css' --cache",
+    "prettier": "prettier --check \"**/*.{ts,tsx}\"",
+    "prettier:write": "prettier --write \"**/*.{ts,tsx}\""
   },
   "dependencies": {
     "react": "^19.1.1",
     "react-dom": "^19.1.1"
   },
   "devDependencies": {
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.33.0",
+    "@types/node": "^24.5.1",
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
+    "@typescript-eslint/eslint-plugin": "^8.44.0",
+    "@typescript-eslint/parser": "^8.44.0",
     "@vitejs/plugin-react-swc": "^4.0.0",
     "eslint": "^9.33.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
+    "eslint-plugin-unused-imports": "^4.2.0",
     "globals": "^16.3.0",
+    "prettier": "^3.6.2",
+    "prettier-eslint": "^16.4.2",
+    "prettier-eslint-cli": "^8.0.1",
+    "stylelint": "^16.24.0",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.39.1",
-    "vite": "^7.1.2"
+    "vite": "^7.1.2",
+    "vite-tsconfig-paths": "^5.1.4"
   }
 }

pnpm-workspace.yaml

@@ -0,0 +1,5 @@
+ignoredBuiltDependencies:
+  - esbuild
+
+onlyBuiltDependencies:
+  - '@swc/core'

src/App.css

@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

src/App.tsx

@@ -1,35 +0,0 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
-
-function App() {
-  const [count, setCount] = useState(0)
-
-  return (
-    <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
-}
-
-export default App

src/index.css

@@ -1,68 +0,0 @@
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

src/main.tsx

@@ -1,10 +1,13 @@
-import { StrictMode } from 'react'
+import {StrictMode} from "react";
-import { createRoot } from 'react-dom/client'
+import {createRoot} from "react-dom/client";
-import './index.css'
+import "./index.js";
-import App from './App.tsx'
+import "./index.css";
+import "./aaa.css";
 
-createRoot(document.getElementById('root')!).render(
+import App from "@/pages/app/index";
+
+createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />
   </StrictMode>,
-)
+);

src/pages/app/index.tsx

@@ -0,0 +1,4 @@
+export default function App() {
+
+  return <div>app</div>
+}

tsconfig.app.json

@@ -1,5 +1,11 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    },
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "target": "ES2022",
     "useDefineForClassFields": true,

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "files": [],
   "references": [
-    { "path": "./tsconfig.app.json" },
+    {
-    { "path": "./tsconfig.node.json" }
+      "path": "./tsconfig.app.json"
-  ]
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ],
 }

tsconfig.node.json

@@ -2,17 +2,17 @@
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
     "target": "ES2023",
-    "lib": ["ES2023"],
+    "lib": [
+      "ES2023"
+    ],
     "module": "ESNext",
     "skipLibCheck": true,
-
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "verbatimModuleSyntax": true,
     "moduleDetection": "force",
     "noEmit": true,
-
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
@@ -21,5 +21,7 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["vite.config.ts"]
+  "include": [
+    "vite.config.ts"
+  ]
 }

vite.config.ts

@@ -1,7 +1,8 @@
-import { defineConfig } from 'vite'
+import {defineConfig} from 'vite'
 import react from '@vitejs/plugin-react-swc'
+import tsconfigPaths from "vite-tsconfig-paths";
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tsconfigPaths()],
 })