brackets extension tốt nhất nên dùng

15 Brackets extension hay nhất nên dùng năm 202011 phút đọc

Giống như với wordpress thì khi nhắc đến Brackets thì ta không thể không nói tới những extension.

Chúng là những phần mở rộng giúp tăng cường sức mạnh cho brackets và giúp công việc soạn thảo code trở nên nhẹ nhàng hơn rất nhiều.

Vậy những extension nào là cần thiết và chức năng của chúng là gì ? Hãy cùng tìm hiểu 15 brackets extension hay nhất không thể bỏ qua cho development nhé.

Các bạn chú ý sau khi cài đặt extension bạn nên khởi động lại trình soạn thảo code Brackets để extension được kích hoạt.Lúc đó những extension bạn cài đặt mới phát huy tác dụng của nó được.

Custom Work

Brackets extension hay nhất đầu tiên nên cài đó là Custom Work.

Đây là một extension sẽ giúp bạn làm đẹp màn hình soạn thảo code, khiến nó trở nên dễ nhìn và tiện quản lý các tài liệu hơn giao diện mặc định của Brackets rất nhiều.

brackets hay nhất nên dùng custom work ảnh 1

Như bạn có thể thấy như hình trên là giao diện mặc định của brackets sau khi cài đặt.Khi số lượng tài liệu nhiều sẽ rất khó để xử lý chúng cùng lúc và làm tốn không ít thời gian thao tác.

Nhưng sau khi cài extension bạn có thể thấy giao diện của brackets đã thay đổi đáng kể.

brackets hay nhất nên dùng custom work ảnh 2

Cụ thể như các thay đổi bao gồm :

  • 1 – Icon để truy cập nhanh các chức năng của brackets đã chuyển từ phía trên bên phải xuống phía dưới bên trái
  • 2 – Có nút hình mũi tên để có thể thu gọn và mở tab danh sách các tài liệu của dự án phía bên trái
  • 3 – Các tài liệu bạn đang thao tác sẽ được hiển thị theo tab kèm theo tên giống như trình duyệt web để bạn có thể nhanh chóng thao tác giữa các tài liệu một cách dễ dàng
  • 4 – Nếu số tài liệu bạn mở quá nhiều và chúng không hiển thị đủ trên chiều dài thanh tab thì bạn vẫn có thể mở những tài liệu mong muốn thông qua nút tắt phía bên đầu bên phải
  • Các tài liệu của bạn giờ đây sẽ có icon kèm theo bên cạnh, icon này đại diện cho ngôn ngữ hay loại tập tin mà bạn đang có.

HTML Skeleton

Brackets extension hay nhất thứ hai nên cài đó là HTML Skeleton.

Nếu bạn không muốn mỗi lần soạn thảo một tài liệu HTML lại phải gõ từng dòng code cố định mà bất cứ tài liệu HTML nào cũng phải có thì bạn nên cài đặt ngay extension HTML Skeleton này.

brackets hay nhất nên dùng html skeleton ảnh 1

Sau khi cài đặt extension thì một icon sẽ xuất hiện ở khu vực quản lý icon tiện ích của brackets.

Mỗi lần soạn thảo một tài liệu HTML mới bạn chỉ việc nhấn vào icon này là một popup sẽ xuất hiện để bạn chọn những thành phần cố định mà bạn muốn thêm vào.

nhất nên dùng html skeleton ảnh 2

Sau khi chọn Basic HTML Skeleton rồi nhấn Done thì sẽ có một đoạn code cố định mà bất cứ tài liệu HTML nào cũng phải có được thêm vào tài liệu HTML của bạn như hình trên.

Giờ bạn chỉ việc thêm những thành phần khác của tài liệu HTML vào vị trí phù hợp là được.

Beautify

Brackets extension hay nhất thứ ba nên cài đặt là Beautify.

Extension Beautify sẽ giúp bạn sắp xếp lại code HTML, CSS và Javascript sao cho dễ nhìn nhất.Như hình dưới đây mình đã cố tình sắp xếp một cách lộn xộn code để minh họa cho các bạn xem.

brackets hay nhất nên dùng beautify ảnh 1

Sau khi cài extension thì một icon mới cũng sẽ xuất hiện ở khu vực quản lý icon tiện ích của brackets.

Để sắp xếp lại đoạn code nào bạn mong muốn thì bạn chỉ việc chuột trái chọn đoạn code đó rồi nhấn vào icon mình đã khoanh đỏ ở hình trên là code sẽ được tự động sắp xếp lại thật gọn.

brackets hay nhất nên dùng beautify ảnh 2

Hình trên đây là kết quả mình đã sắp xếp lại code sử dụng extension beautify.Nếu code của bạn dài thì extension này sẽ giúp bạn rất nhiều trong việc làm đẹp code.

