Bật mí 11 mẹo giúp Dev gõ code siêu tốc hơn cùng VS Code

01/12/2023 | 2049

Dưới đây là một số mẹo và thủ thuật để viết code trong Visual Studio Code (VS Code) nhanh hơn, giúp Dev gia tăng hiệu suất làm việc.

1. Copy và paste

Nhiều người cho rằng copy/paste thôi có gì đâu khó, tuy nhiên khi biết thêm một vài phím tắt, năng suất làm việc của bạn cũng sẽ tăng lên đáng kể. Dưới đây là một vài phím tắt mà bạn có thể bỏ túi:

Dùng CTRL + SHIFT + left/right + dấu mũi tên để tăng/giảm lựa chọn theo từ.
Sử dụng SHIFT + left/right + dấu mũi tên để tăng/giảm lựa chọn theo ký tự.
Nhấp vào một dòng code trong VS Code và nhấn CTRL + X sẽ đưa dòng đó vào khay nhớ tạm của bạn. Sử dụng CTRL + V bất kỳ đâu sẽ chèn dòng code đó vào vị trí bạn muốn.
Sử dụng ALT + up/down dấu mũi tên để di chuyển một dòng code lên/xuống một vị trí.

2. Điều hướng thông minh hơn

Thay vì phải qua explorer pane một cách thủ công, hãy sử dụng tổ hợp phím CTRL + P. Với điều này, bạn có thể tìm kiếm file theo tên. Đây là một cách tìm kiếm "thông minh", nghĩa là nó sẽ không chỉ tìm kiếm các từ có chứa văn bản tìm kiếm của bạn mà còn tìm kiếm sự kết hợp, ví dụ: prodetcon cũng sẽ tìm thấy project-details-container.component.ts.

Thay vì tìm kiếm một số code bên trong tệp bằng cách cuộn, hãy sử dụng các tổ hợp phím sau:

CTRL + G: đi đến dòng
CTRL + F: tìm kiếm trong tập tin
CTRL + click class/function/etc.: đi tới định nghĩa của lớp/hàm/vv.

3. Đặt tên

Đừng tự đổi tên mỗi lần xuất hiện của một biến. Việc này tốn thời gian và dễ xảy ra lỗi. Thay vào đó, hãy chuyển đến phần định nghĩa của biến đó và nhấn F2, đổi tên nó và nhấn ENTER. Nó sẽ thay đổi mỗi lần xuất hiện. Cách này không chỉ hoạt động trên các biến mà còn trên các hàm, lớp, giao diện, v.v.

4. Sử dụng Emmet

Emmet là một công cụ hỗ trợ nội dung/code để viết code nhanh và hiệu quả hơn. Nó phù hợp với VS Code nên không cần bất kỳ plugin nào. Khái niệm này rất đơn giản: bạn bắt đầu nhập một từ viết tắt của Emmet, nhấn TAB hoặc 'ENTER' và một đoạn Emmet đầy đủ cho từ viết tắt đó sẽ xuất hiện.

Một ví dụ viết tắt của Emmet có thể là .grid>.col*3. Khi bạn nhấn TAB hoặc ENTER, VS Code sẽ điền toàn bộ đoạn code cho bạn:

Một trong những điều thú vị về Emmet là bạn cũng có thể tạo văn bản "lorem ipsum" . Ví dụ: ul>li*4>lorem4 sẽ tạo danh sách không có thứ tự gồm 4 phần tử, với mỗi mục danh sách chứa 4 từ ngẫu nhiên.

5. Sử dụng một bộ định dạng

Sử dụng trình định dạng code bên trong VS Code để định dạng code. Một trong những lợi ích của việc sử dụng công cụ là nó giúp "làm đẹp" code của bạn. Nếu bạn copy/paste code từ một nơi nào đó với bố cục không theo thứ tự và khó nhìn, bạn có thể nhấn tổ hợp phím định dạng ( CTRL + ALT + F), code của bạn sẽ được sắp xếp lại theo cách dễ nhìn và dễ đọc hơn.

6. Sử dụng Code snippet

Code snippet là các mẫu giúp việc viết các đoạn code lặp lại dễ dàng hơn, ví dụ: vòng lặp for, câu lệnh while, v.v.

