Trình định dạng JavaScript

Tải lên

0 ký tự

Công cụ định dạng mã JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON trên trình duyệt, hỗ trợ cấu hình chi tiết phong cách Prettier, nén-làm rối Terser, tích hợp trình soạn thảo CodeMirror, xem trước thời gian thực, thao tác phím tắt, tải lên/tải xuống tệp.

Đề xuất Liên quan

Nén JS

CSS Formatter

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

Trình tạo QR Code/Barcode

Trình chuyển đổi cURL sang mã nguồn

Làm rối JS

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

Trong quá trình phát triển frontend, dán mã JS của bên thứ ba đã được nén, làm đẹp nhanh chóng để đọc và gỡ lỗi
Trước khi xem lại mã nhóm, định dạng thống nhất mã JavaScript/TypeScript, loại bỏ khác biệt phong cách như thụt lề, dấu ngoặc kép, dấu chấm phẩy, tập trung vào xem xét logic
Khi tiếp nhận dự án cũ, định dạng một cú nhấp mã JS cũ sắp xếp lộn xộn, nhanh chóng nắm bắt cấu trúc mã và các tầng logic
Trước khi triển khai production, sử dụng Terser để nén và làm rối mã JavaScript, giảm kích thước tệp và tăng tốc độ tải trang web
Khi viết JS/JSX demo trực tuyến, định dạng thời gian thực giữ mã sạch sẽ, thuận tiện chia sẻ với đồng nghiệp hoặc cộng đồng
Khi tìm hiểu tác dụng của các tùy chọn cấu hình Prettier, xem trước kết quả định dạng ngay lập tức bằng cách điều chỉnh tùy chọn, hiểu tác dụng của tham số như tabWidth, trailingComma
Khi xử lý đoạn mã sao chép từ nền tảng như Stack Overflow, GitHub, tự động sửa lỗi thụt lề và xuống dòng
Khi viết tệp cấu hình JSON, tự động định dạng thụt lề và xuống dòng, tránh lỗi phân tích do sai dấu phẩy, dấu ngoặc
Khi phát triển trang CSS/HTML, định dạng một cửa mã JS+CSS+HTML trong cùng dự án, giữ phong cách thống nhất
Trước khi phỏng vấn/thi viết, nhanh chóng sắp xếp mã JS cho bài toán thuật toán, định dạng chuẩn tăng cảm quan mã

Cách Sử dụng

Mở trang công cụ định dạng JavaScript, có thể dán mã trực tiếp vào vùng soạn thảo bên trái, hoặc nhấp nút tải lên để chọn tệp cục bộ (hỗ trợ định dạng .js/.ts/.jsx/.tsx/.css/.html/.json)
Chọn loại ngôn ngữ tương ứng: Công cụ thường tự động nhận dạng, nếu nhận dạng không chính xác có thể chọn thủ công JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON trong hộp thả xuống ngôn ngữ
Cấu hình tùy chọn định dạng: Có thể chọn phong cách nhanh đặt trước (default/modern/classic), hoặc điều chỉnh thủ công tùy chọn Prettier (chiều rộng thụt lề, tab/khoảng trắng, chiều rộng dòng, dấu chấm phẩy, dấu ngoặc kép, dấu phẩy đuôi, dấu ngoặc mũi tên)
Nếu cần nén mã, chuyển sang chế độ nén, cấu hình tùy chọn nén Terser (có bật compress không, có mangle tên biến không, có nén biến cấp cao nhất không), mức tối ưu CSS, tùy chọn nén HTML
Công cụ xử lý mã thời gian thực, vùng soạn thảo bên phải hiển thị ngay kết quả định dạng hoặc nén, thanh trạng thái dưới cùng hiển thị thời gian thực thống kê số ký tự, số byte, tỷ lệ nén
Sử dụng phím tắt để tăng hiệu quả: Ctrl+Shift+B kích hoạt định dạng, Ctrl+Shift+M chuyển đổi chế độ nén, Ctrl+Shift+O mở tệp, Ctrl+Shift+D tải xuống kết quả, Ctrl+Shift+K xóa trình soạn thảo
Sau khi hài lòng nhấp nút sao chép để sao chép kết quả vào bảng tạm, hoặc nhấp nút tải xuống để lưu thành tệp cục bộ; cũng có thể nhấp nút chia sẻ để tạo liên kết URL chứa mã và cấu hình chia sẻ cho người khác

Tính năng

