Một số tùy chọn hữu ích khi sử dụng Visual Studio code

Visual Studio Code là một phần mềm soạn thảo code miễn phí do Microsoft phát triển, trước đây Microsoft nổi tiếng với bộ Visual Studio nặng nề nhưng Visual Studio Code hoàn toàn khác biệt nhẹ nhàng và miễn phí.

Tạo đoạn code mẫu (boilerplate)

Khi bắt đầu code html, để tạo ra một bản mẫu có sẵn nhập vào dấu ! và ấn phím tab đoạn mẫu (boilerplate) của html sẽ được phần mềm (visual studio code) tự động tạo ra (chú ý phải chọn hoặc lưu file mới tạo là đuôi html trước).

Bật tính năng auto format

Auto format sẽ giúp tự động định dạng lại code để cho đẹp: Vào setting –> nhập format và tích chọn vào ô Format on save, như vậy mỗi khi lưu lại file thì Visual Studio code sẽ tự động định dạng code thò ra thụt vào để dễ nhìn.

Thêm chú thích trong html

Để thêm chú thích khi code html ta để chú thích ở trong thẻ <!– nội dung chú thích –>

Ngoài ra khi sử dụng Visual Studio Code ta có thể đặt phím tắt để chèn chú thích được nhanh hơn bằng cách kích chuột vào biểu tượng setting sẽ có một menu xuất hiện -> chọn lựa chọn Command Palette (hoặc phím tắt là Ctrl + shift + P)-> gõ vào từ “comment” sau đó nhìn xuống dòng Toggle Line Comment

Như mặc định phím tắt comment là Ctrl + / vậy để chèn comment nhanh bạn chỉ cần chọn đoạn code đó sau đó ấn phím tắt hoặc nếu muốn tạo ra một đoạn comment cũng chỉ cần ấn phím tắt chương trình sẽ tự động tạo ra dấu ngoặc đóng mở comment.

Plugin giúp gõ code nhanh hơn

Plugin Emmet là một plugin sau khi cài đặt vào và chỉ cần gõ theo các cú pháp được định sẵn sẽ giúp ta tạo ra các đoạn code được nhanh hơn, nó hoạt động như việc tạo các phím tắt trong word để khi chỉ cần gõ các phím đó là ra được 1 đoạn chữ hay sử dụng.

tham khảo thêm tại https://docs.emmet.io/

Cách để tạo nhiều con trỏ khi soạn thảo trong visual studio code

Trong Visual Studio hỗ trợ chũng ta tạo ra nhiều con trỏ nó sẽ giúp ích khi cần cùng gõ một đoạn code vào nhiều vị trí được nhanh hơn bằng cách là giữ phím alt sau đó kích chuột vào vị trí cần gõ.

Một số plugin hay dùng

Plugin Prettier – Code Formatter giúp Format code tự động

Cài Plugin Prettier – code formatter sẽ giúp thống nhất phong cách code trong nhóm, loại bỏ các lỗi vô tình được tạo ra.

Để cài đặt bạn vào Extension sau đó gõ chữ Prettier và chọn kết quả đầu tiên như trong hình:

Sau khi cài đặt xong bạn cần khởi động lại vs code, sau đó vào Setting gõ chữ default và chọn deffault formatter là Prettier – code formatter

Cuối cùng bạn kiểm tra xem tính năng format on save đã được bật lên chưa, nếu đã được bật lên thì khi bạn lưu lại code của bạn sẽ được tự động định dạng theo Prettier.

Plugin Cài đặt giao diện One Monokai Theme

Sau khi cài xong One Monokai theme sẽ mặc định giao diện được đổi sang giao diện của One Monokai theme, nếu muốn thay đổi vào setting để chọn giao diện khác.

Mốt số các Plugin khác

Plugin Image preview: giúp hiển thị bức ảnh ngay bên cạnh side bar lên xuống

Plugin Color Highlight: hiển thị màu ngay khi code

Plugin Auto Rename Tag: giúp tự động thay đổi tên thẻ đóng khi ta thay đổi tên thẻ mở. (sẽ giúp tích kiệm thời gian bạn không phải sửa lại từng tên thẻ đóng, chỉ cần sửa thẻ mở là thẻ đóng sẽ được sửa theo).

Plugin Live Server: giúp không cần làm mới trình duyệt, chỉ cần lưu code trình duyệt sẽ tự làm mới.

Plugin Chrome page ruler extension (sử dụng trên google chrome): giúp đo kích thước hoặc khi kích chuột vào nút element trong công cụ nó sẽ hiển thị ra kích thước các element trong website có sử dụng.

Muốn tắt tính năng tự động tạo thẻ đóng trong vs code

Vào Vs code -> chọn setting -> gõ auto close tag

Cách tạo nhanh thư mục và file trong vs code

Để tạo file và thư mục trong vs code bạn có thể kích chuột vào biểu tượng file hoặc thư mục và tạo lần lượt file trước hoặc thư mục trước sau đó nếu vị trí file chưa hợp lý bạn di chuyển file vào thư mục..Nhưng có một cách nhanh hơn giúp bạn vừa tạo được thư mục và tạo luôn được cả file nằm trong thư mục đó là bạn kích chuột vào biểu tượng tạo file sau đó nhập tên thư mục, tiếp theo là dấu sổ chéo và đến tên thư mục hoặc tên file (vd: css/img/style.css)

Khi làm như vậy vs code sẽ tạo cả 2 thư mục và css và img và cả file style.css nằm trong thư mục img luôn.

Tạo nhanh 1 đoạn văn bản có nội dung bất kỳ trong vs code

Để tạo ra một đoạn văn có nội dung bất kỳ bạn gõ lorem*n (với n là số dòng bạn cần) ví dụ nếu gõ lorem*10 thì sẽ có 10 dòng văn bản được tạo ra tự động…ngoài ra với lorem trong word bạn cũng có thể tạo ra các đoạn văn bản ngẫu nhiên một cách nhanh chóng bằng cách gõ =lorem(10).

Cách copy code nhanh

Để sao chép một dòng code ra nhiều dòng mà không cần phải bôi đen và ấn copy paste như bình thường bạn chỉ cần để chuột ở dòng code cần sao chép và ấn ctrl + shift + mũi tên đi xuống hoặc đi lên, lúc đó dòng code sẽ được tự động sao chép xuống hoặc đi lên.

Cách tạo nhanh thẻ div với một class trong đó

Trong VS bạn muốn tạo một thẻ div và trong thẻ div có một class hoặc một ID đơn giản bạn chỉ cần gõ .tên_class rồi ấn phím tab, khi đó VS tự động sẽ tạo ra một thẻ div với một class ở trong đó như sau: <div class=”wrapper”></div>

Tương tự nếu bạn muốn ID thì bạn chỉ cần thay dấu chấm là ký tự #.

Muốn tạo nhanh đoạn code:

<ul id="nav">
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
</ul>

Gõ code: ul#nav>li*3>a