10 Tiện Ích Mở Rộng Brackets Tuyệt Vời Nhất Dành Cho Dân Lập Trình Web (Cập Nhật 2025)

Brackets.io vừa phát hành phiên bản 1.2 với nhiều tính năng mới tuyệt vời. Tuy nhiên, để tối ưu hóa quy trình làm việc và tăng năng suất, bạn có thể cần đến các tiện ích mở rộng. Bài viết này tổng hợp 10 tiện ích mở rộng Brackets tốt nhất và hữu ích nhất (không theo thứ tự cụ thể), kèm theo hướng dẫn chi tiết cho từng tiện ích, giúp bạn khai thác tối đa sức mạnh của Brackets.

Các Tiện Ích Mở Rộng Brackets Đáng Dùng Nhất

1. Code Folding: Gấp Gọn Code

Không giống như nhiều IDE và trình soạn thảo code khác, Brackets không có tùy chọn code folding mặc định. Với Code Folding, bạn có thể dễ dàng thu gọn các phần code lớn thành một dòng duy nhất, giúp code dễ đọc và quản lý hơn.

Cách sử dụng:

Để gấp bất kỳ thẻ lồng nào, chỉ cần nhấp vào mũi tên xuống ở bên trái của thẻ cha. Tương tự cho Javascript hoặc bất kỳ định dạng nào khác. Chỉ cần nhấp vào mũi tên xuống bên trái phần tử cha để gấp tất cả các câu lệnh lồng nhau thành một dòng. Để mở rộng, chỉ cần nhấp vào dấu cộng. Các số dòng của các dòng đã gấp được ẩn, vì vậy bạn có thể dễ dàng nhận ra các dòng đã gấp khi đang tập trung vào code.

2. Lorem Pixel: Tạo Ảnh Placeholder Đẹp Mắt

Có rất nhiều cách để tạo văn bản placeholder, nhưng các nhà phát triển web frontend thường cần ảnh placeholder. Thay vì cố gắng tạo một ảnh placeholder trống, hãy sử dụng tiện ích mở rộng Lorem Pixel. Nó cho phép bạn chèn ảnh placeholder tuyệt đẹp với bất kỳ kích thước nào bạn muốn. Điều thú vị về Lorem Pixel là nó cho phép bạn chọn danh mục mà bạn muốn lấy ảnh.

Nếu điều đó vẫn chưa đủ, ảnh placeholder sẽ tiếp tục thay đổi mỗi khi bạn tải lại trang! Hình ảnh thường có thể làm đảo lộn bảng phối màu, vì vậy Lorem Pixel cũng cung cấp cho bạn tùy chọn ‘grayscale’ để chỉ sử dụng ảnh placeholder đen trắng. Tiện ích mở rộng này được cung cấp bởi lorempixel.com và có sẵn từ trình quản lý tiện ích mở rộng Brackets.

lorem pixel demo

Cách sử dụng:

Sau khi cài đặt tiện ích mở rộng Lorem Pixel, logo Lorem Pixel – một hình vuông được đánh dấu – sẽ xuất hiện trên ngăn tiện ích mở rộng (ngăn ở bên phải có nút Live Preview). Nhấp vào logo để mở hộp cài đặt. Đặt kích thước hình ảnh yêu cầu và danh mục hình ảnh ưa thích của bạn. Nếu bạn muốn hình ảnh thang độ xám, hãy đánh dấu vào tùy chọn thang độ xám. Sao chép liên kết vào clipboard và sử dụng khi cần thiết hoặc chèn vào vị trí con trỏ hiện tại.

3. Autoprefixer: Tự Động Thêm Vendor Prefixes

Thêm vendor prefixes vào code của bạn là một công việc nhàm chán. Tiện ích mở rộng Autoprefixer có thể giúp bạn tiết kiệm rất nhiều thời gian (và rất nhiều công sức!) vì nó tự động thêm các vendor prefixes cần thiết vào code của bạn. Nó không cần bất kỳ cấu hình nào và cập nhật các prefixes của bạn mỗi khi bạn lưu code. Bạn cũng có thể chọn code và tự động prefix nó nếu bạn muốn.

