Hướng dẫn cài emmet cho sublime text năm 2024
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. Show
Trang chính thức Package của Sublime Text: https://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 ControlCách 1: sử dụng phím tắtBạn nhấn tổ hợp phím Ctrl + Shift + P ( Command + Shift + P ) và gõ Install Package: Chọn Cách 2: sử dùng CLI của PythonTrên thanh công cụ bạn vào:
Phím tắt Ctrl + ` Truy cập vào: https://packagecontrol.io/installation bạn sẽ thấy đoạn mã sau:
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 Text1. 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 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
Cách dùng
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. SublimeCodeIntelKhi 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 sheethttps://docs.emmet.io/cheat-sheet/ Cài plugin jquery để code js nhanh hơnCà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": { },
"nt": { },
"browser": "chrome64"
}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 3Comment 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 EmmetTạ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
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à raNhân đôi một dòngChú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ậpHướ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… |