Tuy nhiên trong quá trình viết code bạn cũng nên tự động điều chỉnh code thành từng mảng sao cho hợp lý lúc đó extension này mới có thể phát huy hết tác dụng của nó.

C style comment button và HTML comment button

Hai Brackets extension hay nhất nên cài đặt tiếp theo là C Style comment button và HTML comment button.

Trong quá trình soạn thảo tài liệu HTMl hay CSS chắc chắn bạn phải để lại comment để biết đoạn code tương ứng có ý nghĩa gì hoặc để vô hiệu hóa một đoạn code chưa cần dùng tới.

Việc này rất quan trọng nếu bạn làm việc nhóm và đặc biệt hữu ích khi sau này bạn phải cập nhật code mới.

C style comment button và HTML comment button là hai extension riêng biệt giúp bạn có thể comment nhanh một đoạn code bất kì chỉ bằng một cái nhấp chuột.

brackets hay nhất nên dùng comment

Cài xong hai extension thì như các extension trên cũng sẽ có icon tương ứng xuất hiện ở khu vực quản lý icon tiện ích của brackets.

Để biến một đoạn code nào đó thành comment bạn chỉ việc chuột trái chọn đoạn code đó rồi nhấn nút tương ứng với ngôn ngữ bạn định hóa comment.

