Prettier: ابزاری برای خواناتر کردن سورس‌کد

Prettier همان‌طور که از نامش پیدا است (به معنای زیباکننده)، کدهای نوشته شده را سر و سامان داده و به صورت استاندارد و منظم در می‌آورد.

Prettier تمامی ظواهر را حذف کرده و با حفظ عملکرد اصلی، سورس‌کد شما را بر اساس استاندارد خودش بازطراحی می‌کند تا خواناتر و قابل‌فهم‌تر باشد و حتی گاهی‌اوقات همان دستورات را با تعداد خطوط کمتر به ما بر می‌گرداند. زبان‌های تحت پوشش این ابزار عبارتند از:
- JavaScript
- JSX
- Flow
- TypeScript
- CSS, Less, SCSS
- JSON
- GraphQL
- Markdown

به منظور آشنایی با نحوهٔ کارکرد این ابزار، کدهای زیر را مد نظر قرار می‌دهیم:

foo(arg1, arg2, arg3, arg4);

کد بالا تغییری نخواهد کرد و بهتر است در همان یک خط بماند. اما کد زیر را ملاحظه کنید:

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

فرمت این کد برای نوشتن یک تابع شکیل و خوانا نیست و همچنین بسیار طولانی و پیچیده بوده و فهم عملکرد تابع را سخت می‌کند؛ بنابراین Prettier  آن را به شکل زیر در می‌آورد: 

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne()
);

Prettier ابتدا تمام کد شما را گرفته و آن را اصطلاحاً Parse می‌کند؛ سپس ساختار اصلی را بر اساس قواعد خودش بازطراحی می‌کند و استایل‌های اصلی کد شما را تغییر می‌دهد.

همچنین حداکثر طول خطوط را محاسبه کرده و در مواردی که نیاز باشد، خطوط را اصطلاحا Wrap می‌کند (Wrap همان شکستن خطوط و ادامه دادن آنها در خط‌های بعدی می‌باشد). لازم به ذکر است که این ابزار قابلیت ادغام با ادیتورهای زیر را نیز دارا است:
- اتم
- ایمکس
- اسپرسو
- سابلایم
- ویم
- ویژوال استودیو
- وب‌استورم