Cách sử dụng:

Để sử dụng Autoprefixer, chỉ cần bắt đầu viết code không có prefix. Tiện ích mở rộng sẽ tự động thêm code có prefix ngay sau khi bạn lưu. Để tự động prefix một số code đã chọn, trước tiên hãy chọn code và sau đó chọn tab Edit ⇒ Auto prefix selection.

autoprefixer settings

Autoprefixer cũng cho phép bạn thêm các prefix tùy chỉnh trong cài đặt của nó. Để đi đến cài đặt tiện ích mở rộng: Edit ⇒ Autoprefixer Settings.

Để có code có prefix đẹp mắt, hãy bật tùy chọn Visual cascade trong cài đặt tiện ích mở rộng.

4. Markdown Preview: Xem Trước Markdown Trực Tiếp

Markdown là một ngôn ngữ markup plain-text đáng yêu, dễ dàng chuyển đổi thành HTML. Markdown Preview hiển thị Markdown đã render ngay bên dưới phiên bản text. Nó cho phép bạn chọn giữa hai kiểu khác nhau, Github Flavoured Markdown và Standard Markdown.

Có ba theme bạn có thể chọn cho cửa sổ preview – Light, Dark và Classic. Markdown Preview cũng có tùy chọn scroll sync (được bật theo mặc định).

markdown preview demo

Cách sử dụng:

Mở một file .md hoặc .markdown. Nếu bạn đã cài đặt Markdown Preview, nút M ↓ sẽ xuất hiện ở bên phải. Nhấp vào nó và bạn sẽ thấy Markdown đã render. Để thay đổi theme hoặc tắt scroll sync, chỉ cần nhấp vào biểu tượng bánh răng ở góc trên bên phải của phần Markdown Preview.

5. Brackets Icons: Thêm Icon Cho Các Loại File

Thật thú vị khi thêm gia vị cho trình soạn thảo code của bạn bằng các icon file. Brackets Icons thêm các icon đầy màu sắc, dựa trên loại file, vào tất cả các file được liệt kê trong thanh bên. Nó có các icon cho hầu hết các loại file và bạn có thể đăng yêu cầu icon trên trang Github.

Mẹo bổ sung:

Brackets Icons sử dụng các icon từ dự án Ionicons. Bạn cũng có thể xem tiện ích mở rộng File Icons (một nhánh của dự án Brackets Icons) sử dụng các icon từ dự án Font Awesome. Cuối cùng thì nó vẫn là sở thích cá nhân.

Cách sử dụng:

Chỉ cần cài đặt tiện ích mở rộng và tải lại Brackets (F5).

6. Documents Toolbar: Tạo Tab Quản Lý File

Brackets thiếu các tab. Một sự thật đơn giản. Tiện ích mở rộng Documents Toolbar thêm chức năng này. Tất cả các file trong phần ‘active’ của thanh bên sẽ hiển thị dưới dạng các tab trong tiện ích mở rộng này. Bạn cũng có thể ẩn thanh bên và chỉ sử dụng Documents Toolbar để có một giao diện đẹp mắt.

brackets document toolbar

Cách sử dụng:

Cài đặt tiện ích mở rộng và tải lại Brackets (F5).

7. Brackets Git: Tích Hợp Git Mạnh Mẽ

Mọi thứ đều cố gắng tích hợp với Git ngày nay; nó là Hệ thống kiểm soát phiên bản (VCS) phổ biến nhất. Brackets Git dễ dàng là tốt nhất trong số các Tiện ích mở rộng Brackets tương tự. Nó có tất cả các tính năng git bạn cần. Bạn có thể dễ dàng commit các thay đổi từ bên trong Brackets, push và pull các thay đổi chỉ với một cú nhấp chuột, xem lịch sử file và toàn bộ lịch sử commit. Nếu bạn giỏi Git, bạn sẽ không gặp bất kỳ vấn đề nào với Tiện ích mở rộng này.

