فرمت‌کننده و فشردهساز کد
کد HTML، CSS، JavaScript و SQL را مرتب یا فشرده کنید؛ زبان کد خودکار تشخیص داده میشود و همه‌چیز در مرورگر شما انجام میشود.
فرمت‌کنندهٔ کد — مرتب‌سازی یا فشردهسازی HTML، CSS، JavaScript و SQL
کدی را که در یک خط رسیده، یا کدی را که آمادهٔ انتشار است، بچسبانید و آن را به همان شکلی که لازم دارید درآورید: مرتب، تورفته و خوانا، یا فشرده تا کمترین تعداد بایت. این ابزار با HTML، CSS، JavaScript و SQL کار میکند، خودش تشخیص میدهد کدام را چسبانده‌اید و همه‌چیز را در مرورگر شما انجام میدهد؛ پس کد منبع، کوئری‌هایی که نام جدول‌ها در آن‌هاست و تکه‌کدهای پروژهٔ یک مشتری هرگز از دستگاه شما خارج نمیشوند.
قالببندی برای آدم‌هاست: بازبینی یک pull request، خواندن یک باندل فشرده یا رفع اشکال کوئری‌ای که کسی در یک خط بلند نوشته است. فشردهسازی برای ماشین‌هاست: فایل‌های کوچک‌تر سریع‌تر بار میشوند و پهنای باند کمتری مصرف می‌کنند. یک ابزار هر دو مسیر را پوشش میدهد.
روش استفاده
- کد خود را بچسبانید. زبان روی تشخیص خودکار است؛ اگر حدس ابزار اشتباه بود، HTML، CSS، JavaScript یا SQL را انتخاب کنید.
- برای تورفته کردن کد قالببندی و برای فشرده کردن آن فشردهسازی را بزنید.
- تورفتگی را روی ۲ فاصله، ۴ فاصله یا تب بگذارید و برای SQL، گویش SQL و شیوهٔ نوشتن کلیدواژه‌ها را انتخاب کنید.
- کپی یا دانلود را بزنید. خط زیر ابزار حجم قبل و بعد و میزان صرفه‌جویی فشردهسازی را نشان میدهد.
هر زبان با چه ابزاری پردازش میشود
| زبان | قالببندی | فشردهسازی |
|---|---|---|
| HTML | js-beautify: تگ‌های تودرتو تورفته میشوند و تگ‌های درون‌خطی در خط خودشان می‌مانند | توضیحات و فاصلههای میان عنصرهای بلوکی حذف میشوند؛ pre، textarea، script و style دست‌نخورده می‌مانند |
| CSS | js-beautify: هر اعلان در یک خط | توضیحات و فاصلهها حذف میشوند، رشته‌ها حفظ میشوند و فاصله هر جا که مقدارها به آن نیاز دارند می‌ماند، مثل 0 auto و calc(100% - 32px) |
| JavaScript | js-beautify: آکولادها، بلوک‌ها و فراخوانی‌های زنجیره‌ای تورفته میشوند | Terser: کد را تجزیه میکند، بخش‌های زائد را حذف میکند و نام متغیرهای محلی را کوتاه میکند |
| SQL | sql-formatter: هر بند در خط خودش، با توجه به گویش | توضیحات حذف میشوند و فاصلههای بیرون از نقل‌قول‌ها به یک فاصله کاهش می‌یابند |
هر سه کتابخانه متن‌باز هستند و فقط وقتی بار میشوند که برای اولین بار از زبانشان استفاده کنید، پس خود صفحه سبک می‌ماند.
قالببندی SQL
بازبینی کوئری بلندی که در یک خط نوشته شده دشوار است. فرمت‌کنندهٔ SQL بندهای SELECT، FROM، WHERE، GROUP BY و هر JOIN را در خط‌های جداگانه می‌گذارد و ستون‌ها و شرط‌ها را زیر آن‌ها تورفته میکند. گویش اهمیت دارد، چون پایگاه‌های داده در نحو با هم اختلاف دارند: نام‌های داخل بک‌تیک مال MySQL است، کروشه مال SQL Server و تبدیل نوع با :: مال PostgreSQL. گویشی را که استفاده می‌کنید از میان SQL استاندارد، MySQL، MariaDB، PostgreSQL، SQLite، SQL Server، Oracle PL/SQL، BigQuery و Snowflake انتخاب کنید. کلیدواژه‌ها را میتوان با حروف بزرگ، حروف کوچک یا همان‌طور که نوشته شده نوشت؛ نام جدول‌ها و ستون‌های شما هرگز تغییر نمی‌کند.
فشردهسازی بیخطر
کد فشردهشده باید دقیقاً مثل نسخهٔ اصلی رفتار کند و راه مطمئن برای تضمین این کار، فهمیدن کد است نه حذف کورکورانهٔ نویسه‌ها. به همین دلیل JavaScript با Terser فشرده میشود که اول کد را به یک درخت نحوی تجزیه میکند؛ اگر کد خطای نحوی داشته باشد، به‌جای خروجی خراب، شمارهٔ خط و ستون خطا را می‌گیرید. فشردهساز CSS فاصله‌هایی را که معنا دارند نگه می‌دارد و فشردهساز HTML یک فاصله میان عنصرهای درون‌خطی مثل <span>a</span> <span>b</span> باقی می‌گذارد، چون حذف آن دو کلمه را در صفحه به هم می‌چسباند.
فشردهسازی کد جای فشردهسازی سمت سرور را نمی‌گیرد. Gzip یا Brotli معمولاً فایل‌های متنی را، علاوه بر فشردهسازی کد، ۷۰ درصد یا بیشتر کوچک میکند و این دو به‌خوبی کنار هم کار می‌کنند.
کاربردهای رایج
- خواندن یک فایل فشرده از یک کتابخانهٔ شخص ثالث یا یک باندل production هنگام رفع اشکال.
- مرتب کردن HTML خروجی یک ایمیل‌ساز یا CMS پیش از ویرایش دستی آن.
- بازبینی کوئری‌ای که از یک لاگ، یک خط دیباگ ORM یا پیام یک همکار کپی شده است.
- کوچک کردن تکه‌ای از CSS یا JavaScript پیش از قرار دادن آن به‌صورت درون‌خطی در یک صفحه یا قالب ایمیل.
ابزارهای مرتبط
برای JSON، فرمت‌کنندهٔ JSON آن را اعتبارسنجی و تورفته میکند و مبدل JSON آن را به YAML، CSV یا XML تبدیل میکند. برای اینکه دقیقاً ببینید قالببندی چه چیزی را تغییر داده، نسخهٔ قبل و بعد را در مقایسهٔ متن بچسبانید. برای یک کار مشخص، صفحه‌های کاربردی این ابزار را آماده باز می‌کنند: فرمت‌کنندهٔ HTML، فرمت‌کنندهٔ SQL، فشردهساز CSS، فشردهساز JavaScript و مرتب‌کنندهٔ JavaScript.