Định dạng code

Công cụ này làm gì

Trình định dạng code nhận đoạn code chật chội, đã rút gọn hoặc thụt lề lộn xộn và in lại theo một phong cách sạch sẽ, nhất quán. Nó hỗ trợ những ngôn ngữ bạn hay gặp nhất khi làm web: HTML, CSS, SCSS, Less, JavaScript, TypeScript, JSON, XML, Markdown, YAML và GraphQL.

Bên dưới, công cụ chạy Prettier, trình định dạng được hàng triệu dự án sử dụng, nên kết quả trông y hệt code được định dạng trong VS Code hay bởi pre-commit hook. Parser của mỗi ngôn ngữ chỉ được tải khi bạn chọn ngôn ngữ đó, giúp trang luôn nhanh.

Cách sử dụng

1. Chọn Ngôn ngữ của code.
2. Dán code, hoặc mở một tệp.
3. Chọn kiểu Thụt lề (2 dấu cách, 4 dấu cách hoặc tab) và Độ rộng dòng. Những dòng dài hơn độ rộng này sẽ được ngắt ở chỗ ngôn ngữ cho phép.
4. Với JavaScript và TypeScript, chọn có kết thúc câu lệnh bằng dấu chấm phẩy hay không. Với script và stylesheet, chọn nháy đơn nếu dự án của bạn ưu tiên kiểu này.
5. Sao chép kết quả hoặc tải xuống.

Ví dụ

Ví dụ mẫu là một trang HTML viết trên một dòng, có CSS và JavaScript nội tuyến. Sau khi định dạng, mỗi phần tử nằm trên một dòng riêng, các quy tắc CSS được mở rộng với mỗi khai báo một dòng, và arrow function trong script được thêm dấu ngoặc và dấu chấm phẩy:

<script>
  const items = [1, 2, 3];
  items.forEach((i) => console.log(i));
</script>

Mẹo

• Định dạng cũng là một cách kiểm tra cú pháp nhanh. Nếu Prettier không phân tích được đầu vào, thông báo lỗi sẽ hiện dòng và cột để bạn nhảy thẳng tới chỗ sai.
• XML được định dạng với khoảng trắng được coi là không quan trọng để các thẻ lồng nhau được thụt lề. Nếu tài liệu của bạn phụ thuộc vào khoảng trắng chính xác bên trong phần tử, hãy kiểm tra kết quả trước khi dùng.
• Cần làm ngược lại? Dùng công cụ rút gọn JavaScript và CSS để thu nhỏ code cho môi trường production, hoặc công cụ định dạng JSON để kiểm tra và rút gọn JSON.