Hỗ trợ đa ngôn ngữ: Định dạng đồng thời JavaScript, TypeScript, JSX, TSX, CSS, HTML, JSON tổng cộng 7 ngôn ngữ phổ biến trong frontend, xử lý mã frontend một cửa
Cấu hình chi tiết phong cách Prettier: Hỗ trợ đầy đủ các tùy chọn như tabWidth chiều rộng thụt lề (2/4/8 khoảng trắng), useTabs tab so với khoảng trắng, printWidth chiều rộng dòng, semi dấu chấm phẩy, singleQuote dấu nháy đơn/đôi, trailingComma dấu phẩy đuôi, arrowParens dấu ngoặc hàm mũi tên
Chức năng nén mã: Tích hợp công cụ nén Terser, hỗ trợ các tùy chọn nén cấp production như compress nén mã, mangle làm rối tên biến, toplevel nén biến cấp cao nhất
Tối ưu hóa chuyên biệt CSS: Cung cấp cấu hình mức độ tối ưu CSS, hỗ trợ xử lý chuyên biệt như nén CSS, xóa chú thích, xóa khoảng trắng
Tùy chọn nén HTML: Hỗ trợ cấu hình HTML minify, có thể thu gọn khoảng trắng, xóa chú thích, xóa dấu ngoặc kép thuộc tính, v.v.
Xử lý thời gian thực: Định dạng và xem trước ngay lập tức sau khi nhập mã, không cần nhấp nút cũng có thể thấy kết quả sắp xếp
Trình soạn thảo CodeMirror: Tích hợp trình soạn thảo CodeMirror chuyên nghiệp, cung cấp trải nghiệm chỉnh sửa chuyên nghiệp như tô sáng cú pháp, hiển thị số dòng, khớp dấu ngoặc, gấp mã
Tải lên/tải xuống tệp: Hỗ trợ tải lên trực tiếp tệp .js/.ts/.jsx/.tsx/.css/.html/.json cục bộ, sau khi định dạng có thể tải xuống tệp đã xử lý một cú nhấp
Chia sẻ liên kết: Lưu mã và cấu hình qua URL hash, tạo liên kết chia sẻ gửi cho đồng nghiệp để tái tạo tình huống định dạng hiện tại
Lịch sử: Tự động lưu lịch sử định dạng vào localStorage, quay lại phiên bản mã và cấu hình trước đó bất cứ lúc nào
Phím tắt: Hỗ trợ thao tác tắt như Ctrl+Shift+B định dạng, Ctrl+Shift+M nén, Ctrl+Shift+O mở tệp, Ctrl+Shift+D tải xuống, Ctrl+Shift+K xóa
Cài đặt nhanh: Cung cấp 3 cài đặt đặt trước nhanh default, modern, classic, chuyển đổi phong cách phổ biến một cú nhấp
Thống kê ký tự: Hiển thị thời gian thực so sánh số ký tự, số byte, tỷ lệ nén của mã gốc và mã đã xử lý
Mã ví dụ: Tích hợp mã ví dụ cho các ngôn ngữ khác nhau, nhấp để tải ngay trải nghiệm chức năng

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

Logic mã JavaScript sau khi định dạng có thay đổi không?

Không. Định dạng chỉ điều chỉnh nội dung liên quan đến "sắp xếp" như khoảng trắng, thụt lề, xuống dòng, vị trí dấu ngoặc, phong cách dấu ngoặc kép, v.v., dựa trên chuyển đổi AST (cây cú pháp trừu tượng), cấu trúc AST của mã trước và sau định dạng hoàn toàn giống nhau, logic thực thi 100% giống nhau. Miễn là bản thân mã đúng cú pháp và có thể phân tích bình thường, định dạng sẽ không thay đổi bất kỳ hành vi thực thi nào, có thể yên tâm sử dụng. Nhưng nén (mangle) mặc dù cũng không thay đổi logic, cần chú ý các tình huống đặc biệt như eval, xuất biến toàn cục, tránh cấu hình không phù hợp.

Làm sao nếu kết quả định dạng của công cụ định dạng và VS Code/Prettier cục bộ của tôi khác nhau?

Logic định dạng của công cụ này cố gắng giữ phù hợp với hành vi chính thức của Prettier nhất có thể. Nếu kết quả khác nhau, vui lòng kiểm tra mục cấu hình: tabWidth, useTabs, semi, singleQuote, trailingComma, arrowParens - các tùy chọn cốt lõi này hai bên có hoàn toàn giống nhau không. Ngoài ra chú ý khác biệt phiên bản Prettier - cấu hình mặc định Prettier 2/3 có khác biệt nhỏ (v3 mặc định trailingComma: all, v2 mặc định es5; từ v2 arrowParens mặc định always). Nếu dự án cục bộ của bạn có tệp cấu hình .prettierrc, điều chỉnh tùy chọn phù hợp trên trang web, kết quả định dạng sẽ giống nhau.

Mã đã nén có thể khôi phục không? Tên biến đã mangle có thể phục hồi không?

