Brackets – Công cụ soạn thảo văn bản

Với sự phát triển như hiện nay, Brackets có nhiều tính năng nổi bật

Chỉnh sửa nhanh

Chỉnh sửa nhanh cho phép chỉnh sửa nội tuyến các thành phần CSS, Thuộc tính màu và JavaScript dành cho nhà phát triển. Tính năng tích hợp này có thể được áp dụng đồng thời cho nhiều chức năng hoặc thuộc tính và tất cả các bản cập nhật được áp dụng trực tiếp cho tệp được liên kết với các thành phần đã thay đổi.

Tệp HTML

Áp dụng chỉnh sửa nhanh cho các phần tử HTML sẽ hiển thị tất cả các thuộc tính CSS tương ứng trong một hộp bên dưới phần tử đã chọn. Người dùng có thể chọn tạo các quy tắc CSS mới trực tiếp trong trình chỉnh sửa và chỉnh sửa nội tuyến các thuộc tính CSS của thẻ mà không cần rời khỏi ngữ cảnh của tệp HTML .

Tệp JavaScript

Trên các hàm JavaScript , chỉnh sửa nhanh thực hiện quy trình tương tự như với các phần tử HTML nhưng nó hiển thị nội dung của hàm được chọn trong hộp thả xuống. Tất cả các cập nhật cho nội dung của hàm sẽ lan truyền và cập nhật trực tiếp trong tệp JavaScript tương ứng .

Tệp chứa thuộc tính màu hex hoặc RGB

Đối với các thuộc tính màu, tính năng chỉnh sửa nhanh sẽ trả về một bộ chọn màu nội tuyến để xem trước và chức năng điều chỉnh màu.

Xem trước trực tiếp

Khi một lần nhấp vào đoạn mã tương ứng trong CSS / HTML , trình duyệt web ngay lập tức hiển thị đầu ra liên quan đến đoạn mã đó trong trình duyệt web. Tính năng này được gọi là Xem trước trực tiếp, tính năng này cũng đẩy các chỉnh sửa mã ngay lập tức tới trình duyệt để hiển thị một trang web được cập nhật khi các nhà phát triển sửa đổi mã. Brackets chứa phần phụ trợ Node.js dự đoán mã sẽ làm gì khi nhà phát triển nhập mã.

Hai kịch bản để xem trước trực tiếp

Không có logic phía sau

Sử dụng Xem trước trực tiếp, Brackets sẽ khởi chạy tệp HTML đã chọn trong Google Chrome bằng cách cung cấp nội dung tĩnh từ máy chủ tích hợp của Brackets . Quy trình này không yêu cầu bất kỳ logic mặt sau nào để hỗ trợ xem các thay đổi đối với tệp HTML

Logic phía sau

Với logic phía sau, Brackets sẽ hướng Google Chrome tới một URL dự án được cung cấp đang chạy trên một máy chủ riêng biệt nhưng nó sẽ tắt hỗ trợ cho các tính năng liên quan đến HTML . Do đó, trình duyệt sẽ không thể cập nhật bất kỳ tệp HTML , PHP , v.v. nào trong thời gian thực và tính năng tô sáng phần tử cũng sẽ bị tắt đối với các tệp này. Chỉ các chỉnh sửa và đánh dấu phần tử liên quan đến tệp CSS mới được phản ánh trong thời gian thực.

Thay vào đó, tất cả các bản cập nhật tệp không phải CSS sẽ được tự động tải lại. Những hạn chế này tồn tại do cung cấp chức năng chỉnh sửa trực tiếp cho HTML các tệp yêu cầu đưa chú thích vào mã HTML trước khi mã được tải vào trình duyệt .

Những lần  này thường được xử lý bởi máy chủ tích hợp của Brackets , nhưng chúng không tồn tại khi các dự án sử dụng các máy chủ cá nhân riêng biệt .

Chức năng

