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