Mẹo hay hướng dẫn sử dụng Sublime Text 3

Công cụ hỗ trợ viết code – lập trình web Sublime Text đã không còn xa lạ và đang rất rất được sự ủng hộ của rất nhiều Web Developer. Trong bài này mình sẽ chia sẽ những mẹo hay khi sử dụng Sublime Text 3.  Giúp tiết kiệm khá nhiều thời gian cho việc lập trình của chúng ta

 

Định nghĩa câu lệnh viết tắt trong Sublime Text – Snippet

Sublime Text hỗ trợ chúng ta lưu lại 1 đoạn code nào đó và xuất nó ra nhanh bằng từ khóa mà chúng ta định nghĩa. Ví dụ: trong Javascript các bạn phải thường viết câu lệnh : return false; để stop xử lý hoặc console.log(); để test kiểm tra giá trị…thì trong quá trình làm việc, test lỗi các bạn sẽ viết đi viết lại rất mất thời gian.

Chỉ cần gõ: rf rồi bấm Tab là sẽ ra ngay return false; hoặc csl rồi bấm Tab là sẽ ra console.log(); cho các bạn

Để thực hiện, các bạn vào menu Tool > New Snippet. Các bạn sẽ thấy 1 đoạn mẫu như thế này:

<snippet>
<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
<!– Optional: Set a tabTrigger to define how to trigger the snippet –>
<!– <tabTrigger>hello</tabTrigger> –>
<!– Optional: Set a scope to limit where the snippet will trigger –>
<!– <scope>source.python</scope> –>
</snippet>

Chúng ta sẽ làm ví dụ cho câu lệnh return false; nhé. Các bạn sửa lại như thế này:

<snippet>
<content><![CDATA[
$1
return false;
]]></content>
<tabTrigger>rf</tabTrigger>
<scope>text.html</scope>
</snippet>

Nội dung chúng ta sẽ sửa hoặc thêm mới sẽ nằm trong cặp thẻ <content></content> . Trong đây $1 là thể hiện sau khi các bạn bấm Tab thì con trỏ chuột sẽ nằm ngay vị trí đó (quá tuyệt ^^), bên dưới là câu lệnh mà các bạn cần, ở đây là return false;
Câu này: <tabTrigger>rf</tabTrigger> là khai báo từ khóa viết tắt của chúng ta, ở đây là gõ rf
Câu này: <scope>text.html</scope> là khai báo kiểu loại file sẽ được áp dụng vào, ví dụ: html,php,css…
Các bạn lưu lại, mặc định đường dẫn lưu file sẽ là:

C:\Users\Nhat Nam\AppData\Roaming\Sublime Text 3\Packages\User

Với quy tắc tên file phải là: ten-gi-do.sublime-snippet. Lưu lại và các bạn có thể test để kiểm tra

Để cho việc gõ code thêm nhanh trong các ngôn ngữ, các bạn hãy cài thêm gói Emmet nó sẽ giúp ích rất nhiều

Xóa nhanh dòng trong Sublime Text

Để xóa nhanh 1 dòng trong Sublime Text, các bạn dùng phím tắt: Ctrl + Shift + K

Mình thì hay dùng: Ctrl + X cho nhanh. Thật ra đây là Cut nội dung vào clipboard nhưng do nó có 2 phím nên bấm cho nhanh hơn

Nhảy đến dòng theo line number

Thường thi viết CSS hoặc PHP có nhiều dòng, chúng ta muốn nhảy nhanh đến số dòng cụ thể nào đó để sửa thì chỉ cần gõ:

Ctrl + G rồi nhập số ở dòng muốn nhảy đến

Chọn nhanh nội dung trong thẻ

Ví dụ các bạn lười quét chuột để chọn hết nội dung trong cặp thẻ <div> như hình:

Thì chỉ cần để con trỏ chuột bên trong và bấm Ctrl + Shift + A là sẽ chọn hết bên trong cho các bạn

Chuyển nhanh dòng – nhiều dòng lên xuống

Ví dụ các bạn có 3 dòng <li> như sau:

<ul>
<li>Anh yeu em</li>
<li>Va rat nho em</li>
<li>Nhieu lam</li>
</ul>