Bằng cách sử dụng các Code snippet, bạn có thể dễ dàng tạo các khối code chỉ bằng cách nhập một vài dòng. Bạn có thể sử dụng code snippet được tích hợp sẵn, các tiện ích mở rộng cung cấp code snippet hoặc thậm chí tạo code snippet của riêng bạn!

Các code snippet tích hợp cung cấp các mẫu cho một số ngôn ngữ, chẳng hạn như TypeScript, JavaScript, HTML, CSS, v.v. Bạn có thể sử dụng nó để dễ dàng tạo một câu lệnh switch, chẳng hạn như ví dụ ở trên.

VS Code Marketplace có một số tiện ích mở rộng cung cấp code snippet cho bạn. Ví dụ như code snippet Angular, code snippet giao diện người dùng Tailwind, code snippet Bootstrap , v.v.

Bạn còn có thể tạo code snippet chung cho một ngôn ngữ cụ thể hoặc cho một dự án cụ thể nào đó của riêng bạn.

7. Tận dụng cách nhập code đồng thời

Khi bạn cần thay đổi hoặc thêm văn bản vào nhiều dòng, VS Code có hỗ trợ điều này bằng cách chọn nhiều dòng đó và chỉ cần bắt đầu nhập các dòng đó cùng một lúc.

Giữ SHIFT + ALT và kéo qua nhiều dòng mà bạn muốn nhập đồng thời. Bạn sẽ thấy nhiều con trỏ gõ xuất hiện trên các dòng đó. Chỉ cần bắt đầu nhập và văn bản sẽ được thêm.

Nếu bạn muốn thêm cùng một văn bản vào một số vị trí nhưng chúng không thẳng hàng, bạn có thể giữ ALT trong khi nhấp vào tất cả các vị trí mà bạn muốn nhập cùng một văn bản.

Bạn cũng có thể giữ ALT và chọn nhiều từ cùng một lúc. Thay vì nhấp vào một vị trí, bạn chỉ cần kéo để chọn vùng chọn và nhả nhấp chuột trái hoặc nhấp đúp để chọn một từ, vừa thực hiện vừa giữ phím ALT.

8. Sử dụng Quickly surround selection

Code thường phải được bao quanh bởi dấu ngoặc vuông, tròn hoặc nhọn, hay nội dung nào đó cần được bao quanh bởi dấu ngoặc kép (đơn hoặc kép). Để thực hiện, người ta thường đến vị trí bắt đầu gõ vào dấu ngoặc, di chuyển con trỏ đến vị trí cuối và gõ vào dấu ngoặc kết thúc. Một cách hiệu quả hơn là chọn những phần cần đóng dấu và chỉ cần gõ dấu ngoặc bắt đầu. VS Code sẽ tự động nhập dấu kết thúc.

9. Tận dụng các kỹ năng tái cấu trúc VS Code

Bạn có thể sử dụng VS Code để tự động cấu trúc lại các đoạn mã của mình. Ví dụ: thay vì viết getters và setters của riêng bạn, bạn có thể để VS Code tạo chúng cho bạn.

Để cấu trúc lại một cái gì đó, chỉ cần chọn những gì cần được cấu trúc lại, nhấp chuột phải và nhấp Refactor... hoặc thậm chí nhanh hơn: sử dụng CTRL + SHIFT + R.

Tùy thuộc vào tệp bạn đang sử dụng, VS Code có thể cung cấp cho bạn một số kiểu tái cấu trúc. Ví dụ: đối với TypeScript, bạn có thể sử dụng Extract function, Extract constant hoặc Generate get and set accessors.

10. Tìm kiếm và thay thế bằng RegEx

Regular expressions (RegEx) có thể là một công cụ rất mạnh mẽ và bạn nên dành thời gian làm quen với chúng. Bạn không chỉ có thể sử dụng nó trong code của riêng mình (ví dụ: mẫu xác thực, thay thế chuỗi, v.v.) mà bạn còn có thể sử dụng nó để tìm kiếm nâng cao và thay thế trong VS Code.

Ví dụ

Bạn đang ở trong một dự án trong đó một số bộ chọn CSS bắt đầu bằng app- và kết thúc bằng -container. Đột nhiên khách hàng muốn bạn thay đổi hậu tố -container thành -wrapper. Thông thường ta sẽ tra cứu -container và thay thế nó bằng -wrapper, nhưng khi thực hiện, có một số từ không cần đều bị thay thế (ví dụ: bộ chọn CSS có tên là .unit-container-highlight thành .unit-wrapper-highlight).

