Công cụ định dạng JSX

Tải lên

0 ký tự

Công cụ định dạng JSX GeekFormat, dựa trên công cụ Prettier v3 Standalone để định dạng chuyên nghiệp và làm đẹp mã thành phần React JSX/TSX. Hỗ trợ 12 cấu hình định dạng (kích thước thụt lề, dấu chấm phẩy, phong cách dấu ngoặc, dấu phẩy cuối, khoảng trắng dấu ngoặc, dấu ngoặc hàm mũi tên, chiều rộng in, dấu ngoặc đơn JSX, dấu ngoặc cùng dòng JSX, chiến lược dấu ngoặc thuộc tính, v.v.), tích hợp công cụ nén Terser, cung cấp chuyển đổi bảy ngôn ngữ JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON. Trình soạn thảo tô sáng cú pháp CodeMirror 6, cột trái phải đối chiếu theo thời gian thực, hỗ trợ tải lên và tải xuống tệp, lịch sử, chia sẻ URL, sao chép một cú nhấp chuột. Xử lý hoàn toàn ở phía trình duyệt, mã không tải lên máy chủ.

Đề xuất Liên quan

Nén JSX

Định dạng TSX

Trình định dạng JavaScript

Định dạng CSS

Trình định dạng JSON

Về định dạng JSX

JSX là viết tắt của JavaScript XML, là một phần mở rộng cú pháp JavaScript được giới thiệu bởi khung React, cho phép viết trực tiếp cấu trúc thẻ giống HTML trong mã JavaScript. JSX khi biên dịch sẽ được các công cụ như Babel hoặc TypeScript chuyển đổi thành lệnh gọi hàm React.createElement() thông thường. JSX làm cho cấu trúc mã thành phần trực quan hơn, nhà phát triển có thể mô tả cấu trúc UI như viết HTML, đồng thời có được toàn bộ khả năng biểu đạt của JavaScript. Tuy nhiên, nếu mã JSX thiếu định dạng chuẩn mực — cấp độ lồng thẻ lộn xộn, sắp xếp thuộc tính vô thứ tự, thụt lề không thống nhất — sẽ ảnh hưởng nghiêm trọng đến khả năng đọc và hiệu quả bảo trì, đây cũng là giá trị của công cụ định dạng JSX.

Prettier là công cụ định dạng mã chủ lưu nhất trong hệ sinh thái JavaScript/JSX hiện nay, được James Long thành lập vào năm 2017, hiện đã trở thành tiêu chuẩn thực tế. Khái niệm cốt lõi của Prettier là "định dạng có ý kiến" (opinionated formatter) — nó chỉ cung cấp ít mục có thể cấu hình, các quy tắc còn lại được tích hợp sẵn không thể sửa đổi, lợi ích của việc làm này là loại bỏ tranh cãi vô tận giữa các đội ngũ về phong cách mã. Prettier hỗ trợ nhiều ngôn ngữ và định dạng như JSX/TSX/JavaScript/TypeScript/JSON/CSS/HTML/Markdown, được các cộng đồng khung chính thống như React, Vue, Angular áp dụng rộng rãi. Hầu hết các dự án phía trước hiện đại đều tích hợp Prettier trong đường ống CI/CD để đảm bảo phong cách mã thống nhất.

Các quy tắc cốt lõi của định dạng JSX bao gồm: Thứ nhất, cấp độ thụt lề — mỗi thẻ JSX và biểu thức lồng nhau đều tăng một cấp thụt lề, thể hiện cấu trúc cây DOM; Thứ hai, sắp xếp thuộc tính — khi thẻ có nhiều thuộc tính và vượt quá chiều rộng dòng, mỗi thuộc tính chiếm một dòng và căn chỉnh; Thứ ba, xử lý dấu ngoặc — biểu thức JSX nhiều dòng thường được bao bọc bằng dấu ngoặc tròn, ngăn chặn vấn đề chèn dấu chấm phẩy tự động (ASI); Thứ tư, thẻ tự đóng — thành phần không có phần tử con sử dụng dạng <Component />; Thứ năm, dấu ngoặc chuỗi — thuộc tính JSX mặc định sử dụng dấu ngoặc đôi (phù hợp với HTML), chuỗi JavaScript mặc định sử dụng dấu ngoặc đơn; Thứ sáu, xử lý khoảng trắng — có thêm khoảng trắng hai bên dấu ngoặc nhọn {} trong thẻ hay không có thể cấu hình.

Nén JSX (Minification) là hoạt động ngược của định dạng, mục đích là chuyển đổi JSX thành mã thực thi có kích thước nhỏ nhất, dùng để triển khai môi trường sản xuất để giảm lượng truyền mạng và tăng tốc độ tải. Nén JSX thường bao gồm các bước sau: Đầu tiên sử dụng Babel biên dịch JSX thành lệnh gọi React.createElement (tức là JavaScript thông thường), sau đó sử dụng công cụ nén (như Terser, UglifyJS) để thực hiện: loại bỏ chú thích và ký tự trắng, rút ngắn tên biến và tên hàm (mangling), loại bỏ mã chết (dead code elimination), đơn giản hóa biểu thức và câu lệnh điều kiện, hợp nhất khai báo, nội tuyến hàm, v.v. Các công cụ xây dựng hiện đại (Webpack, Vite, Rollup) ở chế độ production đều tự động thực hiện nén mã.