Các bạn muốn chuyển dòng <li>Nhieu lam</li> lên giữa, thì chỉ cẩn để con trỏ chuột ngay dòng <li>Nhieu lam</li> và bấm phím tắt: Ctrl + Shift + Phím lên. Các bạn cũng có thể áp dụng cho nhiều dòng di chuyển cùng lúc như vậy

Di chuyển thụt vào – thụt ra các dòng

Các bạn thấy 3 dòng đang chọn nó bị thụt vào nhìn không đều – rất xấu, muốn cho nó gọn hơn và thụt ra, các bạn bấm:

• Ctrl + [  : để lôi nó ra
• Ctrl + ]  : để thụt nó vào

Chọn nhanh các phần giống nhau

Các bạn xem hình sau:

Ở đây nếu các bạn muốn sửa nội dung trong phần class của các class giống nhau, thì dùng chuột quét chọn dòng class đầu tiên, sau đó bấm Ctrl + D là nó sẽ chọn class giống y như vậy tiếp theo, bấm Ctrl + D cho đến khi nào muốn ngưng . Để sửa cùng lúc thì các bạn bấm phím mũi tên qua lại để sửa

Hoặc có 1 cách khác nữa là các bạn bấm giữ phím Ctrl và click chuột hoặc quét chuột vào nhiều chổ mà các bạn cần, quá tuyệt so với các trình editor khác

Và thêm 1 cách nữa là các bạn quét chọn toàn bộ các phần trên hình, sau đó bấm Ctrl + Shift + L là nó sẽ chọn hết các dòng với con trỏ chuột ở cuối các dòng hoặc đầu các dòng, rất thuận tiện cho việc sửa nhiều thành phần cùng lúc

Nhân nhanh phần tử

Ví dụ các bạn có dòng:

<li>Anh yeu em</li>

Và muốn nhân nó lên nhanh mà không cần copy hoặc pass, các bạn để con trỏ chuột ngay dòng đó, bấm Ctrl + Shift + D nó sẽ nhân ra y như vậy cho các bạn

Tạo nhanh phần tử với Emmet trong Sublime Text

1. Emmet là một gói mở rộng giúp cho việc gõ code nhanh hơn, vô cùng hữu ích. Các bạn có thể cài gói này bằng cách gõ Ctrl + Shift + P , sau đó gõ chọPackage Control: Install Package . Rồi gõ : Emmet . Bấm để setup, xong khởi động lại Sublime Text và dùng

Nó có rất nhiều mẹo để dùng, và cũng nhiều quy tắc định nghĩa, các bạn có thể vào trang chủ của nó để xem chi tiết. Mình chỉ hướng dẫn sơ qua vài cái nỗi bật hay dùng

• Tạo nhanh 1 phần tử với class hoặc id:+ Gõ div.nam bấm Tab sẽ ra <div class=”nam”></div>
  + Gõ div#nam bấm Tab sẽ ra <div id=”nam”></div>
• Tạo nhanh nhiều phần tử con: gõ ul>li*3 bấm Tab sẽ ra:
  
  

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

• Tạo phần tử với thuộc tinh bên trong:+ Gõ a[href=”namcoder.com”] bấm Tab sẽ ra: <a href=”namcoder.com”></a>
• Bao nhanh 1 nhóm dòng:+ Chọn 1 dòng – nhóm dòng muốn bao quanh bởi phần tử nào đó, ví dụ: <div class=”demo”>nam</div> sẽ nằm trong cặp thẻ <a>
  Bôi chọn dòng <div class=”demo”>nam</div> bấm Ctrl + Shift + G , sau đó gõ: a rồi bấm Enter, là sẽ ra:
  <a href=””><div class=”demo”>nam</div></a>
• Còn rất rất nhiều mẹo khác của Emmet, các bạn có thể search Google để xem thêm…

Comment nhanh cho dòng – nhóm dòng

Các bạn quét chọn dòng hoặc nhóm dòng cần Comment, bấm:

• Ctrl + /  để comment cho 1 dòng
• Ctrl + Shift + / để comment cho nhiều dòng

Trên đây và vài kinh nghiệm của mình, còn rất rất nhiều mẹo nữa, các bạn có thể search Google để tham khảo thêm. Hy vọng có thể giúp ích cho các bạn