تنظیمات prettierrc

تنظیمات prettierrc

قبل از اینکه بریم سر وقت کانفیگ کردن prettier اول بیاید extension اش رو نصب بکنیم. Ctrl + Shift + X رو بزنید و prettier رو سرچ و نصب کنید. بعد برید توی تنظیمات VSCode خودتون (کلید میانبرش کنترل و کاما هست)، default formatter رو سرچ کنید و روی esbenp.prettier-vscode بزارید.یه فایل کف پروژه میسازید که مثل json هست. اسم فایل رو هم دقیقا `.prettierrc` بزارید.همون طور که می بینید gitignore نشده. چونکه قراره کل اعضای تیم با همین کانفیگ کار بکنن تا همه به یه شکل کد بزنن. کانفیگ های این فایل رو میتونید به فرمت yaml یا json بنویسید.طول هر خط رو مشخص میکنه. حتما دقت کردید که توی VSCode خط و ستون رو نشون میده. این کانفیگ میگه دوست داری هر line چند تا col داشته باشه. این کانفیگ حداکثر رو مشخص نمیکنه. یعنی ممکنه یه خط از کدت بیشتر از مقداری که تنظیم کردی بشه، ولی در کل سعی میکنه طول خطوط رو نزدیک اون مقدار در نظر بگیره. مقداری که من براش انتخاب کردن `60` هست که اونم به دلیل خوانایی هست. البته شما میتونید `70` یا `80` رو هم امتحان کنید.تعداد فاصله (white space) هایی رو که قرار هست به ازای هر indent بزنه مشخص میکنه. معمولا ۲ یا ۴ میزارنش.این کانفیگ مشخص میکنه که tab بزنم یا space. اگه مقدار true بهش بدی بجای space از tab استفاده میکنه. و اگه false بدی از space استفاده میکنه.برای اینکه خوش ته هر statement یه `;` بزاره میتونید مقدار این کانفیگ رو true بدید. ولی اگه false بدی شاید به یه سری مشکلات بر بخوری.اگه false بهش بدی تا جایی که براش ممکن باشه به جای double quote از single quote استفاده میکنه. مثلا “I’m double quoted” خودش میمونه. ولی “This “example” is single quoted” به ‘This “example” is single quoted’ تبدیل میشه.این کانفیگ دور کلید های آبجکت رو quote میزاره و سه مقدار مختلف میتونه بگیره:&quotas-needed&quot/&quotconsistent&quot/&quotpreserve&quotمقدار اولی میگه اگه لازم بود دور کلید آبجکت quote بنداز. که به صورت پیشفرض همین مقدار هست.مقدار دومی میگه اگه حتی یه کلید هم quote داشت تمام کلید ها رو quote دار بکن.افزودن کاما به انتهای statement ها و expression هایی که ممکنه تهشون کاما قرار داد. مثلا توی دستور زیر کاما نمتوان ته expression قرار داد.const arr1 = [1];سه تا مقدار میگیره:مقدار `”none”` که هیچ وقت کاما نمیزاره.مقدار `”es5″` که مطابق قوانین es5 کاما میزاره. مقدار پیشفرض همینه.مقدار `”all”` هم باعث میشه همیشه کاما رو بزاره.فاصله (white space) بین bracket ها توی object literal ها میزاره. true و false میگیره: true یعنی space بزاره. و false نمیزاره:{ foo: ‘bar’ } // true
{foo: ‘bar’} // falseاگه مقدار `”always”` رو بهش بدی همیشه پرانتز دور arrow function ها میندازه و اگه `”avoid”` بهش بدی تا زمانی که نیاز نباشه نمیندازه.(x) => x // &quotalways&quot
x => x // &quotavoid&quotوقتی میخوای فقط یه سری فایل هایی که اولین خطشون یه کامنت خاصی دارن رو prettier بکنی این کانفیگ رو true میکنی. مقدار پیشفرضش false هست. Add this comment:
/**
* @prettier
*/
Or this one:
/**
* @format
*/وقتی تیمی کار می کنید ممکنه روی چند سیستم عامل مختلف باشید و روی هر سیستم عامل end of line رو به یه شکل مشخص می کنن. این موضوع باعث میشه که وقتی `git diff` یا `git blame` میگیری به مشکل بخوری. پس حتما مطمئن شو که این رو روی `”lf”` تنظیم بکنی.&quotlf&quot = n (Linux/MacOS)
&quotcrlf&quot = rn (Windows)
&quotcr&quot = r
&quotauto&quot

Author: admin

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *