VsCode tips and tricks hay có thể bạn chưa biết

Bài đăng này đã không được cập nhật trong 5 năm

Visual Studio Code là một công cụ “Code Editing” được Microsoft phát hành năm 2015. Nhanh và mạnh mẽ, quan trọng là miễn phí , VsCode đang ngày càng trở nên phổ biến, trong bài viết này mình sẽ chia sẻ 1 số mẹo hữu ích để code hiệu quả hơn trên phần mềm đa năng này.

1. Tự tạo custom snippets

Chắc hẳn mọi người khi code đều muốn có thật nhiều snippet để việc code nhanh thuận tiện, nhưng có nhiều thứ VsCode và các package không có sẵn, mình sẽ giới thiệu 1 cách để các bạn tự tạo snippet cho riêng mình.

Đầu tiên ta sẽ đi tới chức năng này: File > Preferences > User Snippets (Code > Preferences > User Snippets on macOS)

Lúc này VsCode sẽ xuất hiện 1 dropdown các lựa chọn ngôn ngữ:

Ví dụ ta search và chọn javascript, đây là file javascript.json mở ra:

Trong đây đã hướng dẫn sử dụng sẵn rồi, ta làm thử 1 ví dụ tạo shortkey cho arrow function:

Trong đó prefix là shortkey, body là nội dung sẽ xuất ra, description là mô tả sẽ hiển thị bên cạnh khi bạn gõ shortkey.

Save xong thì ta sang 1 file js để test, gõ arf, VsCode sẽ show ra:

Ok, cái chúng ta vừa tạo đã ở đây rồi, Enter và kết quả:

2. Xoá khoảng trắng

Giả sử chúng ta có khoảng trắng đằng sau thẻ b như trên, thay vì trỏ chuột tới và xoá thủ công thì ta có thể bôi đen đoạn đó hoặc toàn trang (cho nhanh ) và nhấn tổ hợp phím ⌘K + X, (Ctrl K + X với Window và Linux), ⌘K để lựa chọn phần đã bôi đen, ấn thêm X (trong khi vẫn giữ ⌘) để xoá khoảng trắng:

3. Code formatting

Nhìn thật khó chịu phải không nào!

Để format đoạn code trên, bôi đen và ấn ⌘K + F. Kết quả:

Mẹo không nhỏ là cách này xoá được cả khoảng trắng, tuy nhiên cứ thêm mục 2, biết đâu có người thích dùng riêng như vậy thì sao, ngoài ra cách này cũng không xoá được khoảng trắng trong comment còn cách ở mục 2 thì vô tư

4. Column (box) selection

Đôi khi ta không muốn xoá cả đoạn mà chỉ muốn xoá 1 cột, 1 phần nào đó theo chiều dọc như trên thì chỉ cần giữ Shift+Alt và kéo chuột để bôi đen phần cần xoá, việc còn lại là nhấn BackSpace!

5. Thay đổi toàn bộ 1 đoạn text có trong 1 file

Đầu tiên ấn tìm kiếm, thanh tìm kiếm hiện ra thì ấn vào mũi tên khoanh đỏ như hình:

1 ô nhập hiện ra bên dưới, trong đó ô trên là từ ta muốn thay đổi, ô dưới là kết quả ta muốn nó trở thành:

Tiếp đó ấn nút khoanh đỏ:

Thành quả là như ví dụ trong hình trên, toàn bộ những text haha trong file sẽ được đổi thành hihi.

Mẹo này tuy hữu hiệu nhanh gọn nhưng bạn phải cần thận, vì đôi khi bạn có thể đổi cả những đoạn text ngoài ý muốn nếu không kiểm tra kỹ, ví dụ bạn muốn xoá toàn bộ class btn và làm theo cách trên, nhưng không để ý còn 1 class là btn-info, kết quả là nó sẽ bị xoá thành -info

Trên đây là 1 số thủ thuật khá hay ho trong VS Code, hy vọng có thể giúp các bạn code hiệu quả hơn. Nếu ai có những tips, tricks khác có thể comment chia sẻ cho mọi người. Cám ơn vì đã xem!