پایگاه کد خود را با زیباتر تغییر دهید: راهنمای با ادغام هاسکی

زیباتر چیست؟

آیا تا به حال ساعت ها وقت صرف کرده اید تا کد خود را قالب بندی کنید و فقط ناهماهنگی هایی را در پروژه خود پیدا کنید؟ زیباتر می تواند کمک کند! این ابزاری است که به طور خودکار کد شما را برای شما قالب بندی می کند و آن را سازگار، خوانا و نگهداری آسان می کند.

چگونه Prettier را نصب کنیم

نگران نباشید، نصب Prettier آسان است! شما فقط باید یک دستور را در ترمینال خود اجرا کنید. اگر از npm استفاده می کنید، می توانید اجرا کنید:

npm install --save-dev prettier
yarn add -D prettier

قبل از اجرای Prettier، می‌توانیم آن را با ایجاد a پیکربندی کنیم .prettierrc فایل. این اختیاری است، و اگر یک Prettier را ایجاد نکنید، به سادگی از پیش‌فرض‌های نظری خود استفاده می‌کند.

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

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

برای یادگیری، یک پروژه ساده ایجاد می کنم و زیباتر روی آن نصب می کنم:

npm init -y

سپس داخل پروژه فایل js ساده مانند زیر اضافه می کنم!

function
 test() { let x=[ 1,  1 ,123]; x.push( 2); return x 
}

console.log(
test())

چنین آشفتگی!

اما اگر دستور زیر را اجرا کنید، خواهید دید که همه چیز عالی خواهد بود:

npx prettier - write index.js

نادیده گرفتن کد

ممکن است فایل هایی در پروژه خود داشته باشید که نخواهید منابع را برای قالب بندی خودکار هدر دهید. برای رسیدگی به اینها به سادگی یک را ایجاد کنید .prettierignore فایلی با نام (یا الگوی) فایل هایی که می خواهید نادیده بگیرید:

build
node_modules

همچنین ممکن است کدهایی در فایل‌هایی داشته باشید که عمداً آن‌ها را به روشی خاص قالب‌بندی کرده‌اید که نمی‌خواهید Prettier آن را بازنویسی کند.

در اینجا یک نمونه در فایل js وجود دارد:

// prettier-ignore
const axiosInstance => (ctx) => {
...

نادیده گرفتن نظر ممکن است در قالب فایل متفاوت باشد، می توانید لیست کامل را در اینجا بیابید.

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

هنگامی که Prettier را نصب کردید، می توانید از آن به چند روش مختلف استفاده کنید:

1. از CLI استفاده کنید
اگر با خط فرمان راحت هستید، می توانید از Prettier CLI برای قالب بندی کد خود استفاده کنید. فقط بدو:

npx prettier --write script.js

با این کار تمام فایل های جاوا اسکریپت در پروژه شما فرمت می شود و تغییرات روی فایل ها می نویسد.

2. از افزونه ویرایشگر استفاده کنید
اگر ترجیح می دهید از ویرایشگر استفاده کنید، می توانید افزونه ای را نصب کنید که با Prettier یکپارچه شود. به عنوان مثال، اگر از Visual Studio Code استفاده می کنید، می توانید پسوند “Prettier — Code formatter” را نصب کنید.

وقتی آن را نصب کردید، باید بروید File > Preferences > Settings منو و فعال کنید:

3. با هاسکی از یک قلاب پیش متعهد استفاده کنید
اگر می‌خواهید فرآیند قالب‌بندی را خودکار کنید، می‌توانید یک قلاب پیش‌متعهد با هاسکی راه‌اندازی کنید. این کار Prettier را روی همه فایل‌هایی که قبل از انجام commit انجام می‌دهید اجرا می‌کند. در اینجا نحوه تنظیم آن آمده است:
چگونه Prettier را با Husky ادغام کنیم

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

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

npm install husky --save-dev
yarn add -D husky

2. قلاب های Git را فعال کنید
در مرحله بعد باید دستور زیر را اجرا کنید تا به طور خودکار هوک های تعریف شده خود را با هاسکی به git اضافه کنید

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

این یک دایرکتوری مانند زیر در پروژه شما ایجاد می کند و هر commit دستور pre-commit زیر را اجرا می کند:

3. package.json را ویرایش کنید
در مرحله بعد، باید دستور فرمت را برای اجرای Prettier قبل از انجام، پیکربندی کنید. فایل package.json را در پروژه خود باز کنید و کد زیر را اضافه کنید:

"format": "prettier --write . && git add -A ."

من از git add برای ذخیره همه آن تغییرات و گنجاندن آنها در commit استفاده می کنم.

حالا شما آماده اید! هر زمان که git commit را اجرا می کنید، هاسکی قبل از انجام تغییرات به طور خودکار کد شما را با استفاده از Prettier فرمت می کند.

و بس!

Prettier را می توان در گردش کار Continuous Integration شما ادغام کرد تا هر یک از اعضای تیم قبل از اجرای کد به طور خودکار اجرا شود. با git diff و درخواست‌های ادغام و کشش، همه کدهای متعهد شده توسط همه اعضای تیم با الگوی مشابهی مطابقت دارند، بنابراین گزارش تغییرات بسیار زمان‌بر است.

با Prettier و Husky، می توانید پایگاه کد خود را سازگار، خوانا و نگهداری آسان کنید.

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