Hướng dẫn cài đặt Package Control cho Sublime Text 3 và một số package hỗ trợ thiết kế website

Sublime Text 3 là một bộ công cụ soạn thảo code mạnh mẽ cho các lập trình viên. TBit cũng đã có bài giới thiệu về phần mềm này TẠI ĐÂY. Ngoài giao diện đẹp, tốc độ xử lý nhanh,... thì vấn đề quan trọng nhất là Sublime Text 3 hỗ trợ Package Control, cho phép bạn cài đặt hàng nghìn package hỗ trợ cho các công việc viết code: HTML, CSS, JS, PHP, Java, C/C++,... một cách nhanh chóng và thuận tiện.

​

Hướng dẫn cài đặt Package Control
Kiểm tra xem bạn đã cài đặt Package Control chưa bằng cách nhấn tổ hợp phím Ctrl+Shift+P và gõ vào từ khóa tìm kiếm Package Control: Install Package (bạn có thể gõ tắt bất cứ từ nào cho nhanh, ví dụ:pcip, packconip ,...). Nếu thấy hình như bên dưới thì bạn đã cài đặt Package Control rồi, nên không phải thực hiện các bước cài đặt nữa.

​

Nếu chưa cài đặt Package Control bạn thực hiện các bước sau (cần kết nối mạng Internet):​

1. Truy cập trang web: https://packagecontrol.io/installation​
2. Copy đoạn mã như trong hình dưới:​
   • ​
3. Trong Sublime Text 3 chọn View/Show Console hoặc nhấn tổ hợp phím Ctrl+` (bên trái phím 1)​
4. Paste đoạn mã vừa copy ở bước 2 vào đoạn nhắc lệnh của Console (phía dưới).​
5. Nhấn Enter và đợi chương trình cài đặt.​
6. Khởi động lại Sublime Text 3 là bạn đã có Package Control​

Sau khi cài đặt xong, bạn có thể cài thêm các Package bằng cách nhấn tổ hợp phím Ctrl+Shift+P rồi gõ từ khóa Package Control: Install Package (có thể gõ tắt), đợi một chút rồi rồi gõ từ khóa của package bạn muốn cài vào, nhấn Enter và đợi quá trình cài đặt diễn ra. Ảnh dưới là ví dụ khi gõ từ khóa Emmet.

​

Một số package hỗ trợ thiết kế website:

1. Emmet
Đây là package tuyệt vời cho phép chúng ta gõ tắt code HTML&CSS. Cách dùng là gõ các cú pháp gõ tắt mà emmet hỗ trợ sau đó ấn tab để thực hiện.

​

• Giống như các plugin khác giúp bạn viết code nhanh hơn. Sự khác biệt ở đây là thay vì expresions JS, Emmet là cho HTML và CSS, cho phép bạn viết thẻ dài, các yếu tố lồng nhau ...
• Emmet có một chút phức tạp, vì vậy nếu muốn có một sự thay thế đơn giản, bạn có thể thử một plugin tương tự gọi là HTML Snippets và/hoặc CSS Snippets. Nó có tính năng ít hơn, nhưng là cách dễ dàng hơn để sử dụng, và có tài liệu hướng dẫn sử dụng đơn giản, tuyệt vời.
• Link hướng dẫn cài đặt và cách sử dụng https://packagecontrol.io/packages/Emmet

2. JavaScript & NodeJS Snippets

• Các đoạn viết tắt biểu thức JavaScript phổ biến nhanh hơn nhiều. Tại sao viết document.querySelector('selector'); khi bạn có thể chỉ cần gõ qs, nhấn tab, và để cho Sublime làm phần còn lại.

​

• Link hướng dẫn cài đặt và sử dụng: https://packagecontrol.io/packages/JavaScript & NodeJS Snippets

3. Advance New File

• Gói tuyệt vời này có thể tạo ra các tập tin mới với tốc độ nhanh. Thay vì duyệt qua các thư mục, và sử dụng các menu, bạn chỉ cần mở một dấu nhắc với ctrl + alt + n và viết đường dẫn đến tập tin mới của bạn.
• Các plugin cũng sẽ bổ sung thêm bất kỳ thư mục không tồn tại từ đường dẫn, và thậm chí còn hỗ trợ tự động hoàn tất các tên thư mục.

​

• Link hướng dẫn cài đặt và cách sử dụng: https://packagecontrol.io/packages/AdvancedNewFile

4. ColorPicker

• Bộ chọn màu hữu ích, rất đơn giản và tuyệt vời để nhanh chóng lấy các giá trị hex màu. Plugin này sẽ mở ra trong một cửa sổ riêng biệt và cho phép bạn chọn một màu từ một bảng màu hoặc sử dụng một ống nhỏ để tìm màu sắc từ bất cứ nơi nào trên màn hình của bạn.

​

• Link hướng dẫn sử dụng và cài đặt: https://packagecontrol.io/packages/ColorPicker

5. Color Highlighter

• Một tính năng mà bạn có thể thấy trong nhiều IDE khác và các trình biên tập văn bản, nhưng lại thiếu trong Sublime, là xem trước màu. Sử dụng Color Highlighter bạn có thể bật nó trong Sublime Text, cho phép bạn xem tất cả các giá trị hex và RGBA được dịch sang màu như thế nào, trực tiếp trong style sheet (css) của bạn

​

• Link hướng dẫn sử dụng và cài đặt : https://packagecontrol.io/packages/Color Highlighter

6. Placeholders

​

• Sublime Text 3 có bộ tạo sẵn Lorem Ipsum mà bạn có thể sử dụng để tạo văn bản giả. Plugin Placeholders mở rộng chức năng đó và cho phép Sublime Text tạo ra một cách nhanh chóng cho hình ảnh*(image), form, list và table của placeholder.
• Link hướng dẫn sử dụng và cài đặt: https://packagecontrol.io/packages/Placeholders

Ngoài ra Sublime Text còn có rất nhiều Package khác hỗ trợ các ngôn ngữ, giao diện, sử dụng,... mà bạn có thể tự mình khám phá, tìm kiếm để cài đặt hoặc xem chi tiết TẠI ĐÂY (gõ từ khóa gói hoặc ngôn ngữ mà bạn muốn).