تنظیمات prettierrc

قبل از اینکه بریم سر وقت کانفیگ کردن prettier اول بیاید extension اش رو نصب بکنیم. Ctrl + Shift + X رو بزنید و prettier رو سرچ و نصب کنید. بعد برید توی تنظیمات VSCode خودتون (کلید میانبرش کنترل و کاما هست)، default formatter رو سرچ کنید و روی esbenp.prettier-vscode بزارید.کانفیگ کردن prettierrc یه فایل کف پروژه میسازید که مثل json هست. اسم فایل رو هم دقیقا `.prettierrc` بزارید.همون طور که می بینید gitignore نشده. چونکه قراره کل اعضای تیم با همین کانفیگ کار بکنن تا همه به یه شکل کد بزنن. کانفیگ های این فایل رو میتونید به فرمت yaml یا json بنویسید.کانفیگ printWidthطول هر خط رو مشخص میکنه. حتما دقت کردید که توی VSCode خط و ستون رو نشون میده. این کانفیگ میگه دوست داری هر line چند تا col داشته باشه. این کانفیگ حداکثر رو مشخص نمیکنه. یعنی ممکنه یه خط از کدت بیشتر از مقداری که تنظیم کردی بشه، ولی در کل سعی میکنه طول خطوط رو نزدیک اون مقدار در نظر بگیره. مقداری که من براش انتخاب کردن `60` هست که اونم به دلیل خوانایی هست. البته شما میتونید `70` یا `80` رو هم امتحان کنید.کانفیگ - tabWidthتعداد فاصله (white space) هایی رو که قرار هست به ازای هر indent بزنه مشخص میکنه. معمولا ۲ یا ۴ میزارنش.کانفیگ - useTabsاین کانفیگ مشخص میکنه که tab بزنم یا space. اگه مقدار true بهش بدی بجای space از tab استفاده میکنه. و اگه false بدی از space استفاده میکنه.کانفیگ - semiبرای اینکه خوش ته هر statement یه `;` بزاره میتونید مقدار این کانفیگ رو true بدید. ولی اگه false بدی شاید به یه سری مشکلات بر بخوری.کانفیگ - singleQuoteاگه false بهش بدی تا جایی که براش ممکن باشه به جای double quote از single quote استفاده میکنه. مثلا "I'm double quoted" خودش میمونه. ولی "This \"example\" is single quoted" به 'This "example" is single quoted' تبدیل میشه.کانفیگ - quotePropsاین کانفیگ دور کلید های آبجکت رو quote میزاره و سه مقدار مختلف میتونه بگیره:&quotas-needed&quot/&quotconsistent&quot/&quotpreserve&quotمقدار اولی میگه اگه لازم بود دور کلید آبجکت quote بنداز. که به صورت پیشفرض همین مقدار هست.مقدار دومی میگه اگه حتی یه کلید هم quote داشت تمام کلید ها رو quote دار بکن.کانفیگ - trailingCommaافزودن کاما به انتهای statement ها و expression هایی که ممکنه تهشون کاما قرار داد. مثلا توی دستور زیر کاما نمتوان ته expression قرار داد.const arr1 = [1];سه تا مقدار میگیره:مقدار `"none"` که هیچ وقت کاما نمیزاره.مقدار `"es5"` که مطابق قوانین es5 کاما میزاره. مقدار پیشفرض همینه.مقدار `"all"` هم باعث میشه همیشه کاما رو بزاره.کانفیگ bracketSpacingفاصله (white space) بین bracket ها توی object literal ها میزاره. true و false میگیره: true یعنی space بزاره. و false نمیزاره:{ foo: 'bar' } // true {foo: 'bar'} // falseکانفیگ arrowParensاگه مقدار `"always"` رو بهش بدی همیشه پرانتز دور arrow function ها میندازه و اگه `"avoid"` بهش بدی تا زمانی که نیاز نباشه نمیندازه.(x) => x // &quotalways&quot x => x // &quotavoid&quotکانفیگ requirePragmaوقتی میخوای فقط یه سری فایل هایی که اولین خطشون یه کامنت خاصی دارن رو prettier بکنی این کانفیگ رو true میکنی. مقدار پیشفرضش false هست. Add this comment: /** * @prettier */ Or this one: /** * @format */کانفیگ endOfLineوقتی تیمی کار می کنید ممکنه روی چند سیستم عامل مختلف باشید و روی هر سیستم عامل end of line رو به یه شکل مشخص می کنن. این موضوع باعث میشه که وقتی `git diff` یا `git blame` میگیری به مشکل بخوری. پس حتما مطمئن شو که این رو روی `"lf"` تنظیم بکنی.&quotlf&quot = \n (Linux/MacOS) &quotcrlf&quot = \r\n (Windows) &quotcr&quot = \r &quotauto&quotاینم یه کانفیگ عمومی که به نظرم به کار اکثر دولوپرا بیاد.{ &quotarrowParens&quot: &quotalways&quot, &quotuseTabs&quot: false, &quotbracketSpacing&quot: true, &quotendOfLine&quot: &quotlf&quot, &quotprintWidth&quot: 70, &quotquoteProps&quot: &quotas-needed&quot, &quottabWidth&quot: 4, &quottrailingComma&quot: &quotall&quot, &quotsemi&quot: true, &quotsingleQuote&quot: true, &quotoverrides&quot: [ { &quotfiles&quot: &quot*.yml&quot, &quotoptions&quot: { &quotsingleQuote&quot: false, &quottabWidth&quot: 2 } } ] }Prettier Cheat sheet در ضمن میتونی cheat sheet اش رو که خودم نوشتم از این جا دان کنی. نکات تکمیلیاگه یه پروژه داری که کلش رو بدون prettier نوشتی ولی الان میخوای prettier رو بهش اضافه بکنی یه روش خیلی ساده برای اینکه کل فایل ها رو prettier بکنی اینه که از کامند لاین prettier استفاده بکنی، برای همین من تو خیلی از پروژه هام یکی از اسکریپت های فایل package.json رو این میزارم&quotscripts&quot: { &quotprettier&quot: &quotprettier --write '**/*.js' '**/*.ts'&quot, // or &quotformat&quot: &quotprettier --write '**/*.js'; prettier --write '**/*.ts'; prettier --write '**/*.json'&quot }رفرنس این نکته این issue ای هست که تو گیت هاب زدن.