Mã đã định dạng là hoàn toàn đảo ngược - vì chỉ thay đổi sắp xếp, tất cả định danh, logic được bảo toàn đầy đủ, định dạng lại sẽ trở lại. Nhưng mã đã nén: phần chỉ loại bỏ khoảng trắng và chú thích có thể định dạng lại để khôi phục bố cục, nhưng mangle (làm rối tên biến) là không thể đảo ngược - tên biến có ý nghĩa ban đầu userName thành a, quá trình này là một chiều, không thể tự động khôi phục về tên gốc. Nếu cần gỡ lỗi mã đã nén trong môi trường production, nên cấu hình tạo tệp Source Map, ánh xạ về vị trí mã nguồn qua Source Map. Vì vậy trước khi nén hãy chắc chắn giữ lại mã nguồn gốc chưa nén!

Hỗ trợ những trình duyệt nào? Có thể dùng trên điện thoại không?

Công cụ này hỗ trợ tất cả trình duyệt hiện đại: Chrome, Firefox, Safari, Edge phiên bản mới nhất đều có thể sử dụng bình thường. Không hỗ trợ trình duyệt IE (hiện nay cũng không ai dùng IE để phát triển). Bố cục đáp ứng thích ứng màn hình điện thoại, nhưng chỉnh sửa mã trên màn hình nhỏ trải nghiệm trung bình, khuyến nghị sử dụng trên trình duyệt máy tính để bàn, màn hình lớn hiệu quả cao hơn. Tất cả tính toán định dạng và nén chạy cục bộ trên trình duyệt, không cần tải mã lên máy chủ, mã sẽ không rời khỏi trình duyệt của bạn, an toàn và đáng tin cậy.

Tại sao một số mã không thể định dạng, báo lỗi phân tích?

Công cụ định dạng trước tiên cần phân tích mã thành AST mới hoạt động được, nếu mã có lỗi cú pháp (dấu ngoặc không khớp, chuỗi chưa đóng, từ khóa viết sai, dấu phẩy thừa, v.v.), trình phân tích không hiểu cấu trúc mã sẽ báo lỗi. Vui lòng kiểm tra lỗi cú pháp của bản thân mã trước: xem bảng điều khiển có thông báo lỗi không, trình soạn thảo có đường lượn sóng đỏ chỉ báo vị trí lỗi không, sau khi sửa lỗi cú pháp sẽ có thể định dạng bình thường. Ngoài ra đảm bảo chọn đúng chế độ ngôn ngữ, mã JSX/TSX đừng chọn thành JS thông thường.

Mã của tôi có được tải lên máy chủ không? Mã có an toàn không?

Không. Tất cả định dạng, nén, tô sáng cú pháp hoàn toàn chạy cục bộ trên trình duyệt của bạn thông qua JavaScript, mã sẽ không được gửi đến bất kỳ máy chủ nào, xử lý hoàn toàn trên thiết bị của bạn. Bạn có thể kiểm tra bằng cách ngắt kết nối mạng: sau khi ngắt kết nối mạng công cụ vẫn có thể sử dụng bình thường. Chức năng liên kết chia sẻ mã hóa mã và cấu hình vào URL hash, nhấp chia sẻ chỉ tạo URL, mã không được tải lên - nhưng nếu bạn gửi liên kết cho người khác, họ mở liên kết có thể xem mã của bạn, vì vậy đừng chia sẻ mã nhạy cảm qua liên kết.

Có thể định dạng thành phần tệp đơn Vue (tệp .vue) không? Còn Svelte thì sao?

Hiện nay hỗ trợ đa ngôn ngữ của công cụ này bao gồm JS/TS/JSX/TSX/CSS/HTML/JSON, tệp đơn <template>/<script>/<style> của Vue (SFC) và thành phần Svelte hiện tại không hỗ trợ định dạng trực tiếp toàn bộ, nhưng bạn có thể sao chép riêng phần script (JS/TS), phần style (CSS), phần template (HTML) ra chọn ngôn ngữ tương ứng để định dạng riêng. Trong tương lai sẽ xem xét tăng hỗ trợ định dạng Vue/Svelte SFC.

Làm thế nào để đặt quy cách định dạng thống nhất cho nhóm?

Đối với quy cách thống nhất nhóm, khuyến nghị kết hợp ở ba cấp độ: ①Đặt .editorconfig trong thư mục gốc dự án, thống nhất cài đặt cơ bản của trình soạn thảo (thụt lề, xuống dòng, mã hóa); ②Sử dụng Prettier và đặt tệp cấu hình .prettierrc trong dự án, mọi người và CI định dạng theo cấu hình này, công cụ này cũng có thể chọn tùy chọn phù hợp để khớp với cấu hình; ③Sử dụng ESLint + eslint-config-prettier để tắt quy tắc phong cách của ESLint, chỉ kiểm tra chất lượng mã. Cấu hình trình soạn thảo tự động định dạng khi lưu (cài đặt tiện ích mở rộng Prettier trong VS Code, đặt editor.formatOnSave: true), thêm bước lint trong CI để kiểm tra định dạng, đảm bảo mã gửi đi phù hợp với quy cách.

