Back to Details

dx-optimizer

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Developer Experience

开发者体验

Optimize tooling and workflows for productivity.
优化工具链与工作流以提升生产力。

When to use

适用场景

  • New project setup
  • Onboarding improvements
  • Build time optimization
  • Workflow automation
  • Tooling configuration
  • 新项目搭建
  • 入职流程优化
  • 构建时间优化
  • 工作流自动化
  • 工具配置

Quick wins

快速优化方案

Package.json scripts

Package.json 脚本

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"
  }
}
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)

Git钩子（husky + lint-staged）

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

.husky/pre-commit

.husky/pre-commit

npm run lint-staged
npm run lint-staged

.husky/commit-msg

.husky/commit-msg

npx commitlint --edit $1
undefined
npx commitlint --edit $1
undefined

VS Code settings

VS Code 配置

json
// .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"
  }
}
json
// .vscode/extensions.json
{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "bradlc.vscode-tailwindcss",
    "ms-vscode.vscode-typescript-next"
  ]
}
json
// .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"
  }
}
json
// .vscode/extensions.json
{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "bradlc.vscode-tailwindcss",
    "ms-vscode.vscode-typescript-next"
  ]
}

Makefile

Makefile

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."
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."

Environment setup

环境配置

bash
undefined
bash
undefined

.env.example (template)

.env.example (template)

DATABASE_URL=postgresql://localhost:5432/myapp REDIS_URL=redis://localhost:6379 API_KEY=your-api-key-here
DATABASE_URL=postgresql://localhost:5432/myapp REDIS_URL=redis://localhost:6379 API_KEY=your-api-key-here

Check for required env vars

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 }
undefined
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 }
undefined

Success metrics

成功指标

  • Clone to running: <5 minutes
  • Build time: <30 seconds
  • Test suite: <60 seconds
  • Hot reload: <500ms
  • 从克隆到运行：<5分钟
  • 构建时间：<30秒
  • 测试套件：<60秒
  • 热重载：<500ms

Checklist

检查清单

  • One-command setup (
    make setup
    )
  • Automatic formatting on save
  • Pre-commit hooks for quality
  • Clear error messages
  • Up-to-date README
  • 一键式搭建（
    make setup
    ）
  • 保存时自动格式化
  • 用于质量管控的提交前钩子
  • 清晰的错误提示
  • 最新的README

Examples

示例

Input: "Speed up our dev workflow" Action: Add parallel tasks, caching, incremental builds
Input: "New developer can't set up project" Action: Simplify setup, add better docs, create setup script
输入： "加快我们的开发工作流" 动作： 添加并行任务、缓存、增量构建
输入： "新开发者无法搭建项目" 动作： 简化搭建流程、添加更完善的文档、创建搭建脚本