Tổng hợp phím tắt thủ thuật code của Sublime Text 3
Nội dung
- Link download Sublime Text 3:
- Cài đặtpackage control sublime text
- Cài đặtEmmet choSublime Text 3
- Các bạn xem thêm các thủ thuật emmet cheat sheet
- Cài pluginjquery để code js nhanh hơn
- Cài plugin view in Browser để view trên trình duyệt nhanh hơn!
- CáchComment mã codeSublime Text 3
- Ẩn/hiện Sidebar
- Viết code HTML nhanh hơn với Emmet
Link download Sublime Text 3:
//www.sublimetext.com/3
Cài đặtpackage control sublime text
//packagecontrol.io/installation
Cài đặtEmmet choSublime Text 3
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àipackage control xong gõCtrl + shift + P gõ Tìm vớipackage 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 pluginjquery để 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\"" } }, "nt": { "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" } }, "browser": "chrome64" }Sử sau khi setup xong lưu lại! sử dụng chỉ cần nhấn CTR + ALT + V
CáchComment mã codeSublime Text 3
Comment 1 dòng chúng ta sử dụng phím tắtCtrl + /[Windows] vàcmd + /[Mac].
Comment nhiều dòng: chọn dòng cần comment và bấm tổ hợp phímCtrl + 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ímCtrl và K + B[Windows] hoặcgiữ 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 trongvòng1 nốt nhạc.Chỉ cần gõ !hoặchtml5rồinhấnTab 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:5hoặc!với HTML5 doctype
- html:xtgiành cho XHTML
- html:4sgià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ẻ h2 đế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ắtCtrl + Shift + D[Windows] hoặccmd + Shift + D[Mac].
Bài viết mới cập nhập
Quản lý mẫu web dự án bất động sản
3 tuần trước, 148 Lượt xemXin chào tất cả các khách hàng dùng mẫu web dự án bất động sản bên netweb, sau đây netweb.vn xin hướng dẫn các bạn
Kích hoạt Gutenberg Editor cho các sản phẩm WooCommerce
1 tháng trước, 34 Lượt xemTrình chỉnh sửa khối Gutenberg cũng có thể được sử dụng cho mô tả sản phẩm WooCommerce.Thật không may, không phải là tiêu chuẩn, nhưng
Plugin đăng tin search tìm kiếm theo tỉnh thành quận huyện bất động sản
1 tháng trước, 768 Lượt xemPlugin search tìm kiếm theo tỉnh thành quận huyện bất động sản, lọc theo khoảng giá, lọc theo diện tích, lọc theo hình thức nhà
Hướng dẫn Việt hóa theme WordPress với Loco Translate thành công 100%
2 tháng trước, 916 Lượt xemChào các bạn nhiều bạn trong quá trình sử dụng wordpress thì không biết làm thế nào để việt hóa 1 theme tiếng anh qua
Plugin contact liên hệ Phone, zalo, facebook, telegram, skype cực đẹp cho website wordpress
2 tháng trước, 1116 Lượt xem1. Plugin liên hệ Phone, zalo, facebook, telegram, skype Netweb ra mắt Plugin NetwebContactButton liên hệ qua điện thoại, facebook, zalo, telegram, skyle, là 1