Lưu ý: Để sử dụng Brackets Git, bạn cần cài đặt Git trên máy tính của mình. Sau khi cài đặt tiện ích mở rộng, bạn có thể cần nhập đường dẫn đến file thực thi Git của mình (nếu nó không nằm trong đường dẫn mặc định).

Cách sử dụng:

Brackets Git Demo

Sử dụng Brackets Git khá đơn giản. Đặt thư mục repo Github cục bộ của bạn làm thư mục dự án trong Brackets. Sau đó mở một file, thực hiện một số thay đổi và lưu nó. Sau đó, bạn có thể nhấp vào biểu tượng Git ở bên phải và điều này sẽ mở ngăn Brackets Git ở phía dưới. Nó sẽ liệt kê bất kỳ sửa đổi nào bạn đã thực hiện đối với các file của mình.

Chọn bất kỳ file nào bạn muốn commit, sau đó nhấp vào nút Commit. Điều này sẽ mở một popup liệt kê các thay đổi đã thực hiện. Nhập thông báo Commit của bạn và nhấp vào Ok. Và bạn đã commit thành công một file vào Git trực tiếp từ Brackets!

Sau khi commit, chỉ cần nhấp vào nút push (nó cũng hiển thị số lượng commit chưa được đồng bộ hóa, như bạn có thể thấy trong GIF ở trên).

Cấu hình cài đặt:

Mở ngăn Brackets Git và nhấp vào nút Settings (thứ hai từ bên phải). Thoải mái định cấu hình Brackets Git theo bất kỳ cách nào bạn thích.

brackets git settings

Để xem Lịch sử File và Commit

Chỉ cần nhấp vào các nút tương ứng để xem Lịch sử File và Lịch sử Commit của bạn được liệt kê đẹp mắt. Chúng tôi có đề cập rằng bạn có thể thay đổi avatar thành avatar đen trắng, avatar màu hoặc Gravatar của bạn không?

Commit Historygit file history

8. Lint ALL Things: Kiểm Tra Lỗi Code Toàn Diện

Lint ALL things. Everything. Tiện ích mở rộng này lints tất cả các file của bạn cùng một lúc. Rất hữu ích khi bạn có một dự án lớn với nhiều file được kết nối. Tất cả các lỗi lint hiển thị đẹp mắt trong một ngăn.

Cách sử dụng:

git file history demo

Để sử dụng Lint ALL Things, chỉ cần đi đến tab View và nhấp vào Lint whole Project.

9. Brackets Todo: Quản Lý Ghi Chú TODO

Brackets Todo là một tiện ích mở rộng nhỏ gọn, hiển thị tất cả các comment TODO ở định dạng danh sách gọn gàng. Theo mặc định, nó hỗ trợ 5 tag – TODO, NOTE, FIXME, CHANGES và FUTURE. Bạn cũng có thể đánh dấu các comment là Done. Trong các tùy chọn xem, bạn có thể lọc các comment theo tag. Brackets Todo cho phép bạn xác định màu tùy chỉnh cho các tag cũng như các tag của riêng bạn, trong trường hợp bạn muốn sáng tạo với các comment của mình.

Nếu bạn đang làm việc trên một dự án lớn và cần theo dõi các comment từ nhiều file, bạn có thể thay đổi phạm vi tìm kiếm của Brackets Todo. Bạn muốn loại trừ một số file và thư mục như thư mục vendor? Đừng lo lắng. Chỉ cần thêm đường dẫn vào danh sách loại trừ. Bạn có thể tùy chỉnh cài đặt cho từng dự án bằng cách thêm một file .todo vào thư mục gốc của dự án.

Bạn có thể xem qua tất cả các tùy chọn cài đặt trong tài liệu github.

Cách sử dụng:

brackets todo demo

Để sử dụng Brackets Todo, chỉ cần thêm một comment vào code của bạn với một tag bên trong. Tên tag phải ở dạng chữ hoa, theo sau là dấu hai chấm (:). Để xem tất cả các Todo, chỉ cần nhấp vào biểu tượng Todo trong ngăn tiện ích mở rộng bên tay phải.

