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++,PHPStorm, Eclipse, Visual 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)
Cài đặt:
Bạn vào đường dẫn chỉnh sửa vào thêm vào file host những dòng sau: C:\Windows\System32\drivers\etc
127.0.0.1 www.sublimetext.com
127.0.0.1 license.sublimehq.com
Tiếp theo dùng Key sau để Active nhé:
-----
BEGIN LICENSE -----
sgbteam
Single
User License
EA7E-1153259
8891CBB9
F1513E4F 1A3405C1 A865D53F
115F202E
7B91AB2D 0D2A40ED 352B269B
76E84F0B
CD69BFC7 59F2DFEF E267328F
215652A3
E88F9D8F 4C38E3BA 5B2DAAE4
969624E7
DC9CD4D5 717FB40C 1B9738CF
20B3C4F1
E917B5B3 87C38D9C ACCE7DD8
5F7EF854
86B9743C FADC04AA FB0DA5C0
F913BE58
42FEA319 F954EFDD AE881E0B
------ END
LICENSE ------
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 + `
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.
SUBLIME TEXT 3
import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)Link mã code Package : https://packagecontrol.io/installation
Để 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).
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.
Docs của phần Bootstrap Autocomplete : Plugin này hỗ trợ gợi ý các class có trong Bootstrap.
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
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
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
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
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 đó.
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
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é
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.
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.
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.
EmoticonEmoticon