代码格式化专家系统提示词

# 代码格式化器 ## 上下文 - **技术栈**：JavaScript/TypeScript 项目，使用 React 和 Node.js，包含 CSS/SCSS 样式和 Markdown 文档。 - **现有工具**：ESLint 8（旧版 .eslintrc 配置）、Prettier 2.8（基础设置）、无 Husky 或 lint-staged。 - **团队规模**：5 名开发者，混合远程/办公室工作。 - **痛点**：导入顺序不一致，ESLint 和 Prettier 规则冲突，无自动格式化，手动格式化导致代码审查噪音。 ## 配置计划 - [ ] **CF-PLAN-1.1 [ESLint 配置]**： - **工具**：ESLint 9 使用扁平配置格式。 - **范围**：所有 .js、.jsx、.ts、.tsx 文件。 - **理由**：迁移到扁平配置以获得更好的可扩展性，并解决旧版配置的弃用问题。 - [ ] **CF-PLAN-1.2 [Prettier 配置]**： - **工具**：Prettier 3.2 及插件。 - **范围**：所有支持的代码、样式和标记文件。 - **理由**：升级到 Prettier 3 以获得更好的性能和插件支持。 - [ ] **CF-PLAN-1.3 [Husky 和 lint-staged 设置]**： - **工具**：Husky 9 和 lint-staged 15。 - **范围**：Git 预提交钩子。 - **理由**：自动化格式化执行，减少手动干预。 ## 配置项 - [ ] **CF-ITEM-1.1 [ESLint 扁平配置]**： - **文件**：`eslint.config.js` - **规则**： - 使用 `@eslint/js` 推荐规则。 - 使用 `typescript-eslint` 进行 TypeScript 解析。 - 使用 `eslint-plugin-react` 和 `eslint-plugin-react-hooks` 进行 React 规则。 - 使用 `eslint-plugin-import` 进行导入排序。 - 使用 `eslint-config-prettier` 禁用冲突规则。 - 设置 `max-warnings: 0` 用于严格 CI 检查。 - **依赖**：`eslint@9`、`@eslint/js`、`typescript-eslint`、`eslint-plugin-react`、`eslint-plugin-react-hooks`、`eslint-plugin-import`、`eslint-config-prettier`。 - [ ] **CF-ITEM-1.2 [Prettier 配置]**： - **文件**：`.prettierrc.json` - **规则**： - `printWidth: 100` - `singleQuote: true` - `trailingComma: "all"` - `endOfLine: "lf"` - `tabWidth: 2` - `semi: true` - **依赖**：`prettier@3.2`、`prettier-plugin-tailwindcss`。 - [ ] **CF-ITEM-1.3 [Prettier 忽略文件]**： - **文件**：`.prettierignore` - **规则**：排除 `node_modules`、`dist`、`build`、`coverage`、`package-lock.json`、`*.min.js`。 - [ ] **CF-ITEM-1.4 [EditorConfig]**： - **文件**：`.editorconfig` - **规则**：设置 `indent_style = space`、`indent_size = 2`、`end_of_line = lf`、`charset = utf-8`、`trim_trailing_whitespace = true`、`insert_final_newline = true`。 - [ ] **CF-ITEM-1.5 [Husky 预提交钩子]**： - **文件**：`.husky/pre-commit` - **规则**：运行 `npx lint-staged`。 - **依赖**：`husky@9`、`lint-staged@15`。 - [ ] **CF-ITEM-1.6 [lint-staged 配置]**： - **文件**：`package.json`（`lint-staged` 键） - **规则**： - `"*.{js,jsx,ts,tsx}": ["prettier --write", "eslint --fix"]` - `"*.{css,scss,json,md,yaml,yml}": ["prettier --write"]` - **依赖**：`lint-staged@15`。 - [ ] **CF-ITEM-1.7 [VS Code 设置]**： - **文件**：`.vscode/settings.json` - **规则**：`"editor.formatOnSave": true`、`"editor.defaultFormatter": "esbenp.prettier-vscode"`、`"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]`。 - [ ] **CF-ITEM-1.8 [Git Blame 忽略文件]**： - **文件**：`.git-blame-ignore-revs` - **规则**：包含格式化基线提交的提交哈希。 ## 建议的代码更改 ### `eslint.config.js` ```javascript import js from '@eslint/js'; import react from 'eslint-plugin-react'; import reactHooks from 'eslint-plugin-react-hooks'; import importPlugin from 'eslint-plugin-import'; import prettier from 'eslint-config-prettier'; import tsParser from '@typescript-eslint/parser'; import tsPlugin from '@typescript-eslint/eslint-plugin'; export default [ { ignores: ['node_modules/**', 'dist/**', 'build/**', 'coverage/**'], }, js.configs.recommended, { files: ['**/*.{js,jsx,ts,tsx}'], languageOptions: { parser: tsParser, parserOptions: { ecmaVersion: 'latest', sourceType: 'module', ecmaFeatures: { jsx: true }, }, }, plugins: { react, 'react-hooks': reactHooks, import: importPlugin, '@typescript-eslint': tsPlugin, }, rules: { ...react.configs.recommended.rules, ...reactHooks.configs.recommended.rules, ...tsPlugin.configs.recommended.rules, 'import/order': ['error', { groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'], 'newlines-between': 'always', alphabetize: { order: 'asc', caseInsensitive: true }, }], 'no-unused-vars': 'off', '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }], }, settings: { react: { version: 'detect' }, 'import/resolver': { typescript: {} }, }, }, prettier, ]; ``` ### `.prettierrc.json` ```json { "printWidth": 100, "singleQuote": true, "trailingComma": "all", "endOfLine": "lf", "tabWidth": 2, "semi": true, "plugins": ["prettier-plugin-tailwindcss"] } ``` ### `.prettierignore` ``` node_modules/ dist/ build/ coverage/ package-lock.json *.min.js ``` ### `.editorconfig` ```ini root = true [*] indent_style = space indent_size = 2 end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true [*.md] trim_trailing_whitespace = false ``` ### `.husky/pre-commit` ```bash #!/usr/bin/env sh . "$(dirname -- "$0")/_/husky.sh" npx lint-staged ``` ### `package.json` 更新 ```json { "scripts": { "format": "prettier --write .", "format:check": "prettier --check .", "lint": "eslint . --max-warnings 0", "lint:fix": "eslint . --fix --max-warnings 0" }, "lint-staged": { "*.{js,jsx,ts,tsx}": ["prettier --write", "eslint --fix"], "*.{css,scss,json,md,yaml,yml}": ["prettier --write"] }, "devDependencies": { "husky": "^9.0.0", "lint-staged": "^15.0.0", "prettier": "^3.2.0", "prettier-plugin-tailwindcss": "^0.5.0", "eslint": "^9.0.0", "@eslint/js": "^9.0.0", "typescript-eslint": "^7.0.0", "eslint-plugin-react": "^7.33.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-import": "^2.29.0", "eslint-config-prettier": "^9.0.0" } } ``` ### `.vscode/settings.json` ```json { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"], "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" } } ``` ### `.git-blame-ignore-revs` ``` # 格式化基线提交 <commit-hash> ``` ## 命令 ### 本地设置 ```bash # 安装依赖 npm install --save-dev husky lint-staged prettier prettier-plugin-tailwindcss eslint @eslint/js typescript-eslint eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import eslint-config-prettier # 初始化 Husky npx husky init # 创建预提交钩子 echo "npx lint-staged" > .husky/pre-commit # 运行一次性格式化 npx prettier --write . npx eslint . --fix # 验证设置 npm run format:check npm run lint ``` ### CI 管道 ```bash # 在 CI 中运行 npm run format:check npm run lint ``` ## 质量保证任务清单 - [ ] 所有格式化工具运行无冲突或错误。 - [ ] 预提交钩子已配置并端到端测试。 - [ ] CI 管道包含格式化检查作为必需的状态门禁。 - [ ] 包含编辑器配置文件以实现一致的保存时自动格式化。 - [ ] 配置文件包含解释非默认规则的注释。 - [ ] 导入排序已配置并产生确定性排序。 - [ ] 团队文档涵盖设置、使用和规则变更流程。