VS Code trở n&ecirc;n phổ biến một phần l&agrave; do c&oacute; hệ sinh th&aacute;i extension cung cấp nhiều t&iacute;nh năng bổ sung v&agrave; cải thiện trải nghiệm tổng thể.
Trong b&agrave;i viết h&ocirc;m nay, Tek4 sẽ gợi &yacute; 10 extension VS Code gi&uacute;p bạn tăng năng suất lập tr&igrave;nh v&agrave; l&agrave;m việc hiệu quả hơn. Ch&uacute;ng ta sẽ t&igrave;m hiểu c&aacute;ch thức hoạt động v&agrave; t&iacute;nh năng của c&aacute;c extension.
<h2 style="text-align: justify;"><a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens">GitLens</a></h2>
GitLens rất phổ biến trong giới lập tr&igrave;nh v&agrave; kh&ocirc;ng thể phủ nhận t&iacute;nh tiện lợi của extension đối với quy tr&igrave;nh l&agrave;m việc của lập tr&igrave;nh vi&ecirc;n. Đ&ocirc;i khi ch&uacute;ng ta muốn biết ai l&agrave; người viết đoạn code hoặc ai l&agrave; t&aacute;c giả của một file n&agrave;o đ&oacute; v&agrave; GitLens sẽ cho ph&eacute;p ta xem ngữ cảnh git ngay trong tệp VS Code. V&iacute; dụ như khi t&igrave;m người th&iacute;ch hợp để tag v&agrave;o 1 Pull request. Với GitLens, ta c&oacute; thể xem ai l&agrave; t&aacute;c giả của từng tệp v&agrave; tag họ v&agrave;o. T&aacute;c giả của tệp c&oacute; thể đ&aacute;nh gi&aacute; PR do đ&atilde; c&oacute; ngữ cảnh cần thiết để đưa ra phản hồi.
B&ecirc;n cạnh c&aacute;c t&iacute;nh năng cơ bản như xem ngữ cảnh git của d&ograve;ng code v&agrave; file, bạn cũng c&oacute; thể thực hiện nhiều thao t&aacute;c Git trong tr&igrave;nh soạn thảo thay v&igrave; sử dụng terminal. Với GitLens, bạn c&oacute; thể ho&agrave;n t&aacute;c, hợp nhất v&agrave; thậm ch&iacute; l&agrave; kh&ocirc;i phục commit. Nếu muốn t&igrave;m hiểu chi tiết về c&aacute;c t&iacute;nh năng của GitLens, bạn c&oacute; thể tham khảo những t&agrave;i liệu li&ecirc;n quan.
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/8572126b-b04a-4bf9-a55d-84d202b85910" alt="GitLens" />
Gitlens (<a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens">nguồn</a>)
<h2 style="text-align: justify;"><a href="https://code.pieces.app/install">Pieces</a></h2>
Pieces l&agrave; một trợ l&yacute; AI hỗ trợ lưu c&aacute;c đoạn code được tự động ph&acirc;n loại, chuyển đổi ảnh chụp code th&agrave;nh văn bản v&agrave; tự động lưu c&aacute;c code được sử dụng thường xuy&ecirc;n dựa tr&ecirc;n th&oacute;i quen code của bạn. Extension n&agrave;y cho ph&eacute;p bạn quản l&yacute; v&agrave; import code được lưu tr&ecirc;n m&aacute;y v&agrave;o tr&igrave;nh soạn thảo. Sự hữu &iacute;ch của Pieces kh&ocirc;ng chỉ dừng ở đ&oacute;, Pieces c&oacute; thể được t&iacute;ch hợp với c&aacute;c ứng dụng kh&aacute;c như extension Chrome. Chỉ cần c&oacute; VS Code v&agrave; extension trong Chrome, bạn c&oacute; thể lưu code từ trang web bất kỳ như Stack Overflow v&agrave; import trực tiếp v&agrave;o tệp VS Code hoặc import bằng t&iacute;nh năng tự động ho&agrave;n th&agrave;nh của Pieces.
Để bắt đầu sử dụng, trước hết h&atilde;y tải c&ocirc;ng cụ Pieces, Pieces OS; bạn cũng c&oacute; thể t&igrave;m thấy extension theo link web ở tr&ecirc;n.
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/6d9cdcc5-5b39-4e39-aa17-c3ee963478a4" alt="Pieces" />
<h2 style="text-align: justify;"><a href="https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments">Better Comments</a></h2>
Better Comments gi&uacute;p dev ghi lại code hiệu quả hơn th&ocirc;ng qua hệ thống tag t&ugrave;y chỉnh. Bạn c&oacute; thể nắm được ngữ cảnh code th&ocirc;ng qua c&aacute;c định dạng kh&aacute;c nhau của comment. V&iacute; dụ, nếu bạn thiết lập định dạng m&agrave;u xanh dương cho c&aacute;c comment todo, mỗi khi xem file n&agrave;o c&oacute; comment <code>todo</code>, comment sẽ c&oacute; chữ m&agrave;u xanh. Bạn c&oacute; thể sử dụng Better Comments cho c&aacute;c comment th&ocirc;ng dụng như <code>bug</code>, <code>todo</code>, <code>query</code> v&agrave; question.
<img style="width: 500px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/771c1057-0583-4128-b660-4b22c161d3ba" alt="Better Comments" />
<h2 style="text-align: justify;"><a href="https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log">Turbo Console Log</a></h2>
Khi lập tr&igrave;nh JavaScript, nhiều người n&oacute;i rằng họ lu&ocirc;n chỉ sử dụng tr&igrave;nh gỡ lỗi. Điều n&agrave;y kh&ocirc;ng đ&uacute;ng ho&agrave;n to&agrave;n. Đ&ocirc;i khi, console logging cũng l&agrave; một phần quan trọng của qu&aacute; tr&igrave;nh ph&aacute;t triển v&agrave; Turbo Console Log l&agrave;m cho bước n&agrave;y trở n&ecirc;n đơn giản hơn. Với extension, bạn c&oacute; thể highlight biến, sử dụng tổ hợp ph&iacute;m tắt để ch&egrave;n nhiều console log c&ugrave;ng một l&uacute;c v&agrave; x&oacute;a tất cả console log chỉ bằng một lệnh đơn giản. Extension n&agrave;y g&oacute;p phần tăng tốc qu&aacute; tr&igrave;nh lập tr&igrave;nh v&agrave; gỡ lỗi trong JavaScript.
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/8f497fd7-f11a-46f6-aa3d-005489efa293" alt="Turbo Console Log" />
Turbo Console Log (<a href="https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log">nguồn</a>)
<h2 style="text-align: justify;"><a href="https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack">LiveShare</a></h2>
Đại dịch Covid 19 l&agrave; yếu tố th&uacute;c đẩy sự ph&aacute;t triển của m&ocirc; h&igrave;nh l&agrave;m việc từ xa v&agrave; m&ocirc; h&igrave;nh kết hợp giữa l&agrave;m từ xa v&agrave; l&agrave;m ở văn ph&ograve;ng. Mặc d&ugrave; &iacute;t gặp mặt nhau hơn nhưng tầm quan trọng của tương t&aacute;c giữa người-người v&agrave; lập tr&igrave;nh cặp vẫn lu&ocirc;n được đề cao ch&uacute; trọng. LiveShare ch&iacute;nh l&agrave; nền tảng hỗ trợ lập tr&igrave;nh cặp th&ocirc;ng qua c&aacute;c phi&ecirc;n l&agrave;m việc của VS Code. Bạn c&oacute; thể mời đến 30 người v&agrave;o phi&ecirc;n lập tr&igrave;nh cặp. Những người kh&aacute;c c&oacute; thể theo d&otilde;i khi bạn đang l&agrave;m việc tr&ecirc;n file, chỉnh sửa hoặc nhập code t&ugrave;y v&agrave;o quyền truy cập được cung cấp. Mọi người c&oacute; thể tr&ograve; chuyện với nhau qua audio nếu đ&atilde; c&agrave;i g&oacute;i extension LiveShare.
<img style="width: 600px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/f0365617-ba38-443b-9895-c4dcf205449c" alt="LiveShare" />
<h2 style="text-align: justify;"><a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner">Code Runner</a></h2>
Tối ưu h&oacute;a v&agrave; t&aacute;i cấu tr&uacute;c code l&agrave; một bước v&ocirc; c&ugrave;ng quan trọng trong lập tr&igrave;nh. Quy tr&igrave;nh đ&oacute; nay c&oacute; thể trở n&ecirc;n dễ d&agrave;ng hơn nhờ Code Runner. Khi muốn test một đoạn code, Code Runner cho ph&eacute;p bạn highlight đoạn code đ&oacute; v&agrave; thực thi xem code c&oacute; hoạt động kh&ocirc;ng. Bạn sẽ kh&ocirc;ng cần phải lo lắng về những ng&agrave;y viết code lan man m&agrave; kh&ocirc;ng biết code c&oacute; thực sự hoạt động kh&ocirc;ng!
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/e983cfe4-1e71-4467-b263-d136c7680128" alt="Code Runner" />
<h2 style="text-align: justify;"><a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">Prettier</a></h2>
Prettier l&agrave; một tr&igrave;nh định dạng m&atilde; cố định gi&uacute;p th&uacute;c đẩy c&aacute;c thực h&agrave;nh tốt về JavaScript trong lập tr&igrave;nh. Mặc d&ugrave; l&agrave; một g&oacute;i JavaScript ri&ecirc;ng lẻ, Prettier c&oacute; thể được t&ugrave;y chỉnh để định dạng code dựa tr&ecirc;n cấu h&igrave;nh được lưu từ trước. Nhược điểm duy nhất l&agrave; Prettier kh&aacute; nhất qu&aacute;n n&ecirc;n ta sẽ phải định dạng v&agrave; cấu tr&uacute;c lại code nếu muốn &aacute;p dụng định dạng kh&aacute;c. Đặc điểm c&oacute; thể kh&ocirc;ng ph&ugrave; hợp với một số người nhưng Prettier vẫn được coi l&agrave; nền tảng khuyến kh&iacute;ch c&aacute;c thực h&agrave;nh tốt nhất trong code đối với c&aacute;c dev mới.
<img style="width: 400px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/e623b33e-81ab-4e8e-b82d-80e900af9557" alt="Prettier" />
<h2 style="text-align: justify;"><a href="https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker">Docker</a></h2>
Extension n&agrave;y cho ph&eacute;p thực hiện c&aacute;c thao t&aacute;c Docker m&agrave; kh&ocirc;ng cần phải tho&aacute;t VS Code. Hầu hết c&aacute;c dev l&agrave;m việc với ứng dụng hiện đại đều đ&atilde; từng sử dụng Docker để đ&oacute;ng g&oacute;i ứng dụng. Với extension n&agrave;y, bạn c&oacute; thể tương t&aacute;c với container, dung lượng, mạng của Docker. Ngo&agrave;i ra, bạn cũng c&oacute; thể đẩy h&igrave;nh ảnh l&ecirc;n cổng đăng k&yacute; container. Extension cung cấp mọi kiểu hỗ trợ cho dev từ cơ bản đến n&acirc;ng cao.
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/85b88e7b-b64f-4ca2-9421-11f7ae1a44f4" alt="Docker" />
<h2 style="text-align: justify;"><a href="https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost">Import Cost</a></h2>
Một vấn đề lu&ocirc;n cần được quan t&acirc;m khi viết ứng dụng web l&agrave; k&iacute;ch thước bundle v&agrave; hiệu suất của ứng dụng. Mặc d&ugrave; những xem x&eacute;t xoay quanh vấn đề l&agrave; một điều quan trọng, ta cũng n&ecirc;n ch&uacute; trọng v&agrave;o l&uacute;c viết code. Import Cost sẽ thay ta l&agrave;m điều đ&oacute; bằng c&aacute;ch hiển thị k&iacute;ch thước của g&oacute;i import trong một d&ograve;ng b&ecirc;n cạnh c&acirc;u lệnh import. Extension sử dụng webpack v&agrave; ngay lập tức đưa ra phản hồi khi bạn thay đổi c&acirc;u lệnh import. Điều n&agrave;y cực kỳ hữu &iacute;ch với c&aacute;c frontend dev l&agrave;m việc tr&ecirc;n ứng dụng web, g&oacute;p phần cải thiện hiệu suất ứng dụng, trải nghiệm người d&ugrave;ng, xếp hạng SEO v&agrave; tỷ lệ chuyển đổi.
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/349000c2-b657-41fb-af26-7f1906f9b3a0" alt="Import Cost" />
<h2 style="text-align: justify;"><a href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint">ESLint</a></h2>
Giống như Prettier, ESLint cũng l&agrave; một g&oacute;i JavaScript ri&ecirc;ng lẻ với một extension đi k&egrave;m. G&oacute;i ESLint vừa l&agrave; linter vừa l&agrave; tr&igrave;nh định dạng code được sử dụng phổ biến trong JavaScript. Extension gợi &yacute; nhiều c&aacute;ch cải thiện code dựa tr&ecirc;n thời gian thực dựa tr&ecirc;n quy tắc cấu h&igrave;nh được thiết lập. ESLint cũng g&oacute;p phần khuyến kh&iacute;ch c&aacute;c thực h&agrave;nh tốt nhất để bạn cải thiện khả năng lập tr&igrave;nh hiệu quả hơn.
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/b0aececa-2898-4d8f-af0a-ff76d9d934b2" alt="ESLint" />
Bạn c&oacute; đang sử dụng extension hữu &iacute;ch n&agrave;o kh&ocirc;ng? H&atilde;y chia sẻ th&ecirc;m ở phần b&igrave;nh luận nh&eacute;!

Admin

Top 10 Extension VS Code giúp tăng hiệu suất làm việc (Phần 3)

Cùng tác giả

Admin

Có liên quan