Với RegEx, chúng ta có thể tìm kiếm chi tiết hơn. Bằng cách sử dụng nhóm thu thập, bạn có thể trích xuất những từ muốn giữ lại trong khi thay thế những từ còn lại. RegEx có thể giống như app-([a-z\-]+)-container. Bạn muốn thay thế kết quả để chúng kết thúc bằng -wrapper. Chuỗi thay thế sẽ có dạng app-$1-wrapper.

Chú ý: mặc dù RegEx cho phép tìm kiếm chi tiết hơn, hãy kiểm tra kết quả trong khung tìm kiếm trước khi thực hiện thay thế thực tế!

Bạn thậm chí có thể có nhiều quyền kiểm soát hơn bằng cách cho phép tìm kiếm chỉ được áp dụng cho một số tệp nhất định. Ví dụ có thể chỉ là các tệp HTML ( *.html) hoặc thậm chí chỉ toàn bộ thư mục ( src/app/modules).

Nếu bạn muốn dùng thử RegEx trước khi thực hiện tìm kiếm để đảm bảo nó đúng, hãy sử dụng công cụ kiểm tra RegEx trực tuyến, chẳng hạn như Regex101 .

11. Sử dụng các công cụ để tự động hóa công việc đơn giản

Đôi khi chúng ta phải làm những công việc đơn điệu như tạo dữ liệu giả, tạo hàm cho từng trường trong một lớp, tạo các mục danh sách HTML dựa trên các thuộc tính của một giao diện, v.v.

Thay vì mất thờ gian để làm những công việc đó. Bạn có thể tham khảo những công cụ sau:

NimbleText : chuyển đổi input dưới dạng hàng thành output dựa trên một định dạng nhất định.
Mockaroo : tạo dữ liệu mô phỏng và xuất dữ liệu đó ở nhiều định dạng (JSON, CSV, XML, v.v.).
Trình tạo JSON : cũng tạo dữ liệu mô phỏng, nhưng dành riêng cho JSON. Nó phức tạp hơn một chút, nhưng sẽ cho ra kết quả phù hợp.

Một ví dụ điển hình về việc sử dụng NimbleText là tạo toàn bộ biểu mẫu bằng HTML dựa trên một số trường. Ví dụ dưới đây chứa danh sách các trường cần hiển thị trong biểu mẫu. Mỗi trường sẽ có một nhãn và một đầu vào. Hãy tạo một số dữ liệu để NimbleText chuyển đổi:

first name, text
last name, text
email, email
street, text
number, number
city, text
postal code, text

Ở đây chúng ta có 7 hàng và 2 cột. Mỗi hàng đại diện cho trường biểu mẫu. Cột đầu tiên là tên của nhãn và cột thứ hai là loại đầu vào HTML.

Bên trong NimbleText, chúng ta sẽ giữ nguyên các cài đặt (dấu phân cách cột ,và dấu phân cách hàng \n).

Mỗi trường biểu mẫu phải ở trong div với lớp .form-field, chứa label với văn bản và một input trong trường biểu mẫu. Mẫu cho NimbleText sẽ trông như sau:

<div class="form-field">
  <label for="<% $0.toCamelCase() %>"><% $0.toSentenceCase() %>:</label>
  <input id="<% $0.toCamelCase() %>" type="$1"/>
</div>

Output sẽ như sau:

<div class="form-field">
  <label for="firstName">First name:</label>
  <input id="firstName" type="text"/>
</div>
<div class="form-field">
  <label for="lastName">Last name:</label>
  <input id="lastName" type="text"/>
</div>
<div class="form-field">
  <label for="email">Email:</label>
  <input id="email" type="email"/>
</div>
<div class="form-field">
  <label for="street">Street:</label>
  <input id="street" type="text"/>
</div>
<div class="form-field">
  <label for="number">Number:</label>
  <input id="number" type="number"/>
</div>
<div class="form-field">
  <label for="city">City:</label>
  <input id="city" type="text"/>
</div>
<div class="form-field">
  <label for="postalCode">Postal code:</label>
  <input id="postalCode" type="text"/>
</div>