Visual Studio Code (VSCode hay VSC) l&agrave; một trong những tr&igrave;nh soạn thảo m&atilde; nguồn phổ biến nhất được sử dụng bởi c&aacute;c lập tr&igrave;nh vi&ecirc;n. Điều n&agrave;y cũng kh&ocirc;ng l&agrave; ngoại lệ đối với c&aacute;c lập tr&igrave;nh vi&ecirc;n sử dụng Markdown. Trong b&agrave;i viết n&agrave;y, ch&uacute;ng ta sẽ c&ugrave;ng t&igrave;m hiểu 5 extension gi&uacute;p bạn lập tr&igrave;nh Markdown chuy&ecirc;n nghiệp v&agrave; hiệu quả hơn tr&ecirc;n VS Code.
<h2 style="text-align: justify;">1. Markdown All in one </h2>
Markdown All in one l&agrave; điều bắt buộc để chỉnh sửa Markdown. N&oacute; chứa bản xem trước Markdown, ph&iacute;m tắt, bản tự động v&agrave; hơn thế nữa.
C&aacute;c ph&iacute;m tắt như dưới đ&acirc;y sẽ gi&uacute;p chỉnh sửa Markdown dễ d&agrave;ng hơn nhiều:
<img style="width: 500px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/62748918-ccd6-48a1-9601-3feec305776c" alt="Markdown All in One" />
Bạn sẽ phải ho&agrave;n tất thao t&aacute;c bao gồm t&igrave;m đường dẫn: 
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/f3172cc5-d767-465b-8834-e1fd001f93f7" alt="Markdown All in One" />
C&oacute; thể in Markdown sang HTML với lệnh: Markdown: Print current document to HTML.
Hơn thế nữa, n&oacute; c&ograve;n đi k&egrave;m với hỗ trợ về mặt to&aacute;n học:
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://miro.medium.com/max/1400/0*G_H1JpNI-RptmRAl.png" />
<h2 style="text-align: justify;">2. Dictionary completion</h2>
Dictionary completion l&agrave; một phần mở rộng kh&aacute;c để gi&uacute;p bạn nhập c&aacute;c từ tiếng Anh nhanh hơn. Bởi v&igrave; hầu hết ch&uacute;ng ta kh&ocirc;ng phải l&agrave; người n&oacute;i tiếng Anh bản ngữ, v&igrave; vậy tiện &iacute;ch n&agrave;y gi&uacute;p ch&uacute;ng ta viết c&aacute;c từ Tiếng Anh một c&aacute;ch ch&iacute;nh x&aacute;c:
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://miro.medium.com/max/1256/0*6MPJ-UvidW614ay4.gif" alt="Dictionary completion" width="700" />
Markdown kh&ocirc;ng hỗ trợ gợi &yacute; nhanh theo mặc định; bạn cần th&ecirc;m đoạn code dưới đ&acirc;y để gợi &yacute; xuất hiện khi nhập tệp Markdown:
<pre class="language-java"><code>"[markdown]": {
"editor.quickSuggestions": true
}</code></pre>
<h2 style="text-align: justify;">3. Paste Image</h2>
Nếu như bạn l&agrave; người th&iacute;ch ch&egrave;n nhiều ảnh chụp m&agrave;n h&igrave;nh hơn v&agrave;o c&aacute;c tệp Markdown, th&igrave; Paste Image sẽ gi&uacute;p bạn lưu h&igrave;nh ảnh một c&aacute;ch nhanh ch&oacute;ng v&agrave; hiệu quả từ xclip.&nbsp;
Phần mở rộng n&agrave;y hỗ trợ Mac / Windows / Linux.
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://miro.medium.com/max/1354/0*lqIhRGilEpAxHV_5.gif" alt="Paste Image" width="700" />
<h2 style="text-align: justify;">4. PlantUML</h2>
PlantUML l&agrave; một tiện &iacute;ch mở rộng tuyệt vời gi&uacute;p bạn vẽ sơ đồ một c&aacute;ch hiệu qảu.
Trong PlantUML, c&aacute;c sơ đồ được định nghĩa bằng một ng&ocirc;n ngữ đơn giản v&agrave; trực quan. Khi bạn chỉnh sửa tệp nguồn của sơ đồ, bạn cũng c&oacute; thể xem trước kết quả:
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://miro.medium.com/max/1400/0*21JIC7tLz0rRnWtp.gif" alt="PlantUML" width="700" />
PlantUML hỗ trợ tất cả c&aacute;c loại sơ đồ được c&aacute;c nh&agrave; ph&aacute;t triển sử dụng, chẳng hạn như sơ đồ tuần tự, sơ đồ đối tượng v&agrave; lớp, v.v.
Nếu bạn đ&atilde; quen thuộc với Draw.io, bạn sẽ th&iacute;ch một phần mở rộng kh&aacute;c: Draw.io Integration.
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://miro.medium.com/max/1400/0*saWRcP56pucP_ZEX.gif" alt="PlantUML" width="700" />
<h2 style="text-align: justify;">5. Markdown Emoji</h2>
Markdown Emoji thực hiện một điều đơn giản: th&ecirc;m một số mặt Emoji v&agrave;o t&agrave;i liệu của bạn.
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://miro.medium.com/max/1400/0*dGPwzXKFmgvdOKNl.png" alt="Markdown Emoji" width="700" />
Tuy nhi&ecirc;n, c&oacute; một khiếm khuyết trong phần mở rộng n&agrave;y. Kết quả hiển thị Hexo trong một v&agrave;i trường hợp kh&ocirc;ng hiển thị ch&iacute;nh x&aacute;c biểu tượng cảm x&uacute;c trong HTML. C&oacute; một Emoji mở rộng tương tự giải quyết vấn đề n&agrave;y. V&agrave; bạn thậm ch&iacute; c&oacute; thể th&ecirc;m biểu tượng cảm x&uacute;c v&agrave;o code:
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://miro.medium.com/max/1400/0*VWOMwCMo3mtMKVeS.gif" alt="Markdown Emoji" width="700" />
Tr&ecirc;n đ&acirc;y l&agrave; 5 extention h&agrave;ng đầu tr&ecirc;n VSCode hỗ trợ bạn sử dụng Markdown hiệu quả v&agrave; năng suất hơn. Ch&uacute;c bạn c&oacute; khoảng thời gian vui vẻ với Markdown nh&eacute;!

Admin

5 tiện ích mở rộng hàng đầu trên VSCode giúp bạn tăng năng suất khi sử dụng Markdown

Cùng tác giả

Admin

Có liên quan