Gợi ý code trong Sublime Text cực kỳ cần thiết [mới nhất 2024]

Sublime Teхt là một trong những trình ѕoạn thảo phổ biến nhất hiện naу. So ᴠới Atom haу VSCode, Sublime chiếm ưu thế hơn hẳn nhờ tốc độ nhanh, giao diện đơn giản, ᴠà có đầу đủ các tính năng mạnh mẽ.

Để khai thác hết khả năng của Sublime, ATP Web sẽ Gợi ý code trong Sublime Text cần thiết cho bạn.

Sublime Text 3 

Để dùng được Emmet trên Sublime Text 3 thì chúng ta phải thiết lập thông qua Package Control. Chỉ dẫn cài đặt các bạn sẽ xem tại đây nhé.

Nếu như bạn nào chưa biết thì mình hướng dẫn ở đây luôn:

• Mở Sublime Text lên, gõ Ctrl + Shift + P, gõ Install Package, gõ tiếp Emmet và thiết lập plugin này cho Sublime Text.

Ngoài ra, bạn sẽ download Emmet rồi cài đặt bằng tay cho IDE tương ứng.

Gợi Ý Code Trong Sublime Text 

Bây giờ chúng ta sẽ sử dụng Emmet để code nhanh nhé.

1. Tạo tệp HTML trong vòng 1 nốt nhạc

Với Emmet, bạn sẽ 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 chuẩn mực với một vài tag căn bản.

Dưới đây là Emmet syntax áp dụng hình thành cho các phiên bản HTML không giống nhau

• html:5 hoặc ! với HTML5 doctype
• html:xt dành cho XHTML
• html:4s dành cho HTML4 strict doctype

2. Thêm Class, ID, Text, Attributes dễ dàng

Nếu bạn đã làm quen với CSS thì việc vận dụng Emmet rất dễ dàng, bởi vì cú pháp của Emmet rất giống CSS trong việc miêu tả các thành phần.

Ví dụ, thay vì viết <p class=”hcode”></p> ta chỉ cần viết p.hcode.

Tương tự, chúng ta có khả năng thêm cùng lúc đó class <p class=”hung” id=”hcode”></p>u

3. Lồng ghép các thẻ HTML

Đây chính là tính năng tuyệt vời mà chúng ta hay vận dụng. Emmet cho phép dùng các toán tử >,+,^ để bạn kết hợp làm ra nhiều dòng code khi chỉ cần gõ 1 dòng đơn giản.

Cụ thể:

• > cho phép lồng ghép hai tags với nhau, theo một cách khác.
• + cho phép đặt các thẻ ngang cấp với nhau
• ^ cho phép đưa tag lên cấp cao hơn trong cấu trúc cây HTML.

4. Nhóm các Tags

Bạn có thể nhóm các đoạn mã lại với nhau dùng dấu ngoặc đơn (). VD khi gõ, (.hcode>h1)+(.hung>h2) ta sẽ được:

<div class="hcode"> <h1></h1> </div> <!-- /.hcode --> <div class="hung"> <h2></h2> </div> <!-- /.hung -->

5. Tự động thêm Tags con

Khi khai báo tag cùng class, bạn viết div.item, Emmet sẽ làm ra

Nếu như bạn quên không viết div mà chỉ viết mỗi .item, Emmet vẫn sinh ra code giống trên.

Đó là tính năng rất thông minh của Emmet – tự động kiểm tra tag cha để mỗi khi bạn viết tắt Emmet sẽ tự động hoàn thiện những gì bạn quên. VD, khi khai báo .item trong thẻ thì Emmet sẽ cho ra kết quả chứ chẳng phải là như ở trên. Đây là cách viết tắt giúp chúng ta code nhanh hơn.

Danh sách tên tag con mà Emmet hỗ trợ

• li cho ul và ol;
• tr cho table, tbody,thead và tfoot;
• td cho tr;
• option cho select và optgroup.

6. Thêm nhiều tag giống nhau

Bạn sẽ nắm rõ ràng số lần một phần tử được đưa rõ ra bằng cách dùng toán tử *. VD, ul>li*4 ta sẽ được

<ul> <li></li> <li></li> <li></li> <li></li> </ul>

7. Đánh số tự động

Tạo nhiều tag với cùng tên class được đánh số tự động như thế nào? Bạn chỉ cần thêm $ và tên đối tượng mục tiêu và Emmet sẽ tự động đánh số tăng dần tương ứng với từng tên được tạo ra.

VD, nếu như viết ul>li.item$*3 ta sẽ được:

<ul> <li class="item1"></li> <!-- /.item1 --> <li class="item2"></li> <!-- /.item2 --> <li class="item3"></li> <!-- /.item3 --> </ul>

Viết CSS nhanh hơn với Emmet

Tương tự với HTML, Emmet hỗ trợ viết tắt với CSS giúp chúng ta code nhanh hơn, dưới đây là một số ví dụ Điển hình mà hay dùng nhất.

