Cách chọn và copy nhiều id class cùng một lần trong Vs code

Bài toán đặt ra là có một file html có nội dung như sau:

 <body>
    <div id="main">
      <div id="header"></div>

      <div id="slider"></div>

      <div id="content"></div>

      <div id="footer"></div>
    </div>
  </body>

Yêu cầu đặt ra là muốn copy tất cả các tên ID trong đoạn code này ra để tiến hành CSS trong file css cho các id của file html đó.

Với cách làm thông thường là dùng chuột và copy từng ID ra một và cứ tiếp tục làm như vậy cho cả 5 id này, sau khi copy 5 id này ra file css thì  cũng sẽ phải gõ để tạo 5 dấu # và 5 đóng mở ngoặc, như vậy sẽ tốn thời gian.

Vậy có cách nào cùng làm một lần có thể chọn cả 5 id, sau đó cùng copy 5 id ra và 1 lần paste và 1 lần tạo dấu thăng và tạo ngoặc nhọn cho cả 5 id không.

Thay vì việc phải copy từng id một thì ta nhận thấy có một điểm chung của các tên ID này là nó đều bắt đầu là id=” sau đó mới đến phần tên ID cần copy.

Do đó ta có thể tạo ra nhiều con trỏ đặt ở đầu id và di chuyển xuống tới ký tự ngoặc kép. Để làm được điều này trong Visual Studio bạn chỉ cần đặt con trỏ ở dòng id đầu tiên (đặt sát chữ i) sau đó ấn phím Ctrl + D.

Lúc đó các chữ id phía dưới sẽ đồng thời giống như bị bôi đen, bạn chỉ cần ấn Ctrl + D thêm 4 lần nữa, mỗi lần ấn là một lần nó tạo ra 1 con trỏ trên 1 dòng. Sau bốn lần ấn ta sẽ có tổng cộng 5 con trỏ như hình sau:

Giữ phím ctrl + D để tạo ra lần lượt 5 con trỏ
Tạo ra 5 con trỏ trên 5 dòng

Sau đó dùng mũi tên sang phải di chuyển con trỏ sang sau dấu nháy kép đầu tiên.

Ngoài các thao tác như vừa làm để tạo ra nhiều con trỏ và di chuyển tới ký tự đầu tiên của tên id thì bạn cũng có thể làm được điều này bằng cách dùng chuột để tạo ra nhiều con trỏ một lúc bằng cách bạn click chuột và giữ phím alt vào từng tên id thì lúc đó bạn phải click chuột 5 lần nó cũng sẽ tạo ra kết quả tương tự cách làm như trên

Di chuyển cả 5 con trỏ sang phải
Di chuyển con trỏ tới ký tự đầu tiên cần copy

Tiếp theo ấn phím Alt + Shift + mũi tên sang phải (trên máy Mac là phím Option+ shift + mũi tên sang phải), khi đó toàn bộ nội dung trong dấu nháy kép sẽ được chọn. Lúc này chỉ cần ấn Ctrl + c để copy và di chuyển tới vị trí file CSS để paste

Các id được copy và paste sang css
Các id được copy ra

Nhiệm vụ lúc này là thêm dấu # ở trước tên các id và thêm dấu đóng mở ngoặc đằng sau.

Đầu tiên click chuột ở trước tên của id đầu tiên, sau đó giữ phím Alt trên windows (hoặc phím Option trên máy MAC), lần lượt click xuống các tên id phía dưới, lúc này sẽ tạo ra được nhiều con trỏ ở trước tên các ID.

Lần lượt thêm dấu # vào phía trước tên của các id
Dấu # được thêm trước tên id

Lúc này bắt đầu ghi dấu #, sau đó di chuyển xuống cuối dòng bằng cách giữ phím shift + Alt + mũi tên sang phải, lúc này nó sẽ di chuyển xuống cuối và đồng thời nó cũng lựa chọn tên của các id, khi đó muốn bỏ việc lựa chọn đi chỉ cần ấn mũi tên sang phải 1 lần nữa.

Hoặc ta không cần dùng tổ hợp phím shift + Alt + mũi tên mà chỉ cần ấn phím End trên bàn phím nó cũng sẽ tự động nhảy về cuối tên id

Lúc này chỉ cần gõ phím để đóng mở tạo ngoặc nhọn, và ấn phím enter sẽ được kết quả

Kết quả hoàn thành sau khi ra các dấu ngoặc nhọn
Kết quả khi hoàn thành

Tổng kết lại các phím bạn sẽ dùng để chọn và copy nhiều dữ liệu cùng lúc như sau:

Alt + chuột trái: giúp tạo nhiều con trỏ

Ctrl + D: giúp tạo nhiều con trỏ tại các vị trí có cùng nội dung như nhau

Alt + Shift + mũi tên sang phải: giúp di chuyển tới cuối và chọn nội dung (thay phím alt bằng phím Option trong Mac).

Với cách chọn và copy nhiều các id hoặc class như vừa trình bày trong bài viết này hi vọng sẽ giúp bạn tích kiêm được một khoảng thời gian đáng kể trong quá trình code của mình.

Cảm ơn bạn đã theo dõi bài viết!

Leave a Comment