The Pragmatic Programmer là một trong những cuốn sách lập trình hay nhất mà tôi từng đọc. Tôi yêu thích nó vì không chỉ nói về việc viết mã, mà còn về việc trở thành một lập trình viên giỏi hơn. Cuốn sách là một viên ngọc quý, nếu bạn chưa đọc thì tôi cực kỳ khuyên bạn nên đọc thử.
Một trong vô số bài học tôi rút ra được là ý tưởng về việc có một “hộp công cụ” cá nhân chứa các script và tiện ích giúp bạn làm việc dễ dàng hơn.
Vì vậy, tôi nghĩ sẽ thật tuyệt nếu chia sẻ một danh sách nhỏ các script mà bất kỳ ai cũng có thể tận dụng. Dù bạn đang xây dựng giao diện người dùng, tạo API giả, hay chỉ đơn giản là dọn dẹp thư mục node_modules đã cũ kỹ.
Lưu ý: Những script dưới đây được viết cho dự án Next.js sử dụng yarn. Tuy nhiên, rất dễ để tùy biến cho phù hợp với dự án của bạn.
1. flush.sh: Xóa node_modules và Cài đặt lại
Tôi thường xuyên phải cập nhật dependency và phải xóa node_modules, .next, dist bằng tay. Script này giúp tôi làm điều đó nhanh gọn:
#!/bin/bash
echo "🧼 Burning it all down and starting fresh..."
# Remove any build artifacts, this one is for a Next.js build
rm -rf node_modules .next dist
# Remove the lock files too if you want to get spicy
rm -f yarn.lock package-lock.json
yarn install
Dùng khi dependency bị lỗi, build local bị hỏng, hoặc đơn giản là đã lâu chưa cập nhật gì cả.
2. generate-users.sh: Tạo dữ liệu JSON người dùng giả
Tuyệt vời khi cần dữ liệu mẫu để test. Script này sẽ tạo ra một file JSON chứa danh sách người dùng giả.
#!/bin/bash COUNT=${1:-10}
echo "Generating $COUNT dummy users..." cat > mock-users.json <<EOL
[
EOL for ((i=1; i<=COUNT; i++)); do echo " {" >> mock-users.json echo " \"id\": \"$i\"," >> mock-users.json echo " \"name\": \"User $i\"," >> mock-users.json echo " \"email\": \"user$i@example.com\"" >> mock-users.json if [ "$i" -lt "$COUNT" ]; then echo " }," >> mock-users.json else echo " }" >> mock-users.json fi
done echo "]" >> mock-users.json
echo "mock-users.json created!"
Phản hồi API giả lập. Điền vào chế độ xem danh sách. Điền vào thiết kế trạng thái trống. Tất cả chỉ trong vài giây.
3. mock-api-server.sh: Khởi chạy API REST giả
Đi cùng với script tạo người dùng bên trên. Script này giúp bạn dựng một API giả nhanh chóng để frontend có thể gọi đến.
#!/bin/bash
echo "Starting local mock API..."
npx json-server --watch mock-users.json --port 4000
Trỏ frontend đến http://localhost:4000/users và cứ thế tiếp tục phát triển ứng dụng.
4. lint-fix.sh: Dọn dẹp mã trước khi Commit
Trước đây tôi hay push rồi mới bị CI báo lỗi lint. Giờ tôi chạy script này trước:
#!/bin/bash
echo "Linting..."
yarn lint --fix echo "Formatting with Prettier..."
yarn format
Bạn có thể thêm vào pre-commit hooks hoặc đơn giản là chạy nó khi thấy áy náy về style code của mình.
5. dev-ready.sh: Kiểm tra TypeScript, Lint, và chạy Dev
Tương tự như script trên, nhưng có thêm bước kiểm tra TypeScript trước khi chạy server:
#!/bin/bash
echo "Running lint check..."
yarn lint echo "Checking types..."
yarn tsc --noEmit echo "Starting dev server..."
yarn dev
Giống như khởi động nhẹ cho repo của bạn, giúp mọi thứ ổn định trước khi bắt tay vào code.
6. copy-template.sh: Nhân bản thư mục Component
Đừng để Rails có hết niềm vui! Bạn cũng có thể dùng template. Script này sẽ sao chép một thư mục component mẫu và đổi tên file giúp bạn.
#!/bin/bash COMPONENT=$1 if [ -z "$COMPONENT" ]; then echo "Usage: ./copy-template.sh Button" exit 1
fi echo "Creating $COMPONENT from template..."
cp -r templates/component "components/$COMPONENT"
mv "components/$COMPONENT/Component.tsx" "components/$COMPONENT/$COMPONENT.tsx"
mv "components/$COMPONENT/Component.test.tsx" "components/$COMPONENT/$COMPONENT.test.tsx" sed -i '' "s/Component/$COMPONENT/g" components/$COMPONENT/*.tsx echo "$COMPONENT scaffolded!"
Rất tuyệt nếu bạn theo atomic design, pattern tái sử dụng, hoặc chỉ đơn giản là thích có cấu trúc từ đầu. Làm một lần, dùng mãi mãi.
7. create-next-template.sh: Tạo mẫu Next.js với Tailwind, ESLint và API Route
"Trùm cuối"! Tôi rất thích khởi động các dự án mới khi có ý tưởng. Script này giúp bạn có sẵn:
- Next.js
- Tailwind CSS
- ESLint
- Route API
... tất cả chỉ trong khoảng 30 giây.
#!/bin/bash read -p "Project name: " PROJECT_NAME
yarn create next-app $PROJECT_NAME --typescript
cd $PROJECT_NAME git init && git add . && git commit -m "init" yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p cat > tailwind.config.js <<EOL
module.exports = { content: ["./app/**/*.{ts,tsx}", "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"], theme: { extend: {} }, plugins: [],
};
EOL echo '@tailwind base;\n@tailwind components;\n@tailwind utilities;' > styles/globals.css yarn add -D eslint prettier eslint-config-prettier eslint-plugin-prettier cat > .prettierrc <<EOL
{ "semi": false, "singleQuote": true, "trailingComma": "all"
}
EOL mkdir -p pages/api
cat > pages/api/ping.ts <<EOL
import type { NextApiRequest, NextApiResponse } from 'next' export default function handler(_: NextApiRequest, res: NextApiResponse) { res.status(200).json({ message: 'pong' })
}
EOL git add . && git commit -m "feat: add Tailwind, Prettier, ping API" echo "Project $PROJECT_NAME ready! Run 'cd $PROJECT_NAME && yarn dev'"
Một vài ý tưởng khác
- Template: Lưu giữ các style, component phổ biến, hoặc cấu trúc thư mục yêu thích.
- Script test: Dễ dàng chạy test cụ thể mà không phải tìm lại câu lệnh cũ trong terminal.
- Script build: Tự động hóa quá trình build, deploy — ví dụ build xong deploy lên Vercel luôn.
Lời kết
Lập trình viên frontend phải xoay sở với đủ thứ: API, build, design system, CLI… Những script như thế này không chỉ tiết kiệm thời gian mà còn giúp bạn giải phóng trí óc để tập trung vào vấn đề thực sự.
Nếu script chỉ dùng cho 1 project, hãy thêm nó vào package.json với yarn script. Nếu dùng cho nhiều project? Viết riêng ra nhé.
Hãy tự động hóa bất cứ điều gì lặp lại nhiều lần. Bạn không cần dùng hết các script, nhưng chỉ cần 1–2 cái là đã thấy như có trợ lý dev mini trong terminal rồi.
Cảm ơn các bạn đã theo dõi!