Tại sao định dạng mã quan trọng? Trong hợp tác đội ngũ, phong cách mã thống nhất có thể nâng cao đáng kể khả năng đọc và hiệu quả xem xét. Nếu mỗi nhà phát triển đều định dạng mã theo sở thích của mình, Git diff sẽ tràn ngập các thay đổi định dạng vô nghĩa, người xem xét rất khó tìm thấy thay đổi logic thực sự. Nghiên cứu chỉ ra rằng thời gian nhà phát triển dành cho việc đọc mã nhiều hơn nhiều so với thời gian viết mã, phong cách định dạng nhất quán có thể giảm đáng kể gánh nặng nhận thức khi đọc. Các công ty lớn như Google, Meta, Airbnb đều có quy phạm phong cách mã nghiêm ngặt và chuỗi công cụ định dạng tự động, đây cũng là sự phản ánh của độ trưởng thành kỹ thuật phần mềm.

Phân công giữa Prettier và Linters (như ESLint, TSLint) là thực hành tốt nhất của kỹ thuật hóa phía trước hiện đại: Prettier chuyên quản lý định dạng (formatting) — xuống dòng, thụt lề, khoảng trắng, dấu chấm phẩy, dấu ngoặc, dấu phẩy và các vấn đề phong cách thuần túy; ESLint chuyên quản lý chất lượng (code quality) — biến không sử dụng, lỗi tiềm ẩn, vấn đề an toàn, thực hành tốt nhất và các vấn đề logic. Khi sử dụng kết hợp cả hai, cần tắt các quy tắc định dạng trong ESLint trùng lặp với Prettier thông qua eslint-config-prettier, tránh xung đột. Nhiều đội ngũ còn cấu hình hook pre-commit (thông qua husky + lint-staged), tự động chạy Prettier và ESLint trước khi cam kết mã, đảm bảo mã nhập kho đều phù hợp với quy phạm.

Khi chọn công cụ định dạng JSX cần xem xét một vài yếu tố: Thứ nhất, lựa chọn công cụ — ưu tiên chọn Prettier làm công cụ, vì nó là tiêu chuẩn cộng đồng, kết quả có thể dự đoán và nhất quán với plugin IDE; Thứ hai, khả năng cấu hình — theo nhu cầu đội ngũ chọn số lượng tham số có thể điều chỉnh, quá nhiều tùy chọn ngược lại tăng chi phí ra quyết định; Thứ ba, an toàn — đảm bảo công cụ xử lý mã ở cục bộ, không tải lên máy chủ, tránh rủi ro rò rỉ mã nguồn; Thứ tư, chức năng bổ sung — nén, tô sáng cú pháp, lịch sử, chia sẻ và các chức năng khác có thể nâng cao hiệu quả sử dụng; Thứ năm, hỗ trợ đa ngôn ngữ — một công cụ bao phủ nhiều ngôn ngữ như JS/TS/JSX/TSX/CSS/HTML/JSON có thể giảm chi phí chuyển đổi công cụ.

Các lưu ý an toàn khi sử dụng công cụ định dạng mã trực tuyến: Thứ nhất, ưu tiên chọn công cụ xử lý hoàn toàn ở phía trình duyệt — loại công cụ này không cần máy chủ, mã chỉ chạy ở cục bộ, tính an toàn cao nhất; Thứ hai, không dán mã chứa thông tin nhạy cảm — như mật khẩu cơ sở dữ liệu, khóa API, logic kinh doanh nội bộ, thuật toán độc quyền, v.v., ngay cả khi công cụ tuyên bố không tải lên, cũng cần duy trì ý thức an toàn; Thứ ba, kiểm tra công cụ có sử dụng HTTPS hay không — ngăn chặn bị nghe lén trong quá trình truyền (mặc dù công cụ xử lý cục bộ không cần truyền, nhưng bản thân trang cũng cần tải an toàn); Thứ tư, mã quan trọng sử dụng công cụ cục bộ — đối với mã kinh doanh cốt lõi, khuyên nên sử dụng Prettier CLI hoặc plugin IDE được cài đặt cục bộ, không phụ thuộc vào dịch vụ trực tuyến; Thứ năm, định kỳ xem xét độ tin cậy của công cụ — kiểm tra xem có mã nguồn mở không, đánh giá cộng đồng thế nào, có chính sách quyền riêng tư không, v.v.

Trường hợp sử dụng