Cấu hình:

• Để cho phép Todo cho các comment HTML: Chỉ cần mở cài đặt – Nhấp vào biểu tượng Todo → Settings (biểu tượng bánh răng) – và nhấp để mở file .todo. Vào file này, hãy thêm code này:

<span>{ <span><span>"</span>regex<span>"</span></span>: { <span><span>"</span>prefix<span>"</span></span>: <span><span>"</span>(?:)<span>"</span></span> } } </span>

brackets todo settings

• Để thay đổi phạm vi tìm kiếm: Thêm code này vào file .todo:

<span>{ <span><span>"</span>search<span>"</span></span>: { <span><span>"</span>scope<span>"</span></span>: <span><span>"my</span>project<span>"</span></span> } }</span>

• Để loại trừ bất kỳ file/thư mục/phần mở rộng file nào khỏi phạm vi tìm kiếm: Thêm code này vào file .todo:

<span>{ <span><span>"</span>search<span>"</span></span>: { <span><span>"</span>scope<span>"</span></span>: <span><span>"my</span>project<span>"</span></span>,</span>

“excludeFolders“: [ “yourfolder“ ]

<span><span><span>"</span>excludeFiles<span>"</span></span>: [ <span><span>"yourfile</span><span>"</span></span> ]</span><span> "excludeFiles": [ ".yourextension"] } } </span>

10. Beautify: Định Dạng Code Cho Đẹp

Beautify làm cho code của bạn trông đẹp mắt. Nó sửa các khoảng trắng, thụt lề và dòng. Code sẽ trở nên dễ đọc và chuyên nghiệp hơn.

Cách sử dụng:

Rất dễ sử dụng Beautify. Tất cả những gì bạn phải làm là select một số code > Right Click > Beautify.

Ngoài ra, bạn có thể đi đến tab Edit và nhấp vào ‘Beautify‘.

FAQ (Câu Hỏi Thường Gặp)

1. Làm thế nào để cài đặt các tiện ích mở rộng này?

   Trong Brackets, bạn có thể vào File > Extension Manager để tìm kiếm và cài đặt các tiện ích.

2. Các tiện ích này có miễn phí không?

   Đúng, tất cả các tiện ích mở rộng được liệt kê ở trên đều miễn phí.

3. Tôi có thể tìm thêm các tiện ích mở rộng khác ở đâu?

   Bạn có thể tìm thêm tiện ích mở rộng trên Brackets Extension Registry.

4. Tôi có thể đóng góp vào các tiện ích mở rộng này bằng cách nào?

   Hầu hết các tiện ích mở rộng này đều có repository trên GitHub. Bạn có thể đóng góp bằng cách báo cáo lỗi, đề xuất tính năng hoặc gửi pull request.

5. Các tiện ích này có tương thích với phiên bản Brackets mới nhất không?

   Hầu hết các tiện ích mở rộng phổ biến đều được cập nhật để tương thích với các phiên bản Brackets mới nhất. Tuy nhiên, bạn nên kiểm tra trang tiện ích mở rộng để đảm bảo.

6. Tôi gặp sự cố khi cài đặt một tiện ích mở rộng, tôi nên làm gì?

   Hãy thử khởi động lại Brackets, kiểm tra kết nối internet của bạn và đảm bảo rằng bạn đang sử dụng phiên bản Brackets mới nhất. Nếu sự cố vẫn tiếp diễn, hãy liên hệ với nhà phát triển tiện ích mở rộng.

7. Có tiện ích mở rộng nào giúp tôi viết code nhanh hơn không?

   Có, tiện ích mở rộng Emmet là một lựa chọn tuyệt vời để viết code HTML/CSS nhanh hơn. Nó cho phép bạn sử dụng các cú pháp viết tắt để tạo ra các đoạn code lớn.

Hy vọng bài viết này sẽ giúp bạn tìm được những tiện ích mở rộng Brackets hữu ích và cải thiện hiệu quả công việc của mình!