VSCode c&oacute; thể được sử dụng trong ph&aacute;t triển web, ứng dụng điện thoại v&agrave; c&oacute; thể l&agrave; hệ thống nh&uacute;ng trong C.
Dưới đ&acirc;y l&agrave; một số tiện &iacute;ch VSCode mới nhất gi&uacute;p cho bạn l&agrave;m việc năng suất v&agrave; hiệu quả hơn:
<h1 style="text-align: justify;">1. <a href="https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onedark">Atom One Dark Theme</a></h1>
C&oacute; rất nhiều extension cung cấp đa dạng c&aacute;c chủ đề v&agrave; bảng m&agrave;u, nhưng Atom One Dark Theme c&oacute; c&aacute;c bảng phối m&agrave;u được pha trộn tốt v&agrave; m&agrave;u nổi bật n&ecirc;n tr&ocirc;ng kh&aacute; đẹp mắt.
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/286bb094-7078-4f0b-8ba7-5b7245ddd085" alt="Atom One Dark Theme" />
Ảnh chụp <a href="https://marketplace.visualstudio.com/">minh họa</a> vscode
<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td style="width: 49.0415%;"><img style="width: 500px; float: right;" src="https://tek4.vn/public_files/c3718a6d-ea99-4fd8-8154-2d32ef477dd4" alt="Atom One Dark Theme" /></td>
<td style="width: 49.0415%;"><img style="width: 500px; float: left;" src="https://tek4.vn/public_files/30de54d8-dda4-4450-81be-c5b4842f5f01" alt="Atom One Dark Theme" /></td>
</tr>
</tbody>
</table>
Code React sau khi &aacute;p dụng extension
Lệnh c&agrave;i đặt: <code>ext install akamud.vscode-theme-onedark</code>
<h1 style="text-align: justify;">2. <a href="https://marketplace.visualstudio.com/items?itemName=emmanuelbeziat.vscode-great-icons">VSCode Great Icons</a></h1>
<a href="https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons">vscode-icons</a> l&agrave; một tiện &iacute;ch &iacute;t được biết đến nhưng lại cung cấp c&aacute;c icon đẹp ấn tượng hơn icon mặc định v&agrave; biểu tượng thư mục sẽ l&agrave;m nổi bật thư mục bạn đang sử dụng.
<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td style="width: 50.0336%;"><img style="width: 400px; float: right;" src="https://tek4.vn/public_files/36c1ff26-b1bc-4db5-85e1-baf4ec6e0bbb" alt="VSCode Great Icons" /></td>
<td style="width: 50.0336%;"><img style="width: 250px; float: left;" src="https://tek4.vn/public_files/83a60ebe-933c-4885-a066-a328a7539d50" alt="VSCode Great Icons" /></td>
</tr>
</tbody>
</table>
Lệnh c&agrave;i đặt: <code>ext install emmanuelbeziat.vscode-great-icons</code>
<h1 style="text-align: justify;">3. <a href="https://marketplace.visualstudio.com/items?itemName=jasonlhy.hungry-delete">Hungry Delete</a></h1>
Một extension đơn giản nhưng kh&aacute; hữu &iacute;ch khi muốn x&oacute;a d&ograve;ng trống bằng c&aacute;ch loại bỏ c&aacute;c khoảng trắng. Bạn c&oacute; thể bỏ qua c&ocirc;ng đoạn chọn nhiều d&ograve;ng hay nhấn Ctrl-Backspace nhiều lần.
<img style="width: 600px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/62655e67-219a-4a03-a7d6-ad6ba25e239f" alt="Hungry Delete" />
Di chuyển lệnh catch l&ecirc;n đầu chỉ bằng 1 n&uacute;t ctrl-backspace. Gif lấy từ <a href="https://marketplace.visualstudio.com/items?itemName=jasonlhy.hungry-delete">ảnh minh họa</a>
Lệnh c&agrave;i đặt: <code>ext install jasonlhy.hungry-delete</code>
<h1 style="text-align: justify;">4. <a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer">Live Server</a></h1>
Chỉ d&agrave;nh cho ph&aacute;t triển web, c&aacute;ch sử dụng kh&aacute; đơn giản đối với trang tĩnh v&agrave; động. T&iacute;nh năng hữu &iacute;ch nhất l&agrave; tự động tải lại trang khi thực hiện một thay đổi đối với trang.
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/c9399326-4f6b-498b-bc0c-fef80344e6ea" alt="Live Server" />
T&iacute;nh năng tự động tải lại trang. Gif lấy từ<a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer"> ảnh minh họa extension</a>
Lệnh c&agrave;i đặt: <code>ext install ritwickdey.LiveServer</code>
<h1 style="text-align: justify;">5. <a href="https://marketplace.visualstudio.com/items?itemName=albert.TabOut">TabOut</a></h1>
Giống như Hungry Delete, đ&acirc;y l&agrave; một keybinding gi&uacute;p con trỏ tho&aacute;t khỏi dấu ngoặc đơn, dấu ngoặc k&eacute;p v&agrave; dấu ngoặc vu&ocirc;ng trong tab. Do VSCode thường tự động ho&agrave;n th&agrave;nh dấu ngoặc đơn n&ecirc;n bạn c&oacute; thể nhấn ph&iacute;m tab thay v&igrave; sử dụng c&aacute;c ph&iacute;m mũi t&ecirc;n.
Lệnh c&agrave;i đặt: <code>ext install albert.TabOut</code>
<h1 style="text-align: justify;">6. <a href="https://marketplace.visualstudio.com/items?itemName=runningcoder.react-snippets">Snippets</a></h1>
Snippets thường được &aacute;p dụng đối với c&aacute;c khối code lặp lại bằng 1 ng&ocirc;n ngữ.
Snippets l&agrave; những chuỗi nhỏ được lập tr&igrave;nh sẵn hoặc do bạn viết để tự động ho&agrave;n th&agrave;nh code trong c&aacute;c khối code lớn hơn. Ta c&oacute; thể d&ugrave;ng snippets khi viết c&aacute;c th&agrave;nh phần React lặp lại nhiều đoạn code được soạn sẵn.
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/43371057-c07d-461b-91f0-0107ffb1d417" alt="Snippets" />
Một số snippet đi k&egrave;m với <a href="https://marketplace.visualstudio.com/items?itemName=runningcoder.react-snippets">React Snippets Extension</a>
Lệnh c&agrave;i đặt: <code>ext install runningcoder.react-snippets</code>
<h1 style="text-align: justify;">7. <a href="https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2">Bracket Pair Colorizer 2</a></h1>
Extension l&agrave;m nổi bật đoạn code đang thao t&aacute;c bằng c&aacute;ch t&ocirc; m&agrave;u dấu ngoặc v&agrave; dấu ngoặc đơn. Extension n&agrave;y cũng vẽ một đường thẳng giữa dấu ngoặc đ&oacute;ng v&agrave; mở khi được click v&agrave;o.
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/b8e45c19-58d6-4b50-b2cc-0cfd1f95c05b" alt="Bracket Pair Colorizer 2" />
Từ th&aacute;ng 9/2021, t&iacute;nh năng highlight n&agrave;y đ&atilde; được t&iacute;ch hợp sẵn trong VSCode, bạn c&oacute; thể k&iacute;ch hoạt bằng c&aacute;ch chỉnh sửa hai d&ograve;ng sau trong settings.json (hoặc t&igrave;m kiếm 2 d&ograve;ng sau)
<code>{</code>
<code>&nbsp;&nbsp;&nbsp;"editor.bracketPairColorization.enabled": true,</code>
<code>&nbsp;&nbsp;&nbsp;"editor.guides.bracketPairs":"active"</code>
<code>}</code>
<h2 style="text-align: justify;">Một số extensions hữu &iacute;ch kh&aacute;c</h2>
<ol style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1"><a href="https://marketplace.visualstudio.com/items?itemName=vscodevim.vim">Vim</a> - tiện &iacute;ch li&ecirc;n quan đến đường cong học tập nhưng một khi đ&atilde; quen với n&oacute; th&igrave; bạn c&oacute; thể điều hướng v&agrave; chỉnh sửa code một c&aacute;ch nhanh ch&oacute;ng.</li>
<li style="font-weight: 400;" aria-level="1"><a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag">Auto Close Tag</a> - Tự động ho&agrave;n th&agrave;nh c&aacute;c thẻ đ&oacute;ng HTML v&agrave; XML. Một extension thiết yếu d&agrave;nh cho c&aacute;c lập tr&igrave;nh vi&ecirc;n website.</li>
<li style="font-weight: 400;" aria-level="1"><a href="https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph">Git Graph</a> - Cung cấp biểu đồ tuyến t&iacute;nh trực quan cho c&aacute;c nh&aacute;nh v&agrave; những thay đổi trong git repo. Bạn c&oacute; thể thực hiện c&aacute;c h&agrave;nh động git trực tiếp trong biểu đồ.</li>
<li style="font-weight: 400;" aria-level="1"><a href="https://marketplace.visualstudio.com/items?itemName=smcpeak.default-keys-windows">Windows Default Keybindings</a> - Người d&ugrave;ng Linux l&acirc;u năm sẽ biết hầu hết c&aacute;c ph&iacute;m tắt tr&ecirc;n Windows/Mac sử dụng &iacute;t n&uacute;t hơn Linux. Nếu chuyển sang d&ugrave;ng hệ điều h&agrave;nh Linux, extension n&agrave;y sẽ gi&uacute;p qu&aacute; tr&igrave;nh chuyển đổi dễ d&agrave;ng hơn v&agrave; bạn kh&ocirc;ng cần phải học lại c&aacute;c ph&iacute;m tắt.</li>
<li style="font-weight: 400;" aria-level="1"><a href="https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf">Shortcuts</a> - Ph&iacute;m tắt l&agrave; một trong những c&aacute;ch hiệu quả nhất để tăng tốc độ nhập code. VSCode c&oacute; rất nhiều ph&iacute;m tắt hữu &iacute;ch cho ph&eacute;p ta nhập v&agrave; chỉnh sửa code nhanh hơn. Dưới đ&acirc;y l&agrave; một số shortcut phổ biến nhất:</li>
</ol>
Ph&iacute;m tắt cho người xem
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1"><code>Ctrl+`</code> - Chuyển đổi terminal.</li>
<li style="font-weight: 400;" aria-level="1"><code>Ctrl+B</code> - Chuyển đổi bảng điều khiển b&ecirc;n để th&ecirc;m kh&ocirc;ng gian cho tr&igrave;nh chỉnh sửa.</li>
<li style="font-weight: 400;" aria-level="1"><code>Ctrl+Shift+P</code> - hiển thị bảng lệnh, chứa c&aacute;c lệnh li&ecirc;n quan đến kh&ocirc;ng gian l&agrave;m việc.</li>
</ul>
Điều hướng code
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1"><code>Ctrl+Shift+O</code> - Lệnh &ldquo;Go to symbol&rdquo; cho ph&eacute;p t&igrave;m kiếm h&agrave;m v&agrave; biến, r&uacute;t gọn thời gian truy cập h&agrave;m trong tệp.</li>
<li style="font-weight: 400;" aria-level="1"><code>Ctrl+Alt+Up/Down</code> - Sao ch&eacute;p 1 d&ograve;ng l&ecirc;n tr&ecirc;n hoặc xuống dưới.</li>
<li style="font-weight: 400;" aria-level="1"><code>Ctrl+X</code> - Cắt 1 v&ugrave;ng chọn. Tuy nhi&ecirc;n, trong VSCode, với con trỏ nằm tr&ecirc;n d&ograve;ng, n&oacute; sẽ cắt to&agrave;n bộ d&ograve;ng nếu kh&ocirc;ng c&oacute; v&ugrave;ng chọn cụ thể. Tương tự với Ctrl-C!</li>
<li style="font-weight: 400;" aria-level="1"><code>Ctrl+Enter</code> - X&aacute;c nhận nội dung chỉnh sửa v&agrave; di chuyển con trỏ đến d&ograve;ng mới b&ecirc;n dưới.</li>
<li style="font-weight: 400;" aria-level="1"><code>Ctrl+/</code> - Th&ecirc;m v&agrave; x&oacute;a comment. C&oacute; thể d&ugrave;ng cho c&aacute;c chương tr&igrave;nh kh&aacute;c ngo&agrave;i VSCode.</li>
</ul>
Điều hướng thư mục
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1"><code>Ctrl+P</code> - Mở hộp t&igrave;m kiếm để chuyển sang tệp kh&aacute;c của dự &aacute;n.</li>
<li style="font-weight: 400;" aria-level="1"><code>Ctrl+tab / Ctrl+Shift+tab</code> - tương tự như với c&aacute;c tab Chrome - được d&ugrave;ng để di chuyển tới hoặc lui tới c&aacute;c tệp đ&atilde; mở trước đ&oacute;.</li>
<li style="font-weight: 400;" aria-level="1"><code>Ctrl+W</code> - Tương tự như Chrome, thao t&aacute;c n&agrave;y sẽ đ&oacute;ng tệp đang mở.</li>
<li style="font-weight: 400;" aria-level="1"><code>Ctrl+Shift+F</code> - T&igrave;m kiếm to&agrave;n bộ dự &aacute;n thay v&igrave; tệp đang mở.</li>
</ul>
Kết luận
Bạn hay sử dụng tiện &iacute;ch v&agrave; ph&iacute;m tắt n&agrave;o nhất? H&atilde;y chia sẻ ở phần b&igrave;nh luận nh&eacute;!

Admin

Best VS Code Extensions 2022

Cùng tác giả

Admin

Có liên quan