Brackets.io đã phát hành phiên bản 1.2 gần đây, với một số tính năng mới tuyệt vời mà bạn có thể đọc trên blog của họ. Chúng tôi đã tổng hợp danh sách 10 tiện ích mở rộng Chân đế tốt nhất và hữu ích nhất hiện có (không theo thứ tự cụ thể), cùng với hướng dẫn đầy đủ cho mỗi tiện ích mở rộng.
Phần mở rộng chân đế
1. Mã gấp
Không giống như nhiều IDE và trình soạn thảo mã khác, Brackets không có sẵn tùy chọn gập mã. Với Code Folding, bạn có thể dễ dàng thu gọn các phần lớn mã của mình thành một dòng duy nhất. Tiện ích mở rộng Code Folding có sẵn trên Github và từ trình quản lý tiện ích mở rộng Brackets.
Cách sử dụng
Để gấp bất kỳ thẻ lồng nhau, 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 để 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.
Số dòng của các dòng gấp được ẩn, vì vậy rất dễ phát hiện các dòng gấp khi bạn đang tập trung vào mã.
2. Lorem Pixel
Có rất nhiều cách để tạo văn bản giữ chỗ, nhưng các nhà phát triển web mặt trước thường cần hình ảnh giữ chỗ. Thay vì cố gắng tạo một hình ảnh giữ chỗ trống, hãy sử dụng tiện ích mở rộng Lorem Pixel. Nó cho phép bạn chèn hình ảnh giữ chỗ tuyệt đẹp ở bất kỳ kích thước nào bạn muốn. Điểm thú vị về Lorem Pixel là nó cho phép bạn chọn danh mục mà bạn muốn có một hình ảnh.
Nếu điều đó không đủ tốt, hình ảnh giữ chỗ sẽ thay đổi mỗi khi bạn tải lại trang! Hình ảnh thường có thể làm đảo lộn các phối màu, vì vậy Lorem Pixel cũng cung cấp cho bạn tùy chọn 'thang độ xám' để chỉ sử dụng hình ảnh giữ chỗ b / w. 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.
Cách sử dụng
Khi bạn cài đặt tiện ích mở rộng Lorem Pixel, logo Lorem Pixel - hình vuông được kiểm tra - sẽ xuất hiện trên ngăn mở rộng (khung bên phải với nút Xem trước trực tiếp). Nhấp vào biểu tượng để hiển thị hộp cài đặt. Đặt kích thước hình ảnh yêu cầu của bạn và thể loại hình ảnh ưa thích. 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ó theo yêu cầu hoặc chèn vào vị trí con trỏ hiện tại.
3. Tự động trộn
Thêm tiền tố nhà cung cấp vào mã của bạn là rất lớ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 việc!) Vì nó tự động thêm tiền tố nhà cung cấp bắt buộc vào mã của bạn. Nó không cần bất kỳ cấu hình nào và cập nhật tiền tố của bạn mỗi khi bạn lưu mã. Bạn cũng có thể chọn mã và tự động tiền tố nó nếu bạn muốn.
Cách sử dụng
Để sử dụng Autoprefixer, chỉ cần bắt đầu viết mã không có tiền tố. Tiện ích mở rộng sẽ tự động thêm mã tiền tố ngay khi bạn lưu. Để tự động tiền tố một số mã được chọn, trước tiên hãy chọn mã và sau đó chọn tab Chỉnh sửa selection Tự động chọn tiền tố.
Autoprefixer cũng cho phép bạn thêm 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: Chỉnh sửa Settings Cài đặt tự động trộn.
Để có mã tiền tố đẹp, xếp tầng, tiền tố, hãy bật tùy chọn Xếp tầng trực quan trong cài đặt tiện ích mở rộng.
4. Xem trước đánh dấu
Markdown là ngôn ngữ đánh dấu văn bản đơn giản đáng yêu có thể 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 phong cách khác nhau, Github Flavored Markdown và Standard Markdown.
Có ba chủ đề bạn có thể chọn cho cửa sổ xem trước - Sáng, Tối và Cổ điển. Markdown Preview cũng có tùy chọn đồng bộ cuộn (được bật theo mặc định). Có thể tải xuống tiện ích mở rộng từ Github hoặc từ trình quản lý tiện ích mở rộng Brackets.
Cách sử dụng
Mở tệp .md hoặc .markdown . Nếu bạn đã cài đặt Markdown Preview, nút M should 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 cùng bên phải của phần Xem trước Markdown.
5. Biểu tượng chân đế
Thật thú vị khi thêm gia vị cho trình soạn thảo mã của bạn bằng các biểu tượng tệp. Chân đế Biểu tượng thêm các biểu tượng đầy màu sắc, dựa trên loại tệp, cho 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.
Tiền thưởng:
Biểu tượng chân đế sử dụng các biểu tượng từ dự án Ionicons. Bạn cũng có thể kiểm tra phần mở rộng Biểu tượng tệp (một nhánh của dự án Biểu tượng Brackets) sử dụng các biểu tượng từ dự án Font Awesome. Nó sôi sục đến sở thích cá nhân cuối cùng.
Cách sử dụng
Chỉ cần cài đặt tiện ích mở rộng và tải lại Chân đế (F5).
6. Thanh công cụ Tài liệu
Chân đế thiếu các tab. Thực tế đơn giản. Phần mở rộng Thanh công cụ Tài liệu thêm chức năng này. Tất cả các tệp trong phần 'hoạt động' 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 Thanh công cụ Tài liệu để có giao diện đẹp.
Cách sử dụng
Cài đặt tiện ích mở rộng và tải lại Chân đế (F5).
7. Chân đế Git
Mọi thứ cố gắng để tích hợp với Git những ngày này; đó 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 phần 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 thực hiện các thay đổi từ trong chính dấu ngoặc, đẩy và kéo 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 tốt với Git, bạn sẽ không tìm thấy 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 mình (nếu nó không nằm trong đường dẫn mặc định).
Cách sử dụng
Sử dụng Brackets Git là khá đơn giản. Đặt thư mục repo Github cục bộ của bạn thành thư mục dự án trong Chân đế. Sau đó mở một tập tin, 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à điều này sẽ mở ra khung Git của Brackets ở phía dưới. Nó sẽ liệt kê bất kỳ sửa đổi nào bạn đã thực hiện cho các tập tin của bạn.
Kiểm tra bất kỳ tập tin nào bạn muốn cam kết, sau đó bấm vào nút Cam kết. Điều này sẽ mở ra một cửa sổ bật lên liệt kê những thay đổi được thực hiện. Nhập tin nhắn 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 cho Git trực tiếp từ Brackets!
Sau khi cam kết, chỉ cần nhấp vào nút ấn (nó cũng hiển thị số lượng cam kết không được đồng bộ hóa, như bạn có thể thấy trong GIF ở trên).
Cấu hình cài đặt
Mở khung Gack của Brackets và nhấp vào nút Cài đặt (thứ hai từ bên phải). Hãy thoải mái cấu hình Brackets Git dù sao bạn thích nó.
Để 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 liệt kê đẹp mắt. Chúng tôi đã đề 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 chưa?
8. Lint TẤT CẢ
TẤT CẢ mọi thứ. Mọi điều. Tiện ích mở rộng này gợi ý 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 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 khung.
Cách sử dụng
Để sử dụng Lint ALL Things, chỉ cần chuyển đến tab View và nhấp vào Lint toàn bộ Dự án .
9. Chân đế Todo
Brackets Todo là một phần mở rộng nhỏ gọn hiển thị tất cả các nhận xét TODO trong một định dạng danh sách gọn gàng. Theo mặc định, nó hỗ trợ 5 thẻ - TODO, NOTE, FIXME, THAY ĐỔI và TƯƠNG LAI. Bạn cũng có thể đánh dấu các bình luận là Xong. Trong các tùy chọn xem, bạn có thể lọc bình luận theo thẻ. Chân đế 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 bình luận 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 bình luận 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 trong 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 trong thư mục gốc của dự án.
Bạn có thể đi qua tất cả các tùy chọn cài đặt trong tài liệu github.
Cách sử dụng
Để sử dụng Brackets Todo, chỉ cần thêm một nhận xét vào mã của bạn với một thẻ bên trong. Tên thẻ phải được viết hoa, theo sau là dấu hai chấm (:). Để xem tất cả Todo, chỉ cần nhấp vào biểu tượng Todo trong khung mở rộng bên tay phải.
Cấu hình:
- Để cho phép nhận xét HTML của Todo: 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. Để tập tin này, thêm mã này:
{"regex": {"tiền tố": "(? :)"}}
- Để thay đổi phạm vi tìm kiếm: Thêm mã này vào tệp .todo:
{"tìm kiếm": {"phạm vi": "dự án của tôi"}} - Để loại trừ mọi tệp / thư mục / phần mở rộng tệp khỏi phạm vi tìm kiếm: Thêm mã này vào tệp .todo:
{"tìm kiếm": {"phạm vi": "dự án của tôi",Cấm loại trừFolders
"ElimFiles": ["yourfile"] "ElimFiles": [".yourextension"]}}
10. Làm đẹp
Làm đẹp làm cho mã của bạn trông tốt. Nó sửa chữa không gian, thụt lề và dòng.
Cách sử dụng
Thật dễ dàng để sử dụng Beautify. Tất cả bạn phải làm là chọn một số mã> Nhấp chuột phải > Làm đẹp .
Ngoài ra, bạn có thể đi tới tab Chỉnh sửa và nhấp vào ' Làm đẹp '.