Ví dụ comment code của ngôn ngữ HTML thì sẽ nhấn icon <! và sẽ nhấn icon /* nếu là comment cho ngôn ngữ CSS.

Emmet

Brackets extension hay nhất phải cài đặt đó chính là Emmet.

Đây là một extension quá nổi tiếng mà bất cứ ai đang soạn thảo code đều biết cả.Extension này quá tuyệt vời vì nó giúp bạn soạn thảo code với tốc độ nhanh gấp nhiều lần bình thường.

Extension này không chỉ có trên brackets mà còn được hỗ trợ bởi rất nhiều trình soạn thảo khác nữa.Nếu bạn là một newbie thì nên cài đặt ngay extension này và bắt đầu học cách sử dụng nó ngay bây giờ.

Do nó có rất nhiều chức năng hay mà sợ viết trong bài này sẽ làm bài viết dài nên mình sẽ viết một bài riêng về extension này sau.

Minimap

Brackets extension hay nhất nên cài thêm đó là Minimap.

Extension này sẽ giúp bạn tạo ra một màn hình thu nhỏ của toàn bộ tài liệu bạn đang thao tác.Nó như một bản đồ để bạn có thể quan sát toàn bộ cấu trúc code của mình.

Nếu code của bạn dài vài trăm đến vài ngàn dòng thì chắc chắn bạn nên cài đặt extension này.Nó sẽ giúp bạn di chuyển nhanh đến bất kì vị trí nào trong tài liệu hiện tại.

Bạn chỉ việc trỏ chuột vào bản đồ thu nhỏ code này rồi di chuyển vùng sáng tương ứng là được.Vùng sáng trên bản đồ này tương ứng với một màn hình hiện tại của bạn.

Bạn cũng có thể thu nhỏ bản đồ này theo chiều ngang bằng cách di chuyển chuột đến mép bản đồ rồi kéo đến kích thước bạn mong muốn.

brackets hay nhất nên dùng minimap

Color Highlighter

Brackets extension hay nhất mình khuyến nghị dùng đó là Color Highlighter.

Extension này sẽ giúp bạn tự động hiển thị màu tương ứng trên thông tin màu sắc bạn nhập vào tài liệu.

Điều này sẽ giúp bạn nhận biết trực quan nhanh chóng màu sắc và có sự thay đổi hợp lý khi cần thiết.

Trong số rất nhiều extension hiển thị màu sắc cho code thì mình thấy extension này ổn nhất vì nó trực quan hơn cả khi hiển thị màu tương ứng ngay trên giá trị màu sắc.

Nếu bạn có ý định thay đổi màu sắc đang sử dụng cho những dự án hiện tại trong tương lai thì không nên bỏ qua extension này.

brackets hay nhất nên dùng color highlighter

HTML Block Selector

Brackets extension hay nhất tiếp theo mình muốn giới thiệu là HTML Block Selector.

Có bao giờ bạn muốn thực hiện xóa hay comment một đoạn code rất dài mà gặp khó khăn do không biết điểm đầu và điểm cuối của đoạn code đó hay không ?

Extension này sẽ giúp bạn giải quyết điều đó một cách nhanh chóng và dễ dàng.

brackets hay nhất nên dùng html block selector

Sau khi cài đặt extension HTML Block Selector thì lập tức nó sẽ phát huy tác dụng ngay.

Bạn chỉ việc đặt con trỏ chuột ở đầu hoặc cuối của đoạn code tương ứng rồi nhấn Ctrl+Shift+T (Window) / Command+Shift+T (Mac) là extension này sẽ tự động chọn luôn khối code tương ứng cho bạn như ví dụ hình trên.

CSSFier

Brackets extension hay nhất không nên bỏ qua là CSSFier.

Thường thì bạn sẽ viết code HTML hoàn chỉnh rồi thì mới thêm CSS vào phải không nào ?

Mỗi lần muốn thêm tên class hay id vào file CSS bạn lại phải gõ mất thời gian đúng không ?

Từ nay bạn sẽ không còn phải lặp lại thao tác đó nữa hay chí ít là bạn sẽ tiết kiệm được một số bước khi sử dụng extension này.

Chức năng của extension này đơn giản là bạn sẽ copy toàn bộ khối code HTML bạn muốn viết CSS cho nó rồi dán nó vào file CSS.

Lúc này toàn bộ cấu trúc HTML tương ứng sẽ được viết lại dưới dạng CSS và bạn chỉ việc thêm các thuộc tính cần thiết vào cấu trúc này mà thôi.

Để dễ hình dung bạn hãy tham khảo trang web demo của chính tác giả extension này.

Indent Guides

Thêm một Brackets extension hay nhất đó là Indent Guides.

Bạn muốn có một đường thẳng xuất hiện giữa các thẻ liên quan để giúp bạn nhanh chóng nhận ra sự liên quan giữa các thẻ trong một khối code nhất định.

Sau khi cài extension này thì bạn cần vào menu View chọn Indent Guides để kích hoạt chức năng này lên.

brackets hay nhất nên dùng indent guides

Tuy không liên quan đến extension này nhưng bạn có thấy dấu tam giác bên cạnh số dòng của mỗi đoạn code không.Bạn nhấn vào dấu mũi tên này để thu gọn hoặc mở khối code bạn mong muốn.Chức năng này rất tiện lợi khi bạn phải soạn thảo một lượng code lớn.

Special Html Characters

Brackets extension hay nhất cuối cùng trong danh sách đó là Special Html Characters.

Nhiều trường hợp bạn muốn thêm những kí tự đặc biệt cho bài viết của mình nhưng lại không nhớ mã kí tự và tìm kiếm trên mạng cũng mất nhiều thời gian.

Extension này sẽ giúp bạn giải quyết vấn đề này với bảng mã kí tự đặc biệt HTML.

Sau khi cài đặt extension bạn chỉ việc nhấn ALT + C (Window) / Option + C (Mac) để mơt nhanh bảng mã kí tự HTML đặc biệt này ra.

Bạn chọn kí tự mong muốn rồi nhấn vào nó là nó sẽ tự động được thêm vào tài liệu HTML cho bạn.Giờ bạn có thể ra trình duyệt để kiểm tra kết quả.

brackets hay nhất nên dùng special html characters

Bonus

Ngoài extension thì brackets còn có rất nhiều theme sẵn trong thư viện.Cách cài đặt theme tương tự như cách cài đặt extension.

Nếu bạn chưa biết cách kích hoạt theme đã cài đặt thì nên đọc bài viết hướng dẫn chi tiết chức năng và cách sử dụng cơ bản brackets mà mình đã để link ở dưới đây.

Theme mà mình cũng như rất nhiều bạn yêu thích sử dụng đó chính là theme Monokai.Bạn có thể cài đặt theme này hoặc tìm ra theme phù hợp với mình trong thư viện theme nếu muốn.

Tạm kết

Số lượng extension lên đến hàng ngàn extension và vẫn đang ngày một tăng lên.Trong giới hạn bài viết này mình chỉ có thể giới thiệu tới bạn những extension phổ biến nhất với những chức năng cơ bản cần thiết cho việc lập trình.

Còn có rất nhiều extension khác rất tuyệt vời nữa nhưng để sử dụng chúng bạn phải có một trình độ khá trở nên trong việc lập trình.

Những extension như vậy mình sẽ giới thiệu đến các bạn trong những bài tiếp theo.

Bài viết trước

Bài viết sau

Tham khảo bài viết

Nếu bạn thấy bài viết này hay và có ích thì bạn có thể ủng hộ blog của mình bằng một trong số những cách sau để mình có thêm động lực xuất bản nhiều bài viết mới chất lượng hơn nữa.

  • Chia sẻ bài viết này lên mạng xã hội qua các nút bên dưới đây.
  • Thả tim ở ngay cuối cùng bài viết này.
  • Đăng kí nhận thông báo bài viết mới bằng cách nhấn vào chuông đỏ góc dưới cùng bên trái.
  • Đánh giá chất lượng bài viết bằng sao ở trên cùng bài viết này.

Tìm kiếm bài viết trên blog với Google Search :

Bài viết có thể bạn sẽ thích

guest
0 Comments
Inline Feedbacks
View all comments
0
Hãy cùng thảo luận về bài viếtx
()
x