Mã thành phần React sao chép từ mạng có định dạng lộn xộn, định dạng nhanh chóng để dễ đọc và học tập
Tiếp nhận dự án cũ thì sắp xếp tệp thành phần JSX, thống nhất phong cách mã trước khi phát triển thứ cấp
Định dạng trước khi xem xét mã, loại bỏ diff vô nghĩa do khác biệt định dạng, tập trung vào xem xét logic
Phản định dạng mã sản xuất JSX đã được nén, đọc mã bị làm rối khi khắc phục sự cố trực tuyến
Làm đẹp mã ví dụ JSX trước khi viết blog kỹ thuật hoặc tài liệu, nâng cao tính chuyên nghiệp của nội dung
So sánh hiệu ứng của các cấu hình định dạng khác nhau, làm tham khảo lựa chọn cho kế hoạch cấu hình Prettier của đội ngũ
Trong bài giảng dạy, trình bày quy trình sắp xếp mã JSX từ lộn xộn đến chuẩn mực
Khi gỡ lỗi đoạn mã React trực tuyến, định dạng trước rồi mới phân tích cấu trúc và xác định vị trí lỗi
Trong tài liệu thư viện thành phần tạo mã JSX, đảm bảo phong cách mã ví dụ thống nhất và đẹp mắt
Trước khi phỏng vấn, sắp xếp mã dự án React của mình, đảm bảo mẫu mã nộp có phong cách chuẩn mực
Định dạng mã JSX do AI tạo ra trước khi đưa vào dự án, loại bỏ vấn đề không thống nhất định dạng do AI xuất ra
Khi phát triển dự án React Native hoặc Next.js, định dạng nhanh chóng đoạn mã thành phần trực tuyến

Cách Sử dụng

Dán mã JSX/TSX vào trình soạn thảo bên trái, hoặc nhấp nút tải lên để nhập tệp .jsx/.tsx, cũng có thể tải trực tiếp từ ví dụ
Nhấp nút cài đặt để điều chỉnh tham số định dạng: kích thước thụt lề, dấu chấm phẩy, dấu ngoặc, dấu phẩy cuối, chiều rộng in, tùy chọn JSX, v.v., hoặc giữ cấu hình mặc định
Nhấp nút làm đẹp (hoặc nhấn phím tắt) để thực hiện định dạng, bảng bên phải hiển thị kết quả định dạng ngay lập tức, có thể kéo trái phải để điều chỉnh chiều rộng bảng
Nếu cần nén, nhấp nút nén để chuyển sang chế độ nén, công cụ Terser sẽ xuất ra mã JSX đã được tối thiểu hóa
Nhấp nút sao chép để sao chép kết quả vào bảng nhớ tạm, hoặc nhấp tải xuống để lưu thành tệp, cũng có thể gửi cho người khác thông qua liên kết chia sẻ

Tính năng

Công cụ Prettier v3: Dựa trên Prettier v3 Standalone phổ biến nhất trong ngành làm công cụ định dạng, kết hợp với trình phân tích Babel, kết quả định dạng giống với plugin Prettier trong VS Code, đảm bảo phong cách mã thống nhất trong đội ngũ
12 cấu hình định dạng: Có thể điều chỉnh kích thước thụt lề (2/4/8 khoảng trắng hoặc Tab), dấu chấm phẩy, dấu ngoặc đơn/đôi, dấu phẩy cuối (none/es5/all), khoảng trắng dấu ngoặc, dấu ngoặc hàm mũi tên, chiều rộng in, dấu ngoặc đơn JSX, dấu ngoặc cùng dòng JSX, chiến lược dấu ngoặc thuộc tính và 12 tham số khác
Trình soạn thảo tô sáng cú pháp JSX: Trình soạn thảo mã chuyên nghiệp dựa trên CodeMirror 6, hỗ trợ tô sáng cú pháp JSX/TSX, số dòng, khớp dấu ngoặc, đầu vào bên trái và kết quả bên phải đối chiếu theo thời gian thực
Chức năng nén JSX: Công cụ nén Terser tích hợp sẵn, một cú nhấp chuột để nén mã thành phần JSX thành kích thước nhỏ nhất, hỗ trợ làm rối tên biến (mangle), loại bỏ mã chết, dọn dẹp console/debugger và các tùy chọn nén nâng cao khác
Chuyển đổi tự do giữa 7 ngôn ngữ: Hỗ trợ bảy ngôn ngữ phổ biến ở phía trước bao gồm JavaScript, TypeScript, JSX, TSX, CSS, HTML, JSON, một công cụ bao phủ nhu cầu định dạng toàn bộ ngăn xếp
Tải lên và tải xuống tệp: Hỗ trợ tải lên trực tiếp các tệp .jsx/.tsx/.js/.ts/.css/.html/.json để định dạng, sau khi xử lý có thể tải xuống và lưu vào máy cục bộ
Bảng lịch sử: Tự động lưu lịch sử định dạng gần đây, hỗ trợ quay lại các phiên bản lịch sử, so sánh hiệu ứng định dạng dưới các cấu hình khác nhau
Sao chép kết quả một cú nhấp chuột: Mã sau khi định dạng hoặc nén có thể sao chép vào bảng nhớ tạm một cú nhấp chuột, dán trực tiếp vào IDE hoặc dự án để sử dụng
Chức năng chia sẻ URL: Sử dụng LZ-String nén mã và cấu hình vào URL hash, sao chép liên kết là có thể chia sẻ mã hoàn chỉnh và tham số định dạng
Thông báo lỗi cú pháp thân thiện: Khi định dạng thất bại, phân biệt lỗi cú pháp với các lỗi khác, đưa ra thông báo vị trí giúp khắc phục sự cố mã nhanh chóng
Cột có thể kéo: Chiều rộng bảng bên trái và bên phải có thể điều chỉnh tự do bằng cách kéo, thích ứng với kích thước màn hình và thói quen đọc khác nhau
Xử lý cục bộ trên trình duyệt: Tất cả định dạng, nén, phân tích đều hoàn thành trong JavaScript trình duyệt, nội dung mã sẽ không được tải lên bất kỳ máy chủ nào, mã nguồn được bảo mật

