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. Bài viết này tổng hợp danh sách 10 tiện ích mở rộng (extensions) tốt nhất và hữu ích nhất cho Brackets (không theo thứ tự cụ thể), cùng với hướng dẫn sử dụng chi tiết cho từng tiện ích, giúp bạn tối ưu hóa trải nghiệm lập trình của mình. Các tiện ích này sẽ giúp bạn tiết kiệm thời gian, tăng năng suất và làm cho quá trình viết code trở nên thú vị hơn.
Contents
- Các Tiện Ích Mở Rộng Cho Brackets
- 1. Code Folding – Thu Gọn Code
- 2. Lorem Pixel – Tạo Ảnh Placeholder
- 3. Autoprefixer – Tự Động Thêm Vendor Prefixes
- 4. Markdown Preview – Xem Trước Markdown
- 5. Brackets Icons – Thêm Biểu Tượng Tệp
- 6. Documents Toolbar – Thanh Công Cụ Tài Liệu
- 7. Brackets Git – Tích Hợp Git
- 8. Lint ALL Things – Kiểm Tra Lỗi Toàn Diện
- 9. Brackets Todo – Quản Lý Công Việc Với Todo
- 10. Beautify – Định Dạng Code
- FAQ (Câu hỏi thường gặp)
Các Tiện Ích Mở Rộng Cho Brackets
1. Code Folding – Thu 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 thu gọn code (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. Tiện ích Code Folding có sẵn trên Github và từ trình quản lý tiện ích mở rộng của Brackets.
Cách sử dụng:
Để thu gọn bất kỳ thẻ lồng nhau nào, chỉ cần nhấp vào mũi tên xuống ở bên trái của thẻ cha như hình trên. Nguyên tắc 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 của phần tử cha để thu gọn 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.
Số dòng của các dòng được thu gọn bị ẩn, vì vậy rất dễ dàng để phát hiện các dòng được thu gọn khi bạn đang tập trung vào code.
2. Lorem Pixel – Tạo Ảnh Placeholder
Có rất nhiều cách để tạo văn bản placeholder, nhưng các nhà phát triển web front-end thường cần hình ảnh placeholder. Thay vì cố gắng tạo một hình ảnh placeholder trống, hãy sử dụng tiện ích Lorem Pixel. Nó cho phép bạn chèn hình ả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 từ đó bạn muốn một hình ảnh.
Nếu điều đó vẫn chưa đủ, hình ả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 xáo trộn các 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 hình ảnh placeholder đen trắng. Tiện ích 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 của Brackets.
lorem pixel demo
Cách sử dụng:
Sau khi bạn cài đặt tiện ích mở rộng Lorem Pixel, biểu tượng 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 với nút Live Preview). Nhấp vào biểu tượng để hiển thị hộp cài đặt. Đặt kích thước hình ảnh cần thiết 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 kiểm tra tùy chọn thang độ xám. Sao chép liên kết vào clipboard và sử dụng nó khi cần hoặc chèn vào vị trí con trỏ hiện tại.
3. Autoprefixer – Tự Động Thêm Vendor Prefixes
Thêm các vendor prefixes vào code của bạn là một công việc nhàm chán. Tiện ích 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 việ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 thêm tiền tố 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ó tiền tố. Tiện ích này sẽ tự động thêm code có tiền tố ngay khi bạn lưu. Để tự động thêm tiền tố cho một số code đã chọn, trước tiên hãy chọn code và sau đó vào tab Edit ⇒ Auto prefix selection.
autoprefixer settings
Autoprefixer cũng cho phép bạn thêm các tiền tố 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ó tiền tố đẹp, xếp tầng, 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
Markdown là ngôn ngữ đánh dấu văn bản thuần túy đáng yêu, dễ dàng chuyển đổi sang HTML. Markdown Preview cung cấp Markdown được hiển thị ngay bên dưới phiên bản văn bản. Nó cho phép bạn chọn giữa hai kiểu khác nhau, Github Flavoured Markdown và Standard Markdown.
Có ba chủ đề bạn có thể chọn cho cửa sổ xem trước – Light, Dark và Classic. Markdown Preview cũng có tùy chọn đồng bộ hóa cuộn (được bật theo mặc định). Tiện ích có thể được tải xuống từ Github hoặc từ trình quản lý tiện ích mở rộng của Brackets.
markdown preview demo
Cách sử dụng:
Mở một tệp .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 được hiển thị. Để thay đổi chủ đề hoặc tắt đồng bộ hóa cuộn, 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 Biểu Tượng Tệp
Luôn luôn thú vị khi làm đẹp trình soạn thảo code của bạn bằng các biểu tượng tệp. Brackets Icons thêm các biểu tượng đầy màu sắc, dựa trên loại tệp, vào tất cả các tệp được liệt kê trong thanh bên. Nó có các biểu tượng cho hầu hết các loại tệp và bạn có thể đăng yêu cầu biểu tượng trên trang Github.
Mẹo bổ sung:
Brackets Icons sử dụng các biểu tượng từ dự án Ionicons. Bạn cũng có thể xem tiện ích File Icons (một nhánh của dự án Brackets Icons) sử dụng các biểu tượng từ dự án Font Awesome. Cuối cùng, nó phụ thuộc vào 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 – Thanh Công Cụ Tài Liệu
Brackets thiếu các tab. Một sự thật hiển nhiên. Tiện ích Documents Toolbar thêm chức năng này. Tất cả các tệp nằm trong phần ‘active’ của thanh bên hiển thị dưới dạng các tab trong tiện ích này. Bạn cũng có thể ẩn thanh bên và chỉ sử dụng Documents Toolbar cho một giao diện đẹp.
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ọ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 sẽ cần. Bạn có thể dễ dàng cam kết các thay đổi từ bên trong Brackets, đẩy và kéo các thay đổi chỉ bằng một cú nhấp chuột, xem lịch sử tệp và tổng lịch sử cam kết. 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 tệp thực thi Git của bạn (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ạo thư mục repo Github cục bộ của bạn thành thư mục dự án trong Brackets. Sau đó, mở một tệp, thực hiện một số thay đổi và lưu nó. Sau đó, bạn có thể tiếp tục và nhấp vào biểu tượng Git ở bên phải và thao tác này sẽ mở ra 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 tệp của mình.
Chọn bất kỳ tệp nào bạn muốn cam kết và sau đó nhấp vào nút Cam kết. Thao tác này sẽ mở ra một cửa sổ bật lên liệt kê các thay đổi được thực hiện. Nhập thông báo Cam kết của bạn và nhấp vào Ok. Và bạn đã cam kết thành công một tệp vào Git trực tiếp từ Brackets!
Sau khi cam kết, chỉ cần nhấp vào nút đẩy (nó cũng hiển thị số lượng cam kết 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 Cài đặt (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ử Tệp và Cam kết:
Chỉ cần nhấp vào các nút tương ứng để xem Lịch sử Tệp và Lịch sử Cam kết của bạn được liệt kê một cách đẹp mắt. Chúng tôi có đề cập đến việc bạn có thể thay đổi hình đại diện thành hình đại diện đen trắng, hình đại diện màu hoặc Gravatar của bạn không? Lịch sử cam kết
git file history
8. Lint ALL Things – Kiểm Tra Lỗi Toàn Diện
Lint TẤT CẢ mọi thứ. Mọi thứ. Tiện ích này kiểm tra tất cả các tệp 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 rất nhiều tệp được kết nối. Tất cả các lỗi lint hiển thị độc đáo trong một ngăn.
Cách sử dụng:
git file history demo
Để sử dụng Lint ALL Things, chỉ cần vào tab View và nhấp vào Lint whole Project.
9. Brackets Todo – Quản Lý Công Việc Với Todo
Brackets Todo là một tiện ích mở rộng nhỏ gọn hiển thị tất cả các nhận xét TODO ở định dạng danh sách gọn gàng. Theo mặc định, nó hỗ trợ 5 thẻ – TODO, NOTE, FIXME, CHANGES và FUTURE. Bạn cũng có thể đánh dấu các nhận xét là Đã hoàn thành. Trong các tùy chọn xem, bạn có thể lọc các nhận xét theo thẻ. Brackets Todo cho phép bạn xác định màu tùy chỉnh cho các thẻ cũng như các thẻ của riêng bạn, trong trường hợp bạn muốn sáng tạo với các nhận xét 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 nhận xét từ nhiều tệp, 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ố tệp và thư mục như thư mục nhà cung cấp? Đừ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 tệp .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 nhận xét vào code của bạn với một thẻ bên trong. Tên thẻ 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 nhận xét HTML: Chỉ cần mở cài đặt – Nhấp vào biểu tượng Todo → Cài đặt (biểu tượng bánh răng) – và nhấp để mở tệp .todo. Vào tệp 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 tệp .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ỳ tệp/thư mục/tiện ích mở rộng tệp nào khỏi phạm vi tìm kiếm: Thêm code này vào tệp .todo:
<span>{ <span><span>"</span>search<span>"</span></span>: { <span><span>"</span>scope<span>"</span></span>: <span><span>"my</span>project<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
Beautify làm cho code của bạn trông đẹp. Nó sửa các khoảng trắng, thụt lề và dòng.
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à chọn một số code > Nhấp chuột phải > 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)
-
Brackets có còn được hỗ trợ và phát triển không?
Mặc dù Adobe đã ngừng hỗ trợ Brackets, nhưng nó vẫn là một trình soạn thảo mã nguồn mở phổ biến. Cộng đồng vẫn có thể tiếp tục phát triển và duy trì nó, nhưng bạn nên xem xét các lựa chọn thay thế như VS Code hoặc Sublime Text để đảm bảo hỗ trợ và cập nhật liên tục.
-
Tôi có thể tìm thêm extensions cho Brackets ở đâu?
Bạn có thể tìm thấy nhiều extensions hữu ích cho Brackets trong trình quản lý extensions tích hợp sẵn trong Brackets (File > Extension Manager) hoặc trên các kho lưu trữ trực tuyến như GitHub.
-
Làm thế nào để cài đặt extensions cho Brackets?
Để cài đặt extensions, mở trình quản lý extensions trong Brackets (File > Extension Manager), tìm kiếm extension bạn muốn cài đặt và nhấp vào nút “Install”. Sau khi cài đặt, bạn có thể cần khởi động lại Brackets để extension hoạt động.
-
Tôi nên làm gì nếu một extension không hoạt động đúng cách?
Nếu một extension không hoạt động đúng cách, hãy thử khởi động lại Brackets, kiểm tra xem extension có tương thích với phiên bản Brackets của bạn không, hoặc liên hệ với nhà phát triển extension để được hỗ trợ.
-
Có những lựa chọn thay thế nào cho Brackets?
Có nhiều trình soạn thảo mã nguồn phổ biến khác có thể thay thế Brackets, bao gồm Visual Studio Code (VS Code), Sublime Text, Atom và Notepad++. VS Code và Sublime Text là những lựa chọn phổ biến nhất nhờ vào tính năng mạnh mẽ và cộng đồng lớn.
-
Làm thế nào để tối ưu hóa Brackets cho phát triển web front-end?
Để tối ưu hóa Brackets cho phát triển web front-end, bạn nên cài đặt các extensions như Emmet (giúp viết HTML/CSS nhanh hơn), Autoprefixer (tự động thêm vendor prefixes), và các công cụ linting (để kiểm tra lỗi code).
7. Tôi có thể sử dụng Brackets để phát triển các loại ứng dụng nào khác ngoài web?
Mặc dù Brackets chủ yếu được sử dụng cho phát triển web front-end, bạn cũng có thể sử dụng nó để chỉnh sửa các loại tệp mã nguồn khác như JavaScript, Python, và các ngôn ngữ khác. Tuy nhiên, để phát triển các ứng dụng phức tạp hơn, bạn có thể cần sử dụng các IDE chuyên dụng hơn.