7 Script Bash mà mọi lập trình viên Frontend nên có bộ công cụ của mình

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!