Câu hỏi Thường gặp

Nguyên lý định dạng JSX là gì? Có mối quan hệ gì với Prettier?

Công cụ này sử dụng phiên bản Prettier v3 Standalone làm công cụ định dạng ở tầng dưới, thông qua trình phân tích Babel để phân tích cú pháp JSX, sau đó xuất lại mã có bố cục gọn gàng theo các quy tắc đã cấu hình. Prettier là công cụ định dạng mã phổ biến nhất trong hệ sinh thái phía trước hiện nay, được áp dụng rộng rãi trong các dự án React/Vue/Angular, v.v. Kết quả định dạng của công cụ này về cơ bản giống với kết quả khi bạn cài đặt plugin Prettier trong VS Code để định dạng tệp JSX, phù hợp để định dạng nhanh chóng trực tuyến mà không cần mở IDE cục bộ.

Hỗ trợ những tùy chọn định dạng nào? Có thể tùy chỉnh thụt lề và phong cách dấu ngoặc không?

Hỗ trợ 12 cấu hình định dạng: 1) Kích thước thụt lề: 2 khoảng trắng/4 khoảng trắng/8 khoảng trắng hoặc sử dụng Tab; 2) Có sử dụng dấu chấm phẩy hay không; 3) Dấu ngoặc đơn hay dấu ngoặc đôi; 4) Chiến lược dấu phẩy cuối: none (không có)/es5 (mảng đối tượng)/all (tham số hàm cũng thêm); 5) Có khoảng trắng bên trong dấu ngoặc nhọn đối tượng hay không; 6) Tham số đơn của hàm mũi tên có thêm dấu ngoặc hay không; 7) Chiều rộng in (tức là số ký tự tối đa mỗi dòng); 8) Thuộc tính JSX sử dụng dấu ngoặc đơn hay dấu ngoặc đôi; 9) Khi JSX nhiều dòng, dấu ngoặc phải có cùng dòng với nội dung hay không; 10) Chiến lược dấu ngoặc thuộc tính đối tượng: theo nhu cầu/giữ lại/nhất quán; 11) Độ nhạy trắng của HTML; 12) Sử dụng thụt lề Tab. Có thể điều chỉnh tự do trong bảng cài đặt.

Định dạng có thay đổi logic của mã JSX không? Có an toàn không?

Định dạng chỉ điều chỉnh ký tự trắng (xuống dòng, thụt lề, khoảng trắng) và các dạng cú pháp đường như dấu ngoặc, dấu chấm phẩy, sẽ không thay đổi bất kỳ logic mã nào. Prettier là công cụ trưởng thành đã được xác minh bởi hàng triệu nhà phát triển trên toàn thế giới, mã sau khi định dạng hoàn toàn tương đương về mặt ngữ nghĩa với mã gốc. Nhưng cần lưu ý: nếu mã gốc bản thân có lỗi cú pháp (như dấu ngoặc không khớp, thẻ không được đóng), định dạng sẽ thất bại và nhắc lỗi cú pháp, lúc này cần khắc phục sự cố mã trước rồi mới định dạng.

Chức năng nén JSX được thực hiện như thế nào? Hỗ trợ những tùy chọn nén nào?

Nén JSX sử dụng công cụ Terser (một trong những công cụ nén JavaScript phổ biến nhất trong ngành) thực thi cục bộ trên trình duyệt. Nén bao gồm: loại bỏ chú thích và khoảng trắng thừa, rút ngắn và làm rối tên biến (mangle), loại bỏ mã chết (dead_code), loại bỏ biến không được sử dụng (unused), tối ưu hóa nâng hàm/bien, đơn giản hóa biểu thức điều kiện, tối ưu hóa vòng lặp, v.v. Nén sẽ biên dịch JSX thành JavaScript thông thường thông qua Babel trước, sau đó mới thực hiện nén và tối ưu hóa. Lưu ý: mã sau khi nén khả năng đọc giảm đáng kể, phù hợp để triển khai môi trường sản xuất, không phù hợp để gỡ lỗi phát triển.

Có hỗ trợ TypeScript (TSX) không? Có khác biệt gì với JSX?

Có hỗ trợ. Công cụ mặc định là ngôn ngữ JSX, bạn có thể chuyển sang chế độ TSX thông qua menu chuyển đổi ngôn ngữ ở góc trên bên trái. Chế độ TSX sử dụng trình phân tích TypeScript, có thể nhận dạng chính xác các chú thích loại TypeScript (interface, type, generic, khẳng định loại, v.v.), sẽ không báo lỗi do cú pháp loại. Chế độ JSX sử dụng trình phân tích Babel, phù hợp cho thành phần React thuần JavaScript. Khi nén TSX sẽ tự động loại bỏ chú thích loại trước rồi mới thực hiện nén Terser.

Mã JSX được nhập có được tải lên máy chủ không? Quyền riêng tư có an toàn không?

