
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 همان شکستن خطوط و ادامه دادن آنها در خطهای بعدی میباشد). لازم به ذکر است که این ابزار قابلیت ادغام با ادیتورهای زیر را نیز دارا است:
- اتم
- ایمکس
- اسپرسو
- سابلایم
- ویم
- ویژوال استودیو
- وباستورم