Lợi ích của dấu phẩy đuôi (trailingComma) là gì? Có nên bật không?

Khuyến nghị mạnh mẽ bật dấu phẩy đuôi (ít nhất mức es5, mức all được khuyến nghị). Lợi ích của dấu phẩy đuôi là: ①Git diff sạch hơn: khi thêm phần tử cuối không cần thêm dấu phẩy vào dòng trước, chỉ có diff của dòng mới, thêm dấu phẩy không làm bẩn diff dòng trước; ②Thuận tiện hơn khi sắp xếp lại thứ tự phần tử, không cần xử lý vấn đề dấu phẩy cuối; ③Trình duyệt hiện đại và Node.js hỗ trợ đầy đủ dấu phẩy đuôi, IE cũ không hỗ trợ nhưng bây giờ không cần xem xét IE nữa. Hạn chế duy nhất là nhiều hơn một dấu phẩy, nhưng so với sự thuận tiện mang lại, điều này hoàn toàn xứng đáng. Prettier v3 mặc định là all.

Khi nén có nên bật mangle không? compress và mangle khác nhau gì?

Đối với nén môi trường production, khuyến nghị bật cả compress và mangle, đây là hai tùy chọn nén độc lập: compress là tối ưu hóa mã (hằng số gấp lại, xóa mã chết, đơn giản hóa biểu thức, v.v.), chỉ sửa đổi cấu trúc mã khi có thể đơn giản hóa, không thay đổi tên biến; mangle là rút ngắn tên biến cục bộ, đổi tên biến dài thành ký tự đơn, đây là một trong những nguồn giảm kích thước lớn nhất. Miễn là mã của bạn không được gọi từ bên ngoài trực tiếp bằng tên biến dưới dạng thư viện, hoặc không truy cập động tên biến bằng eval, mangle an toàn và có thể giảm kích thước đáng kể. Nếu thư viện mã nguồn mở cần bảo tồn tên API, có thể cấu hình mangle.reserved để bảo tồn tên xuất khẩu.

Tại sao khi định dạng JSON một số ký tự tự động được escape?