Hoàn toàn an toàn. Tất cả chức năng của công cụ này (định dạng, nén, phát hiện cú pháp, lịch sử) đều hoàn thành cục bộ trên trình duyệt của bạn thông qua JavaScript, nội dung mã sẽ không được gửi qua mạng đến bất kỳ máy chủ bên ngoài nào. Prettier và Terser đều là thư viện triển khai hoàn toàn bằng JavaScript, có thể chạy trực tiếp ở phía trình duyệt. Bạn có thể sử dụng công cụ này trong trạng thái ngắt kết nối mạng, tất cả chức năng vẫn hoạt động bình thường. Lịch sử được lưu trong localStorage của trình duyệt, chỉ hiển thị trên thiết bị hiện tại của bạn.

Lịch sử được lưu ở đâu? Có bị mất không?

Lịch sử được lưu trong localStorage (lưu trữ cục bộ) của trình duyệt, liên kết với trình duyệt và thiết bị cụ thể. Nếu bạn xóa dữ liệu trình duyệt, chuyển trình duyệt hoặc sử dụng chế độ ẩn danh, lịch sử sẽ bị mất. Lịch sử được sử dụng để nhanh chóng quay lại các đoạn mã đã được định dạng gần đây, thuận tiện cho việc so sánh hiệu ứng của các cấu hình khác nhau. Khuyên rằng mã quan trọng nên tự lưu thành tệp, không nên chỉ dựa vào chức năng lịch sử.

Chức năng chia sẻ URL có đưa mã lên máy chủ không?

Không. Chức năng chia sẻ URL nén mã và cấu hình bằng LZ-String rồi mã hóa vào phần hash của URL (nội dung sau dấu #). URL hash có một đặc điểm quan trọng: nó không được gửi đến máy chủ cùng với yêu cầu HTTP, chỉ được đọc và phân tích bởi JavaScript ở cục bộ trình duyệt. Khi người nhận mở liên kết chia sẻ, trình duyệt trực tiếp phân tích hash và giải nén hiển thị mã, toàn bộ quy trình không cần sự tham gia của máy chủ. Nhưng xin lưu ý: liên kết chia sẻ chứa nội dung mã hoàn chỉnh, nếu mã nhạy cảm, xin đừng chia sẻ trên các kênh công khai.

Định dạng thất bại nhắc lỗi cú pháp thì sao?

Nguyên nhân phổ biến nhất của định dạng thất bại là bản thân mã có lỗi cú pháp: 1) Thẻ JSX không được đóng — kiểm tra tất cả thẻ có thành cặp hay không, thẻ tự đóng có đúng không (<img /> thay vì <img>); 2) Dấu ngoặc không khớp — kiểm tra dấu ngoặc nhọn {}, dấu ngoặc tròn (), dấu ngoặc vuông [] có thành cặp hay không; 3) Dấu ngoặc chuỗi không được đóng — dấu ngoặc của chuỗi có hoàn chỉnh hay không; 4) Viết sai cú pháp — ví dụ như sử dụng cú pháp không được phép trong JSX. Có thể kiểm tra số dòng và thông tin lỗi trong thông báo lỗi trước để xác định vị trí vấn đề, cũng có thể đơn giản hóa mã sau đó từng bước kiểm tra.

Chiều rộng in (printWidth) có nghĩa là gì? Nên đặt bao nhiêu?

Chiều rộng in (printWidth) là một trong những tham số cốt lõi của Prettier, biểu thị số ký tự tối đa của mỗi dòng mã. Khi một dòng mã vượt quá chiều rộng này, Prettier sẽ tự động gấp dòng. Giá trị mặc định là 80 ký tự, đây là một quy ước lập trình có lịch sử lâu đời (bắt nguồn từ thẻ đục lỗ và chiều rộng thiết bị đầu cuối). Các giá trị cài đặt phổ biến: 80 (kinh điển thận trọng), 100 (phổ biến hơn), 120 (thân thiện với màn hình rộng). Đặt quá nhỏ sẽ khiến mã thường xuyên gấp dòng ngược lại khó đọc, đặt quá lớn thì một dòng quá dài khó đọc trên màn hình hẹp. Khuyên rằng nên chọn giá trị trong khoảng 80-120 theo quy phạm đội ngũ và chiều rộng màn hình.

Dấu phẩy cuối (trailing comma) có công dụng gì? Nên chọn chế độ nào?

Dấu phẩy cuối là việc thêm một dấu phẩy sau mục cuối cùng của cấu trúc nhiều dòng như mảng, đối tượng, tham số hàm, v.v. Lợi ích bao gồm: 1) Khi thêm/xóa mục chỉ thay đổi một dòng, Git diff sạch sẽ hơn; 2) Tránh lỗi cú pháp do quên thêm dấu phẩy; 3) Trong một số trường hợp phân tích ổn định hơn. Prettier cung cấp ba chế độ: none (không thêm dấu phẩy cuối, gọn gàng nhất), es5 (chỉ thêm ở nơi hỗ trợ ES5, tức là mảng và đối tượng, tương thích nhất), all (thêm ở mọi nơi có thể, bao gồm cả tham số hàm, cần hỗ trợ ES2017+ hoặc Babel/TS). Dự án hiện đại khuyên sử dụng chế độ 'all', kết hợp với biên dịch Babel hoặc TypeScript hoàn toàn không vấn đề.

Dấu ngoặc đơn JSX và dấu ngoặc cùng dòng JSX lần lượt có hiệu ứng gì?