Cập nhật thời gian thực HTML & CSS (không cần tải lại)

Đánh dấu phần tử : Các phần tử được chọn trong tệp HTML và CSS được tô sáng trong trình duyệt .

Giới hạn xem trước trực tiếp

Hiện chỉ hoạt động với Google Chrome dành cho máy tính để bàn (không phải Chromium mã nguồn mở ), làm trình duyệt đích .

Việc mở các công cụ dành cho nhà phát triển trong Google Chrome sẽ đóng tất cả các kết nối phát triển trực tiếp.

Tất cả các tệp được xem phải nằm trong một thư mục hiện đang mở trong Chân đế.

Mỗi lần chỉ có thể xem trước một tệp HTML .

Cập nhật theo thời gian thực bị tạm dừng khi gặp phải HTML không hợp lệ về mặt cú pháp . Brackets sẽ tiếp tục đẩy các thay đổi vào trình duyệt khi cú pháp được sửa.

Chia nhỏ chế độ xem

Tính năng này chia giao diện chính thành hai phần. Người dùng có thể phân chia chế độ xem theo chiều dọc hoặc chiều ngang tùy theo sự thuận tiện của họ, do đó cho phép người dùng làm việc trên hai tệp cùng một lúc. Nhà phát triển có thể đồng thời làm việc trên hai tệp khác nhau thuộc hai loại khác nhau, hai tệp cùng loại hoặc thậm chí hai phần khác nhau của cùng một tệp cùng một lúc. Các tính năng như Xem trước trực tiếp và Chỉnh sửa nhanh hoạt động ở cả hai chế độ xem.

Hỗ trợ nhiều định dạng tệp

Bracket hỗ trợ mã từ nhiều loại tệp từ C++ , C , VBScript đến Java , JavaScript , HTML , Python , Perl và Ruby . Danh sách đầy đủ bao gồm hơn 38 loại tệp. Điều này cho phép người dùng linh hoạt làm việc đồng thời trên nhiều tệp khác nhau của một dự án.

Bracket hỗ trợ một tính năng gọi là "ống kính PSD" giúp trích xuất mượt mà từng hình ảnh, logo và kiểu thiết kế từ tệp PSD mà không cần mở Photoshop để kiểm tra chúng. Bằng cách gọi tính năng này là bản xem trước, Adobe truyền đạt rằng còn nhiều việc phải làm trước khi tính năng này có thể được hoàn thiện. Tính năng này đã nhận được đánh giá tích cực từ các nhà phát triển, nhưng nhiều vấn đề đã được báo cáo trong giai đoạn đầu của quá trình phát hành tính năng. Vấn đề sau đó đã được giải quyết bằng cách sử dụng tiện ích mở rộng.

Tích hợp Theseus

Bracket tích hợp Theseus, một trình gỡ lỗi JavaScript mã nguồn mở cho phép các nhà phát triển thiết lập các điểm ngắt, chuyển qua mã và kiểm tra giá trị của các biến trong thời gian thực. Có thể sử dụng Theseus để gỡ lỗi bất kỳ tiện ích mở rộng nào trong Chân đế và được cài đặt dễ dàng bằng trình quản lý tiện ích mở rộng tích hợp . Theseus cũng hoạt động cùng với Live Preview thông qua một máy chủ proxy ghi lại một chức năng và các giá trị liên quan của nó mỗi khi chức năng được gọi.

Tiện ích mở rộng

Được xây dựng bằng HTML , CSS và JavaScript , các nhà phát triển có thể cung cấp chức năng bổ sung cho Bracket bằng cách tạo các tiện ích mở rộng . Bạn có thể tìm và cài đặt các tiện ích mở rộng này bằng trình quản lý tiện ích mở rộng tích hợp sẵn . Tiện ích mở rộng cũng có thể được tìm thấy trực tuyến qua Cơ quan đăng ký tiện ích mở rộng Bracket.