Đặc tả JSON có yêu cầu cú pháp nghiêm ngặt: chuỗi phải là nháy kép, không được có dấu phẩy đuôi, ký tự đặc biệt phải được escape (xuống dòng→\n, nháy kép→\", gạch chéo ngược→\\, Tab→\t, v.v.). Nếu chuỗi JSON của bạn có ký tự đặc biệt chưa escape, sẽ tự động escape theo đặc tả JSON trong quá trình định dạng, đây là hành vi đúng. Lưu ý: JSON không phải JavaScript, không thể viết chú thích trong JSON, không được dùng nháy đơn, không được có undefined, tất cả những điều này sẽ làm phân tích JSON thất bại.

Làm thế nào để luôn có dấu ngoặc trong tham số hàm mũi tên? Hoặc không muốn dấu ngoặc?

Điều chỉnh tùy chọn arrowParens: always là luôn đặt dấu ngoặc ((x) => x), đây là mặc định Prettier v2+, lợi ích là khi thêm/bớt tham số không cần thêm/bớt dấu ngoặc, diff sạch hơn; avoid là bỏ dấu ngoặc khi đơn tham số (x => x), mã ngắn gọn hơn. Chọn theo phong cách nhóm, cả hai phong cách không có đúng sai, chỉ cần thống nhất. Lưu ý: Tham số có chú thích kiểu, tham số mặc định, tham số phân giải sẽ có dấu ngoặc bất kể cấu hình.

Định dạng có thể tự động sửa các vấn đề phong cách mà ESLint chỉ ra không?

Công cụ này là định dạng phong cách Prettier, chỉ có thể sửa các vấn đề phong cách mà Prettier xử lý (thụt lề, dấu ngoặc kép, dấu chấm phẩy, dấu phẩy đuôi, chiều rộng dòng, khoảng trắng, v.v.). Các vấn đề chất lượng mã mà ESLint chỉ ra (như biến không sử dụng, thiếu return, vấn đề ===) là vấn đề logic, công cụ định dạng không thể tự động sửa, cần sửa đổi thủ công. Nếu ESLint của bạn cấu hình eslint-config-prettier, sau khi định dạng Prettier, ESLint sẽ không báo lỗi liên quan đến phong cách, các vấn đề chất lượng còn lại sửa thủ công.

Hỗ trợ tệp mã lớn nhất là bao nhiêu? Định dạng tệp lớn có bị lag không?

Vì định dạng chạy cục bộ trên trình duyệt, kích thước tệp hỗ trợ phụ thuộc vào hiệu suất thiết bị của bạn, thông thường tệp JS từ vài chục KB đến vài MB có thể xử lý bình thường, tệp JS đơn của dự án thông thường hoàn toàn đủ. Nếu là tệp JS đóng gói đặc biệt lớn (vài chục MB) có thể lag hoặc thiếu bộ nhớ, đối với tệp lớn như vậy khuyến nghị xử lý cục bộ bằng dòng lệnh Node.js+Prettier/Terser. Trong phát triển hàng ngày kích thước tệp nguồn cá nhân thường nằm trong phạm vi xử lý.

Tại sao khi nhấn phím tắt Ctrl+Shift+B trong Chrome lại mở trình quản lý dấu trang?

Đây là xung đột phím tắt mặc định của trình duyệt Chrome: Ctrl+Shift+B là phím tắt của Chrome để hiển thị/ẩn thanh dấu trang, độ ưu tiên phím tắt trình duyệt cao hơn phím tắt JS trang web, vì vậy bị Chrome chặn. Giải pháp: ①Nhấp nút định dạng để thao tác; ②Nếu bạn là người dùng Mac thì Cmd+Shift+B sẽ không xung đột với Chrome; ③Có thể sửa phím tắt trình duyệt trong cài đặt Chrome; ④Có thể lấy trọng tâm bên trong trình soạn thảo trước, một số tình huống trọng tâm trình soạn thảo có thể bắt phím tắt. Nếu trình duyệt khác cũng có xung đột phím tắt, có thể dùng nút để thao tác.

Xử lý sự cố

Khi định dạng báo "Lỗi phân tích cú pháp", không thể định dạng

Bản thân mã có lỗi cú pháp: dấu ngoặc không khớp, chuỗi chưa đóng, thiếu từ khóa, dấu phẩy thừa, v.v., lỗi cú pháp làm phân tích AST thất bại không thể định dạng, vui lòng sửa lỗi cú pháp trước Chọn sai chế độ ngôn ngữ: ví dụ mã JSX/TSX chọn thành JavaScript, cú pháp generic bị nhầm là thẻ JSX, hoặc ngược lại, vui lòng chọn thủ công loại ngôn ngữ chính xác Chứa cú pháp thử nghiệm: mã sử dụng đề xuất cú pháp JavaScript quá mới chưa thành tiêu chuẩn (như decorator, toán tử Pipeline), trình phân tích không hỗ trợ Tệp có tiêu đề BOM: ba byte UTF-8 BOM (EF BB BF) ở đầu, một số trình phân tích có thể không xử lý được, thử lưu thành UTF-8 không BOM Trộn lẫn mã ngôn ngữ khác: ví dụ ngôn ngữ template nhúng trong HTML (EJS, Handlebars, chỉ thị template Vue) không phải JS/HTML thuần, trình phân tích không nhận dạng được Trong mã có chú thích khối chưa kết thúc: /* không có */ tương ứng, chú thích chưa đóng làm toàn bộ mã sau đó bị coi là chú thích Sự mơ hồ của biểu thức regex: một số vị trí trông như toán tử chia/thực ra là regex literal, trình phân tích phán đoán sai, có thể thêm dấu chấm phẩy trước regex để loại bỏ sự mơ hồ

Báo lỗi khi nén (Minify), không thể nén

Lỗi cú pháp mã: Giống như định dạng, nén cũng dựa trên AST, mã phải đúng cú pháp mới nén được, sửa lỗi cú pháp trước Sử dụng import/export của ES Module nhưng không đánh dấu đúng loại module, hoặc cấu hình nén không khớp với loại module Sự cố khi mangle tên thuộc tính: Nếu bật mangle tên thuộc tính (tắt mặc định), truy cập thuộc tính động obj['key'] sẽ làm không tìm thấy thuộc tính, đừng tùy tiện bật mangle thuộc tính Trong mã có eval() hoặc câu lệnh with: Khi Terser gặp eval/with mangle có thể sai, vì eval có thể truy cập động tên biến trong phạm vi, tránh sử dụng eval trong mã production Lỗi cấu hình tên bảo lưu: Nếu cấu hình mangle.reserved nhưng sai chính tả hoặc thiếu tên bắt buộc bảo lưu (như jQuery, $ và thư viện toàn cục khác), có thể gây lỗi runtime Vấn đề cấu hình nén toplevel: Nếu mã của bạn chạy trong phạm vi toàn cục thay vì đóng gói trong IIFE/module, bật compress.toplevel: true có thể làm hỏng tham chiếu biến toàn cục Cấu hình phiên bản trình duyệt đích quá cũ: Terser có thể sử dụng cú pháp không được hỗ trợ bởi trình duyệt đích khi nén, có thể cấu hình phiên bản ecma để chỉ định phiên bản cú pháp JS đầu ra

Hiển thị ký tự lỗi khi định dạng tiếng Trung/chú thích tiếng Trung

Mã hóa tệp không phải UTF-8: Tệp cục bộ tải lên là mã hóa tiếng Trung như GBK/GB2312, công cụ phân tích mặc định theo UTF-8 gây ký tự lỗi, dùng trình soạn thảo chuyển tệp thành mã hóa UTF-8 rồi tải lên lại Mã hóa trang trình duyệt bị sửa đổi ngoài ý muốn: Mặc dù trình duyệt hiện nay mặc định UTF-8, nhưng một số trình duyệt cũ hoặc cài đặt đặc biệt có thể mã hóa sai, có thể xem cài đặt mã hóa trang trong menu trình duyệt và đặt thành UTF-8 Tệp có tiêu đề UTF-8 BOM: Mặc dù BOM thường không gây ký tự lỗi, nhưng một số trình phân tích xử lý BOM bất thường, có thể dùng trình soạn thảo xóa BOM lưu thành UTF-8 không BOM Vấn đề chuyển đổi mã hóa khi sao chép dán: Khi sao chép mã từ một số phần mềm cũ (như Notepad phiên bản cũ, Word), ký tự đặc biệt (như dấu ngoặc kép tiếng Trung, khoảng trắng toàn chiều rộng) có thể bị chuyển đổi sai, cố gắng sao chép từ trình soạn thảo hiện đại như VS Code Vấn đề phông chữ: Một số phông chữ monospaced hỗ trợ tiếng Trung không tốt làm hiển thị bất thường, đây không phải vấn đề mã hóa, chỉ là vấn đề phông chữ hiển thị, đổi phông chữ monospaced hỗ trợ tiếng Trung là được Ký tự Unicode đặc biệt: Mã chứa ký tự vô hình đặc biệt như emoji, khoảng trắng không chiều rộng, ký tự điều khiển, có thể làm hiển thị bất thường hoặc lỗi định dạng, có thể bật hiển thị ký tự vô hình trong trình soạn thảo để xem Vấn đề nén gzip hoặc proxy: Nếu truy cập sau khi triển khai xuất hiện ký tự lỗi, kiểm tra xem máy chủ đã đặt đúng tiêu đề phản hồi Content-Type: application/javascript; charset=utf-8 chưa

Định dạng mã JSX/TSX thất bại hoặc lỗi phân tích

Chế độ ngôn ngữ chọn thành JavaScript thay vì JSX/TSX: Trình phân tích JS thông thường không nhận dạng cú pháp <thẻ>, sẽ phân tích thẻ JSX là toán tử so sánh và báo lỗi, vui lòng chọn thủ công ngôn ngữ JSX hoặc TSX Sự mơ hồ cú pháp generic TSX: Tham số generic <T> trong TSX có thể bị nhầm là thẻ JSX, như const f = <T>(x: T) => x, có thể thêm dấu phẩy sau <T> thành <T,> để loại bỏ sự mơ hồ (đây là cách viết phổ biến của TSX) Thẻ JSX chưa đóng: JSX yêu cầu tất cả thẻ phải đóng đúng cách, thẻ tự đóng phải có />, khác với HTML, <img> phải viết thành <img/> Vấn đề dấu ngoặc biểu thức JS trong JSX: Biểu thức JS bên trong {} phải đóng đúng cách, nếu {obj.prop} không viết } sẽ làm phân tích sau đó lộn xộn Vấn đề cú pháp ngắn Fragment: Thẻ trống <></> cần hỗ trợ React 16+ và phải đóng đúng cách; nếu sử dụng <Fragment> cần import đúng cách Vấn đề dấu ngoặc giá trị thuộc tính JSX: Giá trị thuộc tính JSX nếu là chuỗi phải dùng dấu ngoặc kép, là biểu thức dùng {}, không trộn lẫn Phần mở rộng tệp TSX là .ts chứ không phải .tsx: Trình phân tích TypeScript chỉ bật phân tích JSX với phần mở rộng .tsx, nếu viết JSX với phần mở rộng .ts sẽ báo lỗi, vui lòng sử dụng phần mở rộng đúng

