Ngay khi bạn bắt đầu phát triển một trang web, công cụ đầu tiên bạn sẽ sử dụng là một trình chỉnh sửa văn bản, cho dù là đơn giản như sổ tay hay luôn sẵn sàng IDE (môi trường phát triển tích hợp).
Trong tập này, Addy & Matt xem bộ sưu tập trình bổ trợ của họ cho Sublime Text và thảo luận về cách đều hỗ trợ quy trình làm việc của họ.
Kiểm soát gói hàng
Để lấy các gói (hoặc trình bổ trợ) được tham chiếu trong tập này, bạn cần phải cài đặt Package Control (Kiểm soát gói), rất đẹp và đơn giản và bạn có thể tìm thấy hướng dẫn cách thực hiện tại đây.
JSHint
JSHint là một công cụ tìm lỗi mã nguồn JavaScript giúp kiểm tra JavaScript của bạn và đánh dấu mọi lỗi có thể xảy ra hoặ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, 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 chỉ ra các vấn đề bằng cách cho thấy một ô màu vàng xung quanh và đặt con trỏ vào đoạn mã đó sẽ dẫn đến lỗi thông báo được hiển thị ở góc dưới bên trái của Sublime.
Các vấn đề khác mà Bard phát hiện được là:
- Các 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 pháp 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 Hàm khởi chạy JSHint trình bổ trợ. 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 (Mã số sản phẩm thương mại toàn cầu)
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 hay không được sử dụng sau từ khoá, như "if", hoặc xác định xem có dấu ngoặc nhọn hay không phải nằm trên cùng một dòng hoặc 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 nói đến làm việc trong một 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 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 bất kỳ định nghĩa màu nào trong CSS hoặc Sass của bạn.
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 thêm phần sau vào phần "Cài đặt – Người dùng" tệp:
{
"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ả.
Tiền tố tự động
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ố. Bằng Tiền tố tự động bạn chỉ cần chạy nó trên CSS của bạn và nó sẽ hãy 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. Xem trang Kiểm soát gói hàng để 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ăn bản tuyệt vời), hãy nhớ khám phá phần Package Control (Kiểm soát gói).
Để có thêm lời khuyên và mẹo, bạn nên để xem tài liệu trình bày tuyệt vời 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à "Văn bản tuyệt vời cho người dùng thành thạo" mà bạn cũng có thể quan tâm đến những người tuyệt vời :)