Chủ Nhật, 17/11/2019
News
Home » Software » Công cụ soạn thảo Sublime Text

Công cụ soạn thảo Sublime Text

sublime-tex

Đối với dân Coder nói chung và WordPress Developer nói riêng thì việc tìm cho mình một code editor hỗ trợ việc tô màu để dễ nhận dạng các hàm, các biến trong quá trình thực hiện là một điều vô cùng cần thiết.

Hiện nay có rất nhiều phần mềm hỗ trợ soạn thảo miễn phí cũng như có phí được sử dụng rộng rãi. Trước đây mình sử dụng Notepad++ để soạn thảo, nhưng từ ngày biết đến Sublime Text thì mình đã chuyển qua sử dụng nó luôn. Vì sao? Vì nó có rất nhiều ưu điểm, mà ưu điểm mình thích nhất là có nhiều Package hỗ trợ cho quá trình gợi nhớ và hoàn thành các hàm. Nó sẽ giúp giảm thời gian code xuống mức thấp nhất và tránh các lỗi sai cú pháp.

Nói đến Sublime Text thì có nhiều ưu điểm:

  • Miễn phí (nếu bạn không mua bản trả phí thì mỗi 20 lần save nó sẽ hiện thông báo kêu mua, bạn chỉ cần bỏ qua là được :)).
  • Nhẹ và có bản Portable để có thể chép vào USB và mang đi bất kỳ đâu mà không cần cấu hình lại.
  • Tự động sao lưu vào bộ nhớ đệm, có nghĩa là đang code mà cúp điện thì mở lên thì code bạn vẫn còn ở đó.
  • Hỗ trợ rất nhiều plugin.
  • Hỗ trợ tùy chỉnh xem nhiều cột, nghĩa là bạn có thể code cùng một lúc nhiều file mà không cần chuyển tab.

Hướng dẫn cài đặt Sublime Text

Hiện tại thì có hai bản là Sublime Text 2 (bản chính thức) và Sublime Text 3 (bản beta).

Trang chủ: http://www.sublimetext.com/

Các bạn vào phần download của nó và lựa chọn bản phù hợp với mình. Mình khuyên các bạn nên sử dụng bản Portable (chỉ có trên Windows) vì có thể copy vào USB mang đi nơi khác sử dụng mà không cần cấu hình lại.

Download Sublime Text 2

Download Sublime Text 3

Cài xong bạn chạy chương trình và màn hình khởi động đầu tiên sẽ như thế này.

Giao diện Sublime Text

Nhìn hơi xấu xí tí thôi, nhưng sức mạnh thì tràn trề đó nhé. Bây giờ chúng ta sẽ tiến hành cài các plugin cần thiết cho nó cái đã, nhưng trước khi cài plugin thì chúng ta cần cài một plugin cực kỳ quan trọng mang tên Package Control, công dụng của nó là có thể cài đặt các plugin khác có trong thư viện Package Control để bạn cài plugin nhanh chóng mà không cần đụng chạm vào thư mục cài đặt.

Để cài Package Control, bạn vào View -> Show Console hoặc nhấn tổ hợp phím ctrl+`. Lúc này bạn sẽ thấy một bảng console nhỏ phía dưới, hãy copy đoạn code dưới đây và paste vào khung nhập lệnh rồi ấn Enter.

Hiển thị cửa sổ Console cho Sublime Text

  • Sublime Text 2
  • Sublime Text 3

Khi bạn thấy console nó hiện lên log như thế này nghĩa là cài đặt Package Control thành công.
Nếu không đúng thì bạn xem đã chọn đúng phiên bản chưa nhé.
Còn nếu như đoạn code trên bị lỗi thì bạn có thể vào đây để copy lại.

Cài đặt Package Control cho Sublime Text

Giờ thì bạn có thể ấn nút Esc để tắt cái console đi. Cuối cùng là khởi động lại Sublime Text nhé.

Cách cài một plugin thông qua Package Control

Để cài một plugin bất kỳ cho Sublime Text thông qua Package Control này, bạn ấn tổ hợp phím Ctrl+Shift+P (Win, Linux) hoặc ++P (OS X) để mở thanh tác vụ nhanh, sau đó gõ install, bạn sẽ thấy một tác vụ mang tên Package Control: Install Package, đó chính là tính năng cài plugin cho Sublime Text. Các bạn ấn chọn nó hoặc ấn Enter để nó tự chọn nhé.

Sau đó, một bảng tìm kiếm plugin cho Sublime Text sẽ hiển thị như thế này.

Tìm plugin cho Sublime Text

Ở đây, muốn cài plugin nào chỉ cần gõ tên plugin đó ra và Enter, quá nhanh phải không? Nhưng cài plugin nào thì đó mới là vấn đề vì không phải plugin nào bạn cũng cần.

Các plugin dùng cho WordPress

WordPress

Công dụng tự động gợi ý các hàm có sẵn của WordPress khi bạn gõ đúng một vài chữ cái trùng với tên hàm cần dùng.

Emmet

Emmet hay còn gọi là Zen Coding, là plugin thêm vào các IDE giúp bạn viết HTML và CSS nhanh hơn thông thường bằng việc tự hoàn thành các thẻ thông qua một số cú pháp nhất định.
Cách sử dụng Emmet Documentation.

Prefixr

Công dụng giúp bạn bổ sung thêm một số thuộc tính CSS với các cú pháp riêng của từng trình duyệt để hoạt động tốt trên từng trình duyệt khác nhau. Ví dụ, nếu bạn viết thuộc tính border-radius: 10px thì sau khi dùng plugin này cập nhật lại, nó sẽ thành:

Color Picker

Công cụ chọn mã màu rất tiện lợi khi bạn viết CSS.

Cách sử dụng:

  • Linux: ctrl+shift+c
  • Windows: ctrl+shift+c
  • OS X: cmd+shift+c

Bootstrap 3 Snippets

Plugin tuyệt vời hỗ trợ thiết kế giao diện bằng Bootstrap 3. Cách sử dụng: Ctrl+Shift+P sau đó gõ vào bs3 rồi lựa chọn các Component của Bootstrap 3.
Tài liệu hướng dẫn

Foundation 5 Snippets

Plugin hỗ trợ tự động thêm các Component của Foundation 5. Tương tự như Bootstrap 3 Snippets.
Cách sử dụng: Ctrl+Shift+P sau đó gõ vào zf rồi lựa chọn.
Tài liệu hướng dẫn

1 Star2 Stars3 Stars4 Stars5 Stars6 Stars7 Stars8 Stars9 Stars10 Stars (1 votes, average: 10,00 out of 10)
Loading...

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *

*

:cuoi: :hix: :hihihi: :kiss: :sexy: :dotay: :ngacnhien: :oh: :love: more »