Sau khi định dạng thụt lề sai, không nhất quán với mong đợi

Cấu hình tabWidth sai: Kiểm tra cấu hình chiều rộng thụt lề là 2 hay 4, nhóm thường dùng 2 khoảng trắng, nếu mong đợi 4 khoảng trắng cần điều chỉnh thủ công tùy chọn tabWidth Cấu hình useTabs sai: Nếu nhóm dùng thụt lề Tab nhưng bạn cấu hình khoảng trắng, hoặc ngược lại, kiểm tra tùy chọn useTabs có đúng không Bản thân mã có lỗi cú pháp: Lỗi cú pháp làm cấu trúc AST bất thường, khi định dạng thụt lề sẽ lộn xộn, trước tiên sửa lỗi cú pháp được chỉ báo bằng đường lượn sóng đỏ Trộn lẫn Tab và khoảng trắng: Trong mã gốc một số vị trí thụt lề Tab một số vị trí khoảng trắng, định dạng sẽ thống nhất thành phong cách đã cấu hình, nhưng nếu mã gốc quá lộn xộn có thể cần định dạng nhiều lần Cài đặt printWidth quá nhỏ: Nếu đặt chiều rộng dòng quá nhỏ (như 40), mã sẽ xuống dòng thường xuyên làm thụt lề trông lộn xộn, đặt thành 80 hoặc 100 phù hợp hơn Cấu hình tùy chọn sắp xếp như bracketSameLine/arrowParens không phù hợp mong đợi: Kiểu vị trí dấu ngoặc nhọn, dấu ngoặc hàm mũi tên, v.v. được quyết định bởi cấu hình, không phải vấn đề thụt lề, điều chỉnh tùy chọn tương ứng là được Cấu hình EditorConfig xung đột với trình soạn thảo cục bộ: Nếu trình soạn thảo cục bộ sử dụng .editorconfig để tự động đặt thụt lề, khác với tùy chọn cấu hình trên trang web, kết quả định dạng hai bên sẽ không nhất quán, thống nhất cấu hình là được

