Cách cài đặt và sử dụng plugin Emmet trong Sublime Text 3

Sublime Text 3 hỗ trợ một plugin khá hữu ích trong việc rút ngắn thời gian gõ code. Cách cài đặt và sử dụng plugin Emmet trong Sublime Text 3.

{tocify} $title={Mục lục}

Plugin Emmet là gì?

Emmet là một plugin khá phổ biến trong IDE Sublime Text 3 (IDE lập trình đa ngôn ngữ), nó cung cấp các cú pháp viết tắt đặt biệt cho các ngôn ngữ lập trình. Emmet giúp tối ưu hóa việc gõ các câu lệnh, từ đó rút ngắn đán kể thời gian lập trình. Thay vì phải viết chi tiết từ câu lệnh, với emmet bạn chỉ việc viết tắt các câu lệnh đó theo quy định của emmet là đã có câu lệnh hoàn chỉnh.

Cách cài đặt và sử dụng Emmet

Như đã nó, emmet là một plugin của sublime text 3 nghĩa là bạn phải sử dụng trình soạn thảo code của nó và cài đặt nó qua package control của sublime text 3.

Cách cài đặt Package Control

Bay giờ, khởi động sublime text 3 lên rồi chọn view -> show console hoặc nhấp tổ hợp phím Ctrl + ` (bên trái số 1)

Tiếp theo truy cập vào:

https://packagecontrol.io/installation

Tải xuồng tệp có tên: Package Control.sublime-package

Tại màn hình sublime text 3 chọn Preferences -> Browse Package...

Một cửa sổ hiện lên, bạn trở về một thư mục trước nó và chọn thư mục Installed Packages là nơi lưu file bạn vừa tải về.

Khởi động lại Sublime Text 3 là xong.

Cài đặt plugin Emmet

Khởi động sublime text 3 lên. Tại màn hình của nó chọn Preferences -> Package Control -> Package Control: Install Package hoặc nhấp tổ hợp phím Ctrl + Shift + P chọn Package Control: Install Package.

Gõ emmet rồi tiến hành cài đặt plugin. Chờ một xíu để nó cài đặt.

Hướng dẫn sử dụng Emmet

Sử dụng emmet rất đơn giãn, bạn chỉ cần gõ tắt câu lệnh theo emmet quy định rồi nhấp phím Tab.

Một số ví dụ để sử dụng plugin emmet

Tạo cấu trúc cho trang HTML5 cơ bản. Bạn gõ dấu "!" rồi nhấp tab.

Tạo thẻ HTML: gõ tên thẻ rồi nhấn tab.

div, h1, h2, a, p {codeBox}

Tạo thẻ có thuộc tính class, id: [tên thẻ].[tên class] hoặc [tên thẻ]#[tên id] rồi nhấn tab.

div.header, div#content {codeBox}

Tạo thẻ lòng nhau: rồi nhấp tab.

div>p, a>img, div>a>p{codeBox}

Tạo thẻ có thuộc tính: 

div[style] => <div style=""></div> {codeBox}

Còn nhiều các cách sử dụng khác đang chờ bạn khám phá.

Chúc bạn thành công! Đừng quên ủng hộ mình bằng 1 click quảng cáo nha. Cảm ơn các bạn.