Sublime Text 3 và đồng bọn Plugins – Trình soạn thảo code tuyệt vời

1
3307
sublime-text-3
sublime-text-3
Sublime Text 3 và đồng bọn Plugins – Trình soạn thảo code tuyệt vời
4.9 (97.6%) 25 votes

GIỚI THIỆU

Bài viết này, mình sẽ hướng dẫn các bạn sử dụng Sublime Text, cài đặt Plugins cho Sublime Text, hướng dẫn sử dụng Plugins Sublime Text.

Hello các bạn ! Trong chúng ta, những người đang là “lập trình viên”, ít nhất cũng đang sử dụng 1 công cụ soạn thảo code “ruột” cho mình, có người dùng Notepad++,PHPStormEclipseVisual Studio Code…hoặc MS Word thần thánh :D. Riêng bản thân mình từ khi mới vào lập trình (mình theo Web PHP) thì đã sử dụng Sublime Text 3 ngay từ đầu rồi và yêu nó luôn rồi. Nó rất nhẹ, dễ cài đặt, có thể dùng miễn phí ko cần mua key (cái này có code cr@ck), màu mè phân biệt rõ ràng, plugins phong phú, hỗ trợ mạnh mẽ.

DOWNLOAD SUBLIME TEXT 3

Các bạn có thể download Sublime Text 3 tại đây hoặc DOWNLOAD (kèm key cr@ck)

Sublime Text 3 và cài đặt plugins
Sublime Text 3 và cài đặt plugins

CÀI ĐẶT PACKAGE CONTROL

Từ khi biết tới Plugin của Sublime Text, mình cảm thấy tốc độ code nhanh hơn hẳn :)), nhưng mình ko khuyến khích các bạn mới code nhé, bạn nào nhập môn thì nên tự code chứ ko nên dùng Plugin, cho quen với việc tra cứu google đi đã, rồi 1 thời gian sau hẵng cài Plugin.

Để cài được Plugin thì các bạn phải cài Package Control trước. Nào ! Mở Sublime Text lên, chọn View -> Show Console hoặc Ctrl + `

Show Console
Show Console

Rồi các bạn Paste dòng này vào phần Console vừa mở ở phía dưới cửa sổ Sublime Text rồi Enter, quá trình cài đặt sẽ bắt đầu tiến hành,  diễn ra trong khoảng 30s.

Link mã code Package : https://packagecontrol.io/installation

Package Control
Package Control

Để cài đặt Plugin các bạn vào Preferences -> Package Control -> Install Package.

CÀI ĐẶT CÁC PLUGIN HỖ TRỢ

1. Emmet

Đây là Plugin giúp gợi ý các thẻ, cú pháp, thuộc tính của HTML và CSS nhanh chóng, rất hữu ích cho các bạn code giao diện HTML/CSS (Ví dụ : gõ html5 -> rồi ấn Tabs).

Emmet
Emmet

2. Bootstrap Snippets & Bootstrap Autocomplete

Hiện tại có 2 phiên bản cho Bootstrap 3 và Bootstrap 4, các bạn dùng Bootstrap nào thì tải plugin tương ứng về, mình thì dùng cả 2 nên tải cả 2 :D. Nó cũng tương tự như plugin Emmet ở trên, hỗ trợ code Bootstrap nhanh chóng, kết hợp cái này với cái trên thì code giao diện nhanh lắm.

Docs của phần Bootstrap Snippets : Plugin này hỗ trợ các gõ nhanh 1 template dựng sẵn của Bootstrap.

Ví dụ : Các bạn muốn làm 1 đoạn code của Navbar trong Bootstrap, thay vì phải lên trang chủ Bootstrap hoặc ở đâu đó để copy đống code đó về, thì đơn giản chỉ cần gõ

bs3-navbar + Tabs là xong.

Bootstrap Snippnet
Bootstrap Snippnet

Docs của phần Bootstrap Autocomplete : Plugin này hỗ trợ gợi ý các class có trong Bootstrap.

Bootstrap Autocompleted
Bootstrap Autocompleted

3. AutoFileName

Plugin này giúp các bạn trỏ tới đúng file cần chèn vào, như các file css – js – image

AutoFileName
AutoFileName

4. Side Bar Enhancements

Cung cấp 1 menu cho Side Bar phong phú đa dạng hơn các tùy chọn

Side Bar Enhancements
Side Bar Enhancements

5. Alignment

Hỗ trợ các bạn trong việc chăn chỉnh tự động các dấu cho đồng đều, thẳng đẹp. Bôi chọn vùng cần căn chỉnh rồi ấn Ctrl + Alt + A

Alignment
Alignment

6.  BracketHighlighter

Hiển thị thẻ đóng và mở để dev có thể dễ nhìn hơn, một plugin rất hữu ích khi code HTML

BracketHighlighter
BracketHighlighter

7. Key bindings format code

Nó ko phải là 1 plugin, mà chỉ là 1 đoạn mã key, thiết lập phím tắt, được mấy cao nhân tìm tòi ra.

Vào Preferences -> Key Bindings -> paste đoạn mã dưới vào phần Default (windows).sublime-keymap – User -> sau đó lưu lại.

[
{ “keys”: [“ctrl+shift+r”], “command”: “reindent” , “args”: { “single_line”: false } }
]

Chỗ Ctrl + Shift + r kia các bạn có thể thay đổi thành phím tắt khác cũng dc, như mình thì mình để tổ hợp phím đó.

Key bindings format code
Key bindings format code

8. Material Theme

Có khá nhiều theme cho Sublime Text, nhưng cá nhân mình thích cái này, nên chia sẻ cho các bạn tham khảo…

Vào Package Control và gõ “material theme” là nó ra

Material Theme
Material Theme

9. Seti_UI

Cái này nó cũng là một theme, có cả hiển thị icon theo các file, các bạn xem minh họa hình dưới. Cách cài đặt thì các bạn vẫn vào Package Control và cài nhé

Seti_UI
Seti_UI

10. Color Highlighter

Ai code CSS sẽ rất thích cái này, support hiển thị màu của mã luôn. Rất tiện lợi.

Color Highlighter
Color Highlighter

11. Color Picker

Lại rất tiện cho ông nào code CSS, chỉ cần ấn Ctrl + Shift + C là show ra bảng màu để chọn một cách dễ dàng.

Color Picker
Color Picker

12. Materialize

Theme này cũng đẹp luôn, khá nhiều tùy chọn, nhưng mình thích giao diện này, vì cột sidebar với cả khung làm việc chính nó cùng màu, nhìn hòa quyện.

Materialize
Materialize

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.