Phím tắt không hoạt động, nhấn không có phản ứng

Trọng tâm không ở trình soạn thảo: Phím tắt chỉ hiệu lực khi trình soạn thảo nhận trọng tâm, nếu trọng tâm ở nút, hộp nhập hoặc vị trí khác của trang phím tắt không kích hoạt, trước tiên nhấp vào vùng soạn thảo để lấy trọng tâm Phím tắt trình duyệt xung đột: Một số phím tắt (như Ctrl+Shift+B trong Chrome mở thanh dấu trang, Ctrl+Shift+O trong Firefox mở lịch sử) bị trình duyệt chiếm giữ, có thể nhấp nút để thao tác, hoặc người dùng Mac dùng Cmd thay Ctrl thử Vấn đề phương thức nhập: Trong trạng thái phương thức nhập tiếng Trung một số phím tắt có thể bị chặn, chuyển sang phương thức nhập tiếng Anh rồi thử lại phím tắt Tiện ích mở rộng/plugin khác chiếm: Tiện ích mở rộng phím tắt cài đặt trong trình duyệt, script Tampermonkey, plugin proxy có thể chiếm phím tắt, thử mở trang ở chế độ ẩn danh Phím tắt hệ thống xung đột: Phím tắt toàn cục của hệ điều hành hoặc phần mềm khác đang chạy (như phần mềm chụp màn hình, phương thức nhập, IDE) đã chiếm tổ hợp phím tương ứng, có thể sửa phím tắt phần mềm khác hoặc dùng nút của công cụ này để thao tác Khác biệt bàn phím Mac/Windows: Lưu ý Mac dùng phím Cmd (⌘), Windows/Linux dùng phím Ctrl, không trộn lẫn; Option trên Mac tương ứng với Alt trên Windows Giới hạn bảo mật trình duyệt: Một số phím tắt liên quan đến truy cập tệp có thể bị giới hạn bởi chính sách bảo mật trình duyệt, không thể mô phỏng hoàn toàn qua JS, cần thiết thì nhấp trực tiếp nút tương ứng để thao tác

Thuật ngữ

