mcpField
D
dx-optimizer

dx-optimizer

github.com/htlin222开发7837 次安装3 周前更新
代码仓库

关于 dx-optimizer

dx-optimizer 是一项开发体验技能，提供改进项目设置、工具和工作流的建议与示例。内容涵盖脚本、Git hooks、VS Code、Makefile 和环境变量检查配置。

主要功能

  1. 01项目脚本建议
  2. 02Git hooks 配置示例
  3. 03VS Code 设置与扩展示例
  4. 04Makefile 工作流示例
  5. 05环境变量检查

适用场景

  1. 01简化新项目设置
  2. 02改善开发者入门流程
  3. 03自动化质量检查与格式化
  4. 04审视构建和工具工作流

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/htlin222/dotfiles --skill dx-optimizer

安装后在 Claude Code 中输入/dx-optimizer确认已加载。

详细介绍

开发者体验

优化工具和工作流，提升效率。

适用场景

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

快速改进

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: ## Show this help
	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-15s\033[0m %s\n", $$1, $$2}'

dev: ## Start development server
	npm run dev

build: ## Build for production
	npm run build

test: ## Run tests
	npm run test

lint: ## Run linter
	npm run lint

clean: ## Clean build artifacts
	rm -rf .next node_modules/.cache

setup: ## Initial project setup
	npm install
	cp .env.example .env.local
	@echo "Setup complete! Run 'make dev' to start."

环境设置

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

# Check for required env vars
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 env vars: ${missing[*]}"
    exit 1
  fi
}

成功指标

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

检查清单

  • 一条命令完成设置（make setup）
  • 保存时自动格式化
  • 用于保证质量的提交前钩子
  • 清晰的错误消息
  • 保持 README 更新

示例

输入：“加快我们的开发工作流” **操作：**添加并行任务、缓存和增量构建

输入：“新开发者无法设置项目” **操作：**简化设置、完善文档并创建设置脚本

评论

支持 Markdown