Dấu ngoặc đơn JSX (jsxSingleQuote): Kiểm soát giá trị thuộc tính JSX sử dụng dấu ngoặc đơn hay dấu ngoặc đôi. Mặc định tắt (dấu ngoặc đôi), điều này phù hợp với quy ước thuộc tính HTML. Khi bật, chuỗi thuộc tính trong JSX sẽ sử dụng dấu ngoặc đơn. Dấu ngoặc cùng dòng JSX (jsxBracketSameLine): Kiểm soát dấu ngoặc nhọn phải của phần tử JSX nhiều dòng (/> hoặc >) có đặt ở cuối dòng cuối cùng (cùng dòng) hay bắt đầu một dòng mới (khác dòng). Mặc định tắt (bắt đầu dòng mới), khi bật dấu ngoặc phải sẽ cùng dòng với thuộc tính cuối cùng. Các đội ngũ khác nhau có sở thích khác nhau, chọn phong cách nhất quán với dự án là được.

Có hỗ trợ định dạng hàng loạt nhiều tệp không?

Hiện tại công cụ phiên bản web chủ yếu được thiết kế cho kịch bản định dạng nhanh chóng một tệp, hỗ trợ xử lý tải lên một tệp duy nhất. Nếu bạn có nhiều tệp JSX/TSX cần định dạng hàng loạt, khuyên nên cài đặt công cụ Prettier CLI trong dự án, xử lý hàng loạt thông qua dòng lệnh (như npx prettier --write "src/**/*.jsx"). Công cụ tầng dưới của công cụ này hoàn toàn giống với Prettier, kết quả định dạng giống nhau. Phiên bản sau có thể sẽ xem xét thêm chức năng xử lý hàng loạt.

Có thể sử dụng kết hợp với ESLint không?

Có thể. Trong dự án thực tế, khuyên sử dụng Prettier phụ trách định dạng mã (xuống dòng, thụt lề, khoảng trắng, dấu ngoặc, v.v.), ESLint phụ trách chất lượng mã (biến không sử dụng, lỗi tiềm ẩn, thực hành tốt nhất, v.v.). Thực hành tốt nhất khi sử dụng kết hợp cả hai là: 1) Cài đặt eslint-config-prettier để tắt các quy tắc định dạng trong ESLint xung đột với Prettier; 2) Chạy Prettier định dạng trước, sau đó chạy ESLint kiểm tra. Công cụ này tập trung vào định dạng (phần Prettier giỏi), không bao gồm chức năng kiểm tra mã của ESLint.

Trên điện thoại có thể sử dụng không? Trải nghiệm di động như thế nào?

Có thể sử dụng trong trình duyệt điện thoại. Công cụ áp dụng thiết kế đáp ứng, trên thiết bị màn hình nhỏ sẽ tự động điều chỉnh bố cục — cột trái phải sẽ thành cột trên dưới, nút thanh công cụ được tối ưu hóa kích thước phù hợp với cảm ứng. Nhưng chỉnh sửa mã trên điện thoại trải nghiệm không tốt bằng máy tính để bàn, khuyên nên chủ yếu sử dụng trên máy tính. Nếu thường xuyên cần xử lý mã trên thiết bị di động, khuyên nên sử dụng ứng dụng trình soạn thảo mã di động hỗ trợ Prettier.

Xử lý sự cố

Định dạng thất bại nhắc lỗi cú pháp thì sao?

Trước tiên xác nhận mã có hoàn chỉnh không: Thành phần JSX thường cần export hoặc ít nhất chứa một hàm trả về JSX. Các lỗi cú pháp phổ biến bao gồm: 1) Thẻ JSX không được đóng — kiểm tra mỗi thẻ bắt đầu có thẻ kết thúc tương ứng hoặc dấu hiệu tự đóng hay không; 2) Dấu ngoặc nhọn không khớp — dấu ngoặc của biểu thức {} trong JSX có thành cặp hay không; 3) Dấu ngoặc chuỗi không được đóng — kiểm tra tất cả dấu ngoặc đơn/dấu ngoặc đôi/dấu ngoặc ngược; 4) Sử dụng từ dự trữ trong JSX — như class phải viết thành className, for phải viết thành htmlFor; 5) Nhiều phần tử gốc — JSX chỉ cho phép một phần tử gốc, nhiều phần tử cần được bao bọc bằng <>...</> hoặc <div>. Thông báo lỗi thường sẽ nhắc số dòng và lý do, có thể dựa vào đó để xác định vị trí.

Tải lên tệp sau đó không có phản ứng hoặc định dạng không đúng?

Trước tiên xác nhận phần mở rộng tệp có đúng không — các tệp .jsx/.tsx/.js/.ts/.css/.html/.json đều có thể tải lên. Nếu phần mở rộng tệp không chuẩn, công cụ có thể không nhận dạng đúng định dạng ngôn ngữ, dẫn đến kết quả định dạng không như mong đợi. Phương pháp giải quyết: 1) Đảm bảo phần mở rộng tệp là định dạng chuẩn; 2) Sau khi tải lên kiểm tra lựa chọn ngôn ngữ góc trên bên trái có đúng không, không đúng có thể chuyển đổi thủ công; 3) Xác nhận nội dung tệp là văn bản thuần túy chứ không phải tệp nhị phân; 4) Tệp quá lớn (vượt quá 1MB) có thể khiến trình duyệt bị giật, khuyên nên sử dụng công cụ máy tính để bàn để xử lý.

