راه اندازی NextJs TypeScript با Prettier, Husky.

بیایید با راه اندازی NextJs با TypeScript شروع کنیم. پیکربندی با تنظیمات اضافه شده مقیاس پذیر خواهد بود.

بیایید ابتدا برنامه خود را با اجرای دستور زیر ایجاد کنیم:

npx create-next-app@latest

گزینه هایی به شما ارائه می شود. شما می توانید هر کدام را با توجه به ترجیحات خود انتخاب کنید.

What is your project named? nextJs-awesome-setup
Would you like to use TypeScript with this project? No / Yes
Would you like to use ESLint with this project? No / Yes
Would you like to use Tailwind CSS with this project? No / Yes
Would you like to use `src/` directory with this project? No / Yes
Use App Router (recommended)? No / Yes
Would you like to customise the default import alias? No / Yes

تا به حال هر مرحله عمومی بود که می توانید از اینجا نیز پیدا کنید.

در حال حذف package.lock.json فایل و node_modules پوشه

سپس اجرا کنید:

yarn

ما اکنون برنامه خود را به پشتیبانی تبدیل کرده ایم yarn بجای npm. که در طولانی مدت بسیار سودمند خواهد بود.

دویدن را امتحان کنید yarn dev برای بررسی اینکه آیا همه چیز همانطور که انتظار می رود کار می کند یا خیر.

yarn dev

پیکربندی زیباتر

yarn add -D prettier

این وابستگی های مورد نیاز را نصب می کند

touch .prettierrc

این یک فایل پیکربندی برای Prettier ایجاد می کند که در آن می توانید قوانین سفارشی خود را تعریف کنید.
برخی از قوانین رایج:

{
  "semi": true,
  "trailingComma": "none",
  "singleQuote": true,
  "printWidth": 80
}

این قوانین را همانطور که در .prettierrc فایلی که به تازگی ایجاد کرده ایم.

ايجاد كردن .prettierignore برای نادیده گرفتن برخی از فایل ها و پوشه ها

touch .prettierignore

اضافه کردن node_modules و .next پوشه ها

این خط را اضافه کنید package.json زیر اسکریپت ها

"format": "npx prettier --write ."

حالا می توانید در نهایت تست کنید که آیا کار می کند، اجرا کنید

yarn format

امیدوارم، کار کرده است.

پیکربندی هاسکی

اطلاعاتی در مورد هاسکی

1. نصب husky

npm install husky --save-dev

1. فعال کردن git قلاب ها

npx husky install

1. برای فعال کردن خودکار قلاب‌های Git پس از نصب، آن را ویرایش کنید package.json

npm pkg set scripts.prepare="husky install"

پس از اجرای این باید این را در خود داشته باشید package.json

{
  "scripts": {
    "prepare": "husky install" 
  }
}

یک قلاب ایجاد کنید که هر زمان که تعهدی می گیرید فعال می شود

npx husky add .husky/pre-commit "yarn format"
git add .husky/pre-commit

اکنون هر زمان که یک commit جدید انجام می دهید، کد شما باید قبل از commit خود را فرمت کند.

امتیاز: شما هر اسکریپتی را در اینجا با استفاده از آن اجرا می کنید && و هر زمان که commit را انجام دهید اجرا می شود، به عنوان مثال می توانید هر بار قبل از اینکه commit را انجام دهید، با اضافه کردن:

yarn format && yarn test

TLDR! این راهنمای راه‌اندازی، قالب‌بندی کد را ارائه می‌دهد و قبل از انجام تعهد، آن را بررسی کنید، تا از هر چیزی که بد به نظر می‌رسد فشار نیاورید.

کد نویسی مبارک!