تنظیمات 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 ای هست که تو گیت هاب زدن.