1. Viết tắt giá trị

Giả sử bạn mong muốn xác định tính chất có chiều rộng là 200px, hãy viết w200 Emmet sẽ làm ra width: 200px;

Nếu như mong muốn sử dụng đơn vị em hay % thì sao? sau đây là bảng một vài cơ quan và cách viết tắt

• p tương ứng với %
• e tương ứng với em
• x tương ứng với ex

VD, h15p+m10e+pr5e ta sẽ được:

• height: 15%;
• margin: 10em;
• padding-right: 5em;

2. Toán tử mở rộng

Giả sử khi viết @f ta có thể được

@font-face { font-family:; src:url(); }

Tuy nhiên, nếu ta sử dụng toán tử mở rộng + thì sao? Hãy thử @f+, kết quả sẽ được:

@font-face { font-family: 'FontName'; src: url('FileName.eot'); src: url('FileName.eot?#iefix') format('embedded-opentype'), url('FileName.woff') format('woff'), url('FileName.ttf') format('truetype'), url('FileName.svg#FontName') format('svg'); font-style: normal; font-weight: normal; }

Rất tuyệt đúng không nào. một vài tính chất khác như background-image, border-radius,font, @font-face, text-outline, text-shadow ta cũng có thể ứng dụng tương tự.

ví dụ, b++f++bdrs++to++ts+, nhấn Tab ta sẽ được:

background: #fff url() 0 0 no-repeat; font: 1em Arial,sans-serif; border-right: 1px solid #000; text-outline: 0 0 #000; text-shadow: 0 0 0 #000;

Và vận dụng phím Tab để di chuyển chuyển đổi các giá trị cho từng thuộc tính.

3. Gợi ý tự động

CSS Module của Emmet sẽ tự động tìm kiếm khi bạn vừa nhập 1 từ được viết tắt và gợi ý cách viết tắt gần nhất. nếu không tự động, hãy gõ phím Ctrl + Space. ví dụ, khi bạn gõ ovh, ov-h, ov hay oh Emmet đều sinh ra code giống nhau.

4. Thêm các tiền tố

CSS3 ra đời với rất nhiều tính năng tuyệt vời, nhưng không phải trình duyệt nào cũng hỗ trợ như nhau. vì lẽ đó, với một vài thuộc tính ta phải vận dụng tiền tố ứng với trình duyệt để giao diện Website có khả năng hiển thị giống hệt nhau trên tất cả các trình duyệt web. Và nếu thêm từng prefix thì thật mất thời gian, Emmet sẽ giúp ta tự động hoàn thiện Điều này.

VD, bạn gõ trs và nhấn Tab ta sẽ thu được.

-webkit-transition: prop time; -o-transition: prop time; transition: prop time; Gradients

Khi kể đến tính năng mới trong CSS3, ta không thể bỏ qua Gradients. Và thay vì phải viết dài cả dòng, ta chỉ cần một đoạn viết tắt, ví dụ lg(left, #fff 50%, #000) sẽ cho ra kết quả:

background-image: -webkit-linear-gradient(left, #fff 50%, #000); background-image: -o-linear-gradient(left, #fff 50%, #000); background-image: linear-gradient(to right, #fff 50%, #000);

Một vài tính năng khác

1. Tạo Lorem Ipsum

Trước đây, để làm ra các đoạn text “Lorem ipsum” mình thường vào các Website để copy, nhưng từ khi sử dụng Emmet, công việc đó trở nên dễ dàng và có thể làm ngay tại Sublime Text (hay bất kỳ code editor nào được Emmet hỗ trợ) với cú pháp viết tắt lorem hay lipsum.

Thậm chí, có thể tạo 10 đoạn text đó thật đơn giản với lorem*10, hay bạn sẽ giới hạn số lượng từ hiển thị như sau: p*3>lorem5.

Lorem ipsum dolor sit amet. Officia optio dolor sed sit. Nihil, eum, nisi. Optio, numquam!

2. Tùy chỉnh Emmet theo ý bạn

Emmet mang lại một loạt các tùy chỉnh để bạn sẽ thực nghiệm plugin này theo cách riêng của mình thông qua các tệp sau:

• Thêm mới hoặc chuyển đổi snippet đã có sẵn trong tệp [snippets.json] chuyển đổi hành vi các bộ lọc (filters), hay các hành động (actions) của Emmet thông qua file [preferences.json]
• nắm rõ ràng cách để tạo ra HTML hoặc XML, xem trong file [syntaxProfiles.json]

(Nguồn: Tổng hợp)

Tổng kết

Qua bài viết trên của ATP Trang Website đã cung cấp đến các bạn đọc một số thông tin về Gợi Ý Code Trong Sublime Text Cần Thiết. Hy vọng những thông tin trên của bài viết sẽ hữu ích với các bạn đọc. Cảm ơn các bạn đã dành nhiều thời gian để xem qua bài viết này nhé.