Mã sau khi định dạng khác với kết quả Prettier cục bộ của tôi?

Nguyên nhân có thể: 1) Khác biệt phiên bản — công cụ này sử dụng Prettier v3, nếu dự án của bạn sử dụng phiên bản v2, một số chi tiết có thể khác (như thay đổi giá trị mặc định dấu phẩy cuối); 2) Cấu hình khác nhau — kiểm tra tham số như chiều rộng in, thụt lề, dấu ngoặc, dấu phẩy cuối có nhất quán với cấu hình dự án hay không; 3) Trình phân tích khác nhau — JSX sử dụng trình phân tích Babel, TSX sử dụng trình phân tích TypeScript, xác nhận đã chọn đúng; 4) Khác biệt plugin — nếu Prettier cục bộ đã cài đặt plugin bổ sung (như prettier-plugin-tailwindcss), công cụ này không bao gồm các plugin này. Khuyên rằng hãy điều chỉnh cấu hình của công cụ này cho nhất quán với .prettierrc của dự án.

Sau khi nén JSX mã không chạy bình thường?

Nén JSX sử dụng công cụ Terser, nó đầu tiên biên dịch JSX thành JavaScript thông thường rồi mới thực hiện nén. Nếu mã sau khi nén không chạy, kiểm tra: 1) Cấu hình nén có quá quyết liệt không — như bật toplevel có thể thay đổi hành vi mô-đun; 2) Mã có sử dụng eval hoặc truy cập thuộc tính động không — làm rối biến có thể khiến tên không khớp; 3) Có phụ thuộc vào tên hàm hoặc tên lớp cụ thể không — nếu có, cần bật tùy chọn keep_fnames hoặc keep_classnames. Nén môi trường sản xuất khuyên nên hoàn thành bằng công cụ xây dựng dự án (Vite/Webpack), chúng có cấu hình và hệ sinh thái plugin hoàn thiện hơn.

Thuật ngữ

JSX: Viết tắt của JavaScript XML, phần mở rộng cú pháp JavaScript được giới thiệu bởi React, cho phép viết cấu trúc thẻ giống HTML trong JS, sau khi biên dịch chuyển đổi thành lệnh gọi React.createElement().
Prettier: Công cụ định dạng mã có ý kiến (opinionated) phổ biến nhất hiện nay, hỗ trợ JS/TS/JSX/TSX/JSON/CSS/HTML/Markdown, v.v., đã trở thành tiêu chuẩn thực tế định dạng mã phía trước.
Babel: Trình biên dịch JavaScript, có thể chuyển đổi cú pháp mới như ES6+/JSX/TS thành mã ES5 tương thích với trình duyệt cũ, đồng thời cũng làm công cụ tầng dưới để Prettier phân tích JSX.
Terser: Công cụ nén (minifier) JavaScript/JSX phổ biến nhất trong ngành, hỗ trợ làm rối biến, loại bỏ mã chết, nén mã, v.v., là công cụ nén mặc định của các công cụ xây dựng như Webpack/Vite.
Print Width（Chiều rộng in）: Một trong những tham số cốt lõi của Prettier, biểu thị số ký tự tối đa mỗi dòng mã, khi vượt quá chiều rộng này sẽ tự động gấp dòng. Mặc định 80 ký tự, cài đặt phổ biến là 80/100/120.
Trailing Comma（Dấu phẩy cuối）: Thêm dấu phẩy sau mục cuối cùng của cấu trúc nhiều dòng như mảng, đối tượng, tham số hàm, v.v. Có thể làm cho Git diff sạch sẽ hơn, tránh lỗi cú pháp. Prettier hỗ trợ ba chế độ none/es5/all.
Mangle（Làm rối biến）: Kỹ thuật rút ngắn tên biến/tên hàm trong nén mã, thay thế tên biến dài có ý nghĩa bằng tên ngắn như a/b/c, giảm kích thước mã, cũng tăng độ khó đọc.
Dead Code Elimination（Loại bỏ mã chết）: Kỹ thuật tối ưu hóa của công cụ nén, loại bỏ mã không bao giờ thực thi (như mã dưới điều kiện false, biến và hàm không sử dụng), giảm kích thước sản phẩm.
CodeMirror: Thành phần trình soạn thảo mã phía trình duyệt được công cụ này sử dụng (phiên bản 6), cung cấp các chức năng chỉnh sửa chuyên nghiệp như tô sáng cú pháp, số dòng, khớp dấu ngoặc, được áp dụng rộng rãi trong các loại IDE trực tuyến.
LZ-String: Thuật toán nén LZ được triển khai bằng JavaScript, dùng để nén và lưu trữ nội dung mã hiệu quả trong URL hash. Tỷ lệ nén cao và tốc độ giải mã nhanh, phù hợp với kịch bản chia sẻ liên kết.
localStorage: API lưu trữ khóa-giá trị cục bộ do trình duyệt cung cấp, dung lượng khoảng 5-10MB, dữ liệu được lưu trữ bền vững (trừ khi chủ động xóa). Công cụ này sử dụng nó để lưu trữ lịch sử định dạng.
ESLint: Công cụ kiểm tra tĩnh mã JavaScript/TypeScript (Linter), chủ yếu phụ trách chất lượng mã và thực hành tốt nhất, thường được sử dụng kết hợp với Prettier (Prettier quản lý định dạng, ESLint quản lý chất lượng).