Prettier: Công cụ định dạng mã frontend phổ biến nhất hiện nay, áp dụng triết lý thiết kế Opinionated, hỗ trợ nhiều ngôn ngữ như JS/TS/CSS/HTML/Markdown, bắt buộc thống nhất phong cách mã, chấm dứt tranh cãi phong cách trong nhóm.
Terser: Công cụ nén JavaScript hiện đại, là nhánh tương thích ES6+ của UglifyJS, hỗ trợ nén-làm rối cú pháp ES6+, là trình nén mặc định của các công cụ build hiện đại như Webpack, Rollup, Vite.
UglifyJS: Công cụ nén JavaScript cổ điển, là tiền thân của Terser, nhưng chỉ hỗ trợ cú pháp ES5 và trước đó, không hỗ trợ tính năng mới ES6+, hiện nay dự án mới thường sử dụng Terser thay thế.
AST (Abstract Syntax Tree): Cây cú pháp trừu tượng, biểu diễn dạng cây của cấu trúc cú pháp mã nguồn, mỗi nút đại diện cho một cấu trúc cú pháp trong mã. Các công cụ như Babel, Prettier, Terser, ESLint đều được triển khai dựa trên AST.
ESLint: Công cụ kiểm tra mã (Linter) phổ biến nhất trong hệ sinh thái JavaScript/TypeScript, dùng để phát hiện vấn đề chất lượng mã và thống nhất phong cách mã, có thể sử dụng kết hợp với Prettier.
EditorConfig: Tệp cấu hình thống nhất phong cách mã đa trình soạn thảo/IDE, xác định các cài đặt cơ bản như kiểu thụt lề, kích thước thụt lề, ký tự xuống dòng, mã hóa tệp, xuống dòng cuối cùng, để các trình soạn thảo khác nhau mở cùng dự án có hành vi nhất quán.
CodeMirror: Thành phần trình soạn thảo mã trên trình duyệt, cung cấp các tính 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, gấp mã, đa con trỏ, là một trong những lựa chọn chính cho trình soạn thảo mã trên web.
minify (nén): Quá trình giảm thiểu kích thước mã mà không thay đổi logic mã, thông qua cách loại bỏ khoảng trắng, chú thích, rút ngắn tên biến, tối ưu hóa mã, v.v., dùng để tăng tốc độ tải trong môi trường production.
mangle (làm rối/phá hủy): Bước trong quá trình nén để rút ngắn tên biến, tên hàm, tên tham số thành ký tự đơn, giảm đáng kể kích thước mã đồng thời làm mã khó đọc hơn, còn gọi là làm rối tên biến.
beautify (làm đẹp): Tức là định dạng mã, sắp xếp lại mã đã nén hoặc lộn xộn với thụt lề, xuống dòng, thêm khoảng trắng, tăng khả năng đọc, ngược lại với minify.
trailing comma (dấu phẩy đuôi): Dấu phẩy sau phần tử cuối cùng của đối tượng, mảng, tham số hàm, giúp Git diff sạch hơn khi thêm phần tử mới, môi trường ES5+ hỗ trợ.
arrow parens (dấu ngoặc hàm mũi tên): Tham số của hàm mũi tên đơn tham số có cần bọc bằng dấu ngoặc không, như x => x (không ngoặc) so với (x) => x (có ngoặc).
printWidth (chiều rộng dòng): Khi định dạng, mỗi dòng tự động xuống dòng khi vượt quá bao nhiêu ký tự, mặc định Prettier là 80 ký tự, nhóm có thể điều chỉnh thành 100 hoặc 120 theo kích thước màn hình.
semicolons (dấu chấm phẩy): Có thêm dấu chấm phẩy vào cuối câu lệnh JavaScript không, JS có cơ chế ASI chèn dấu chấm phẩy tự động, nhưng hầu hết các tình huống vẫn khuyên thêm dấu chấm phẩy để tránh sự cố.
single quote (dấu nháy đơn): Sử dụng dấu nháy đơn hay nháy kép cho chuỗi, trong JS chức năng hoàn toàn tương đương chỉ là ưu tiên phong cách, đặc tả JSON bắt buộc nháy kép.
double quote (dấu nháy kép): Bọc chuỗi bằng dấu nháy kép, là phong cách mặc định của nhiều ngôn ngữ, cũng là định dạng chuỗi yêu cầu bởi đặc tả JSON.
tab width (chiều rộng thụt lề): Số khoảng trắng tương ứng với mỗi cấp thụt lề, cộng đồng frontend thường dùng 2 khoảng trắng, ngôn ngữ backend thường dùng 4 khoảng trắng.
BOM (Byte Order Mark): Dấu thứ tự byte, ba byte EF BB BF có thể xuất hiện ở đầu tệp mã hóa UTF-8, dùng để đánh dấu mã hóa, trong một số tình huống có thể gây lỗi phân tích JS.
UTF-8: Unicode Transformation Format 8-bit, hiện nay là mã hóa tệp chuẩn của Web và dự án frontend, hỗ trợ tất cả ký tự Unicode, là mã hóa khuyến nghị mặc định.
source map (bản đồ nguồn): Tệp ánh xạ mã đã nén/chuyển đổi về vị trí mã nguồn gốc, dùng để gỡ lỗi môi trường production, khi mã đã nén báo lỗi có thể xác định số dòng mã nguồn.

Bảng tùy chọn cấu hình phổ biến Prettier

Tối ưu phổ biến và tác động của nén/obfuscate JS

Bảng tham chiếu phím tắt trình soạn thảo (Windows/Linux / Mac)