Contents
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ẽ.
- Những đoạn code jQuery hữu ích cho người mới học
- Chia sẻ theme HTML5/BOOTSTRAP3, giao diện website miễn phí
- Download PSD template website dành cho cắt HTML/CSS
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 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.
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.
khai xuân phát nào