Ngay khi bạn bắt đầu phát triển một trang web, công cụ đầu tiên bạn sử dụng là trình chỉnh sửa văn bản, cho dù công cụ đó chỉ đơn giản như sổ tay hay một IDE được sử dụng rộng rãi.
Trong tập này, Addy và Matt sẽ xem xét bộ sưu tập trình bổ trợ của họ cho Sublime Text (Văn bản phụ) và thảo luận về cách từng trình bổ trợ hỗ trợ quy trình công việc.
Kiểm soát gói hàng
Để tải các gói (hoặc trình bổ trợ) được tham chiếu trong tập đó, bạn cần cài đặt Package Control (Quản lý gói). Công cụ này rất dễ cài đặt và bạn có thể xem hướng dẫn về cách thực hiện tại đây.
JSHint
JSHint là một công cụ linter JavaScript kiểm tra JavaScript và làm nổi bật mọi lỗi có thể xảy ra hoặc các phương pháp không hợp lệ trong mã của bạn.
Ví dụ: nếu bạn vô tình nhập sai tên biến, như
dưới đây, thì JSHint sẽ chỉ ra rằng fo chưa từng được xác định và sẽ gây ra lỗi.
var foo = { bar: 'Hello, World.' };
var msg = fo.bar;
Trình bổ trợ JSHint chỉ ra các vấn đề bằng cách hiển thị một hộp màu vàng xung quanh văn bản có liên quan và đặt con trỏ vào đoạn mã đó sẽ dẫn đến một thông báo lỗi xuất hiện ở dưới cùng bên trái của Sublime.
Các vấn đề khác mà dịch vụ này có thể phát hiện được bao gồm:
- Biến được xác định nhưng chưa bao giờ được sử dụng
- Tránh tạo hàm bên trong vòng lặp
- Sử dụng các phương pháp so sánh phù hợp
Để cài đặt Gói SublimeLinter-JSHint, bạn cũng cần cài đặt gói SublimeLinter và làm theo hướng dẫn cài đặt trên trang Gói SublimeLinter-JSHint.
Một số nhà phát triển có thể thấy hữu ích khi đưa trình bổ trợ JSHint Gutter vào. Thao tác này sẽ đặt một dấu chấm nhỏ trong rãnh của bất kỳ dòng nào có vấn đề JSHint.
Hàm JSCS
JSCS sẽ làm nổi bật mọi vị trí mà JavaScript của bạn không tuân theo một kiểu lập trình cụ thể.
Ví dụ: bạn có thể sử dụng JSCS để xác định xem có nên sử dụng dấu cách sau các từ khoá (như "if") hoặc xác định xem dấu ngoặc nhọn nên nằm trên cùng một dòng hay trên một dòng mới của phương thức.
Gói SublimeLinter-JSCS làm nổi bật mọi vấn đề cùng dòng theo kiểu tương tự như JSHint, giúp bạn dễ dàng khắc phục mọi vấn đề.
Điều này cực kỳ hữu ích khi làm việc trong một nhóm vì mọi người đều có thể làm theo cùng một hướng dẫn định kiểu và giữ cho mã của bạn được nhất quán.
Điều tuyệt vời nhất là với gói JSCS-Formatter, bạn có thể tự động khắc phục mọi vấn đề trên trang bằng cách nhấn ctrl + shift + p, nhập "JSCS For + định dạng tệp này: Định dạng tệp này" rồi nhấn Enter. Bạn tìm hiểu thêm trong bài đăng trên blog của Addy.
Bút đánh dấu màu
Công cụ đánh dấu màu sẽ thêm màu vào nền của bất kỳ định nghĩa màu nào trong CSS hoặc Sass.
Bạn có thể xác định xem hình ảnh này sẽ hiển thị dưới dạng dấu gạch dưới với nền đầy đủ khi bạn di chuột qua hay luôn hiển thị màu trên nền định nghĩa. Chỉ cần chuyển đến "Cài đặt gói" > "Công cụ đánh dấu màu" > "Cài đặt - Mặc định" để xem các chế độ cài đặt ban đầu và thay đổi chế độ cài đặt trong phần "Cài đặt – Người dùng".
Để làm nổi bật toàn bộ nền, hãy thêm đoạn mã sau vào tệp "Cài đặt – Người dùng":
{
"ha_style": "filled"
}
Màu trong rãnh
Màu trong rãnh là một lựa chọn thay thế cho công cụ đánh dấu màu, thay vì hiển thị màu ở đầu biến màu, công cụ này sẽ đặt màu vào rãnh của đường kẻ đó.
Công cụ chọn màu
Nếu cần một cách nhanh chóng và dễ dàng để chọn một màu trên màn hình, thì bạn có thể sử dụng Gói công cụ chọn màu.
Nhấn ctrl + shift + c rồi tiếp tục bật – bạn đã có công cụ chọn màu.
AutoFileName
AutoFileName là một trình bổ trợ nhỏ đơn giản, cung cấp cho bạn danh sách các tệp có thể có khi bạn nhập. Cách này cực kỳ tiện dụng nếu bạn đang cố nhập tên hình ảnh hoặc thêm tệp CSS hoặc JS vì cách này giúp bạn tiết kiệm thời gian và quan trọng hơn là giúp giảm nguy cơ mắc lỗi chính tả.
Công cụ tiền tố tự động
Tất cả chúng ta đều đã có khoảnh khắc nhận ra rằng mình đã quên thêm thuộc tính CSS có tiền tố. Với Công cụ tiền tố tự động, bạn chỉ cần chạy công cụ này trên CSS của mình và công cụ này sẽ thêm tất cả các tiền tố mà bạn cần.
Điều đó có nghĩa là chúng tôi bắt đầu từ đây..
.container-thingy {
display: flex;
flex-direction: column;
align-items: flex-start;
}
..vào các URL sau, bạn chỉ cần nhấn ctrl + shift + p rồi nhập "CSS tự động tiền tố" rồi nhấn Enter.
.container-thingy {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
Bạn cũng có thể xác định những trình duyệt và phiên bản trình duyệt mà bạn muốn hỗ trợ trong phần cài đặt gói. Hãy xem trang Kiểm soát gói để biết thêm thông tin.
Khác...
Có rất nhiều trình bổ trợ khác dành cho Sublime Text, vì vậy, hãy nhớ khám phá phần Package Control (Kiểm soát gói).
Để biết thêm lời khuyên và mẹo hay, bạn nên xem bộ trang trình bày tuyệt vời của WesBos về các phím tắt và các trình bổ trợ khác cho Sublime Text.
WesBos cũng đã viết một cuốn sách có tiêu đề "Văn bản tuyệt vời dành cho người dùng thành thạo" mà có thể những người tuyệt vời của bạn cũng sẽ quan tâm :)