开发体验优化Skill dx-optimizer

---

name: dx-optimizer description: 改善开发人员体验、工具和工作流程。在设置项目或减少开发摩擦时使用。

开发人员体验

为生产力优化工具和工作流程。

何时使用

• 新项目设置
• 入职改进
• 构建时间优化
• 工作流自动化
• 工具配置

快速胜利

Package.json 脚本

{
  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "eslint . --fix",
    "format": "prettier --write .",
    "typecheck": "tsc --noEmit",
    "test": "vitest",
    "test:watch": "vitest --watch",
    "test:coverage": "vitest --coverage",
    "prepare": "husky",
    "validate": "npm run typecheck && npm run lint && npm run test"
  }
}

Git hooks (husky + lint-staged)

// package.json
{
  "lint-staged": {
    "*.{js,ts,tsx}": ["eslint --fix", "prettier --write"],
    "*.{json,md,yml}": ["prettier --write"]
  }
}

# .husky/pre-commit
npm run lint-staged

# .husky/commit-msg
npx commitlint --edit $1

VS Code 设置

// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "typescript.preferences.importModuleSpecifier": "relative",
  "files.associations": {
    "*.css": "tailwindcss"
  }
}

// .vscode/extensions.json
{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "bradlc.vscode-tailwindcss",
    "ms-vscode.vscode-typescript-next"
  ]
}

Makefile

.PHONY: help dev build test clean

help: ## 显示此帮助
	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-15s\033[0m %s
", $$1, $$2}'

dev: ## 启动开发服务器
	npm run dev

build: ## 生产构建
	npm run build

test: ## 运行测试
	npm run test

lint: ## 运行代码检查
	npm run lint

clean: ## 清理构建产物
	rm -rf .next node_modules/.cache

setup: ## 初始项目设置
	npm install
	cp .env.example .env.local
	@echo "设置完成！运行 'make dev' 启动。"

环境设置

# .env.example (模板)
DATABASE_URL=postgresql://localhost:5432/myapp
REDIS_URL=redis://localhost:6379
API_KEY=your-api-key-here

# 检查必需的环境变量
check_env() {
  local missing=()
  for var in DATABASE_URL API_KEY; do
    if [[ -z "${!var}" ]]; then
      missing+=("$var")
    fi
  done
  if [[ ${#missing[@]} -gt 0 ]]; then
    echo "缺少环境变量: ${missing[*]}"
    exit 1
  fi
}

成功指标

• 克隆到运行: <5 分钟
• 构建时间: <30 秒
• 测试套件: <60 秒
• 热重载: <500 毫秒

检查清单

• [ ] 一键设置 (make setup)
• [ ] 保存时自动格式化
• [ ] 预提交钩子用于质量保证
• [ ] 清晰的错误消息
• [ ] 最新的 README

示例

输入: “加速我们的开发工作流程” 动作: 添加并行任务、缓存、增量构建

输入: “新开发者无法设置项目” 动作: 简化设置、添加更好的文档、创建设置脚本