Sublime Text từ lâu đã nổi tiếng vì sự đơn giản, hỗ trợ nhiều Packages, vậy Package là gì ? Package là những gói mở rộng được cộng đồng đóng góp giúp việc quản lý và code một cách đơn giản hơn, chúng ta có thể tải trực tiếp từ bên trong Sublime Text và cài đặt nó một cách đơn giản.
Trang chính thức Package của Sublime Text: //packagecontrol.io/ ở đây bạn có thể tìm thấy những package phổ biến, mới, đang hot nhất.
Cài đặt Package Control
Cách 1: sử dụng phím tắt
Bạn nhấn tổ hợp phím Ctrl + Shift + P [ Command + Shift + P ] và gõ Install Package: Chọn Package Controll:: Install Package
Cách 2: sử dùng CLI của Python
Trên thanh công cụ bạn vào:
View > Show Console
Phím tắt Ctrl + `
Truy cập vào: //packagecontrol.io/installation bạn sẽ thấy đoạn mã sau:
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[ '//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]
Copy đoạn mã trên và dán vào Console sau đó nhấn Enter để cài đặt
Khởi động lại Sublime Text, như vậy bạn đã cài đặt Sublime Text thành công.
Những Package cần thiết sau khi cài Sublime Text
1. Emmet
Đây là package hỗ trợ cho bạn trong việc viết code HTML, HTML quả là cơn ác mộng đối với người lập trình vì các thẻ cứ lặp đi lặp lại giống nhau vì thế Emmet ra đời để giúp các lập trình viên có thể viết code nhanh hơn, thay vì ngồi gõ cả đoạn HTML thật là nhàm chán thì bạn chỉ cần gõ b + tab
Cài như thế nào ?
Bạn nhấn tổ hợp phím Ctrl + Shift + P [ Command + Shift + P ] và gõ emmet:
Sử dụng như thế nào ?
Để có thể sử dụng tốt Emmet bạn cần đọc qua hướng dẫn document tại đây
//docs.emmet.io/cheat-sheet/
Cách dùng
nav>ul>li + Tab
2.Sidebar Enhancements
Đây là package như là cánh tay phải đắc lực của Sublime Text, nó hỗ trợ cho bạn rất nhiều thứ, từ tạo file, thư mục, tìm kiếm, copy path, paste, mở file bằng trình duyệt và rất nhiều thứ chờ bạn khám phá.
Cài như thế nào ?
Bạn nhấn tổ hợp phím Ctrl + Shift + P [ Command + Shift + P ] và gõ SidebarEnhancements:
Sử dụng như thế nào ?
Chuột phải vào thư mục, file trong Sidebar mà bạn muốn thao tác.
3. SublimeCodeIntel
Khi code, đôi khi bạn không thể nhớ tất cả các tính năng của một function việc được nhắc giúp đó giống như cái phao vậy, và SublimeCodeIntel chính là cái phao mình muốn nói đến, nó hỗ trợ cho bạn việc hiển thị, gợi ý khi bạn code, như các functions, biến, object, string ...
4. SublimeLinter
Đôi khi code bạn quên dấu chấm hoặc quên đóng ngoặc và save lại chạy thì bị báo lỗi và không biết lỗi ở đâu. Nhưng với package này, khi bạn gõ sai, hay quên dấu nó sẽ báo đỏ cho bạn biết luôn, tránh mất thời gian quý báu của bạn.
emmet cho phép bạn gõ code html nhanh trong sublime text các bạn nhớ phải cài xong rồi mới gõ được các lệnh như bên dưới ạ
Sau khi cài package control xong gõ Ctrl + shift + P gõ Tìm với package control install package nhấn enter và chọn Emmet đê cài đặt
Hoặc
Các bạn xem thêm các thủ thuật emmet cheat sheet
//docs.emmet.io/cheat-sheet/
Cài plugin jquery để code js nhanh hơn
Cài plugin view in Browser để view trên trình duyệt nhanh hơn!
Mở theo hình
Vào phần settings – User copy dòng này vào
{ "posix": {
"linux": {
"firefox": "firefox -new-tab",
"chrome": "google-chrome",
"chrome64": "google-chrome",
"chromium": "chromium"
},
"linux2": {
"firefox": "firefox -new-tab",
"chrome": "google-chrome",
"chrome64": "google-chrome",
"chromium": "chromium"
},
"darwin": {
"firefox": "open -a \"/Applications/Firefox.app\"",
"safari": "open -a \"/Applications/Safari.app\"",
"chrome": "open -a \"/Applications/Google Chrome.app\"",
"chrome64": "open -a \"/Applications/Google Chrome.app\"",
"yandex": "open -a \"/Applications/Yandex.app\""
}
"win32": {
"firefox": "C:\\Program Files [x86]\\Mozilla Firefox\\firefox.exe -new-tab",
"iexplore": "C:\\Program Files\\Internet Explorer\\iexplore.exe",
"chrome": "C:\\Program Files [x86]\\Google\\Chrome\\Application\\chrome.exe",
"chrome64": "C:\\Program Files [x86]\\Google\\Chrome\\Application\\chrome.exe",
"yandex": "%Local AppData%\\Yandex\\YandexBrowser\\browser.exe"
}
Sử sau khi setup xong lưu lại! sử dụng chỉ cần nhấn CTR + ALT + V
Cách Comment mã code Sublime Text 3
Comment 1 dòng chúng ta sử dụng phím tắt Ctrl + / [Windows] và cmd + / [Mac].
Comment nhiều dòng: chọn dòng cần comment và bấm tổ hợp phím Ctrl + shift + / [Windows] và cmd + alt
Ẩn/hiện Sidebar
Đôi khi bạn cần không gian màn hình rộng hơn để làm việc và ẩn sidebar chắc chắn sẽ là một giải pháp tốt.
Chúng ta giữ phím Ctrl và K + B [Windows] hoặc giữ cmd và K + B [Mac].
Hoặc vào menu view –> side Bar –> Show Side bar
Viết code HTML nhanh hơn với Emmet
Tạo file HTML trong vòng 1 nốt nhạc
Với Emmet, bạn có thể tạo ngay trang HTML trong vòng 1 nốt nhạc. Chỉ cần gõ “!” hoặc html5 rồi nhấn Tab là bạn có ngay một trang HTML5 tiêu chuẩn với một vài tag cơ bản.
Dưới đây là Emmet syntax áp dụng khởi tạo cho các phiên bản HTML khác nhau
- html:5 hoặc ! với HTML5 doctype
- html:xt giành cho XHTML
- html:4s giành cho HTML4 strict doctype
Dễ dàng thêm Class, ID, Text, Attributes
Nếu bạn đã làm quen với CSS thì việc sử dụng Emmet rất đơn giản, bởi vì cú pháp của Emmet rất giống CSS trong việc mô tả các thành phần.
Vd cần thêm thẻ p với class = netweb thì bạn chỉ cần gõ p.netweb –> Tab cái là ra
Các thẻ h1 đến h6 tương tự: H1.netweb
Ví dụ cần thêm thẻ div với id là netweb thì ta cũng chỉ cần gõ div
netweb –> tab 1 cái là ra
Nhân đôi một dòng
Chúng ta dùng phím tắt Ctrl + Shift + D [Windows] hoặc cmd + Shift + D [Mac].
Bài viết mới cập nhập
Hướng dẫn quản lý web bán hàng 2 ngôn ngữ
5 tháng trước, Khác với dịch vụ email theo tên của microsoft và google với chi phí đắt đỏ tầm 1tr/năm/1user, vì thế nên netweb khuyên dùng dịch…