Ngôn ngữ và định dạng tệp được hỗ trợ

Công cụ hỗ trợ 7 ngôn ngữ phổ biến ở phía trước, có thể chuyển đổi tự do thông qua menu góc trên bên trái:

Ngôn ngữ	Phần mở rộng tệp	Công cụ định dạng	Công cụ nén
JavaScript	`.js, .mjs, .cjs`	Prettier (Babel)	Terser
TypeScript	`.ts, .mts, .cts`	Prettier (TypeScript)	Terser (xóa loại trước)
JSX	`.jsx`	Prettier (Babel)	Terser
TSX	`.tsx`	Prettier (TypeScript)	Terser (xóa loại trước)
CSS	`.css`	Prettier (PostCSS)	CSSO
HTML	`.html, .htm`	Prettier (HTML)	Triển khai tùy chỉnh
JSON	`.json`	Prettier (JSON)	JSON.stringify

Tổng quan các mục cấu hình định dạng

12 tham số định dạng có thể cấu hình và công dụng của chúng:

Mục cấu hình	Giá trị có thể chọn	Giá trị mặc định	Mô tả
tabWidth Kích thước thụt lề	`2 / 4 / 8 / Tab`	`2 khoảng trắng`	Số khoảng trắng sử dụng cho mỗi cấp thụt lề, hoặc sử dụng ký tự Tab
semi Dấu chấm phẩy	`true / false`	`true`	Có thêm dấu chấm phẩy ở cuối câu lệnh hay không
singleQuote Dấu ngoặc đơn	`true / false`	`false (dấu ngoặc đôi)`	Chuỗi JS sử dụng dấu ngoặc đơn hay dấu ngoặc đôi
trailingComma Dấu phẩy cuối	`none / es5 / all`	`es5`	Có thêm dấu phẩy cuối sau mục cuối cùng của cấu trúc nhiều dòng hay không
bracketSpacing Khoảng trắng dấu ngoặc	`true / false`	`true`	Có thêm khoảng trắng bên trong dấu ngoặc nhọn đối tượng hay không
arrowParens Dấu ngoặc mũi tên	`always / avoid`	`always`	Tham số đơn của hàm mũi tên có thêm dấu ngoặc hay không
printWidth Chiều rộng in	`Số (khuyên 80-120)`	`80`	Số ký tự tối đa mỗi dòng, vượt quá tự động gấp dòng
jsxSingleQuote Dấu ngoặc đơn JSX	`true / false`	`false`	Giá trị thuộc tính JSX sử dụng dấu ngoặc đơn (mặc định dấu ngoặc đôi)
jsxBracketSameLine Dấu ngoặc cùng dòng JSX	`true / false`	`false`	Dấu ngoặc phải JSX nhiều dòng có cùng dòng với thuộc tính cuối hay không
quoteProps Dấu ngoặc thuộc tính	`as-needed / preserve / consistent`	`as-needed`	Khi nào thì thêm dấu ngoặc cho tên thuộc tính đối tượng

So sánh hiệu ứng trước và sau nén JSX

Lấy một thành phần React điển hình làm ví dụ, trình bày thay đổi kích thước trước và sau nén:

Mục so sánh	Định dạng (phát triển)	Nén (sản xuất)	Tỷ lệ nén
Kích thước mã	Khoảng 2.5 KB	Khoảng 0.8 KB	`~68%`
Số dòng	Khoảng 80 dòng	1 dòng	`~99%`
Tên biến	Tên có ý nghĩa	Một chữ cái a/b/c/d	`—`
Chú thích	Giữ toàn bộ chú thích	Loại bỏ toàn bộ	`—`
Khả năng đọc	Cao (có thể gỡ lỗi đọc)	Rất thấp (chỉ máy đọc được)	`—`
Kịch bản áp dụng	Phát triển, gỡ lỗi, xem xét	Triển khai sản xuất, phân phối CDN	`—`

Privacy & Security

Tất cả hoạt động của công cụ định dạng JSX này đều hoàn thành hoàn toàn cục bộ trên trình duyệt: Mã bạn nhập hoặc tải lên chỉ được định dạng và xử lý nén trong JavaScript trình duyệt, sẽ không được gửi qua mạng đến bất kỳ máy chủ bên ngoài nào. Prettier và Terser đều là thư viện hoàn toàn bằng JavaScript, có thể chạy trực tiếp ở phía trình duyệt. Lịch sử được lưu trong localStorage (lưu trữ cục bộ) của trình duyệt, chỉ hiển thị trên thiết bị và trình duyệt hiện tại. Chức năng chia sẻ URL nén mã thông qua LZ-String rồi mã hóa ở phần URL hash (nội dung sau # không gửi đến máy chủ). Trang không sử dụng Cookie để theo dõi, không thu thập nội dung mã người dùng nhập vào. Bạn có thể sử dụng công cụ này trong trạng thái ngắt kết nối mạng, chức năng cốt lõi vẫn hoạt động bình thường.

Authoritative References

prettier.ioTài liệu chính thức Prettier
terser.orgTerser - Công cụ nén JavaScript
react.devTài liệu chính thức React - Giới thiệu JSX