22款Visual Studio Code实用插件推荐
<h2>前言</h2><p>Visual Studio Code是一个轻量级但功能强大的源代码编辑器,轻量级指的是下载下来的Visual Studio Code其实就是一个简单的编辑器,强大指的是支持多种语言的环境插件拓展,也正是因为这种支持插件式安装环境开发让Visual Studio Code成为了开发语言工具中的霸主,让其同时支持开发多种语言成为了可能。俗话说的好:“工欲善其事,必先利其器”,安装一些实用插件对自己日常的开发和工作效率能够大大的提升,避免996从选一款好的开发插件开始。以下是我整理的一些比较实用的Visual Studio Code插件希望对大家有用,大家有更好的插件推荐可在文末留言🤞。</p>
<h2>Visual Studio Code相关链接地址</h2>
<h3>Visual Studio Code官网地址</h3>
<blockquote data-lazy-bgimg="https://mmbiz.qpic.cn/mmbiz_png/Vtf2wZNabHCHmjqORfIEnRsic5lyTQ46wVenS4t3WPcub7qze3ZJLChY2tIXxAFl4fzbfPuWUfibQCichERUOCM0A/640?wx_fmt=png" data-fail="0">
<p><span data-offset-key="b04u8-0-0">https://code.visualstudio.com/</span>👉</p>
</blockquote>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202308/1336199-20230820112345469-928113247.png" alt="" loading="lazy"></p>
<h3>Visual Studio Code GitHub源码地址</h3>
<blockquote data-lazy-bgimg="https://mmbiz.qpic.cn/mmbiz_png/Vtf2wZNabHCHmjqORfIEnRsic5lyTQ46wVenS4t3WPcub7qze3ZJLChY2tIXxAFl4fzbfPuWUfibQCichERUOCM0A/640?wx_fmt=png" data-fail="0">
<p><span data-offset-key="fa0be-0-0">https://github.com/Microsoft/vscode</span>👉</p>
</blockquote>
<h3>Visual Studio Code插件市场地址</h3>
<blockquote data-lazy-bgimg="https://mmbiz.qpic.cn/mmbiz_png/Vtf2wZNabHCHmjqORfIEnRsic5lyTQ46wVenS4t3WPcub7qze3ZJLChY2tIXxAFl4fzbfPuWUfibQCichERUOCM0A/640?wx_fmt=png" data-fail="0">
<p>https://marketplace.visualstudio.com/vscode👉</p>
</blockquote>
<h2>Visual Studio Code拓展插件安装</h2>
<p>快捷键:Ctrl+Shift+X进入拓展面板,到应用商店文本框中搜索拓展。</p>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202308/1336199-20230820111013843-1554816154.png" alt="" loading="lazy"></p>
<h2>适用于Visual Studio Code的中文(简体)语言包</h2>
<p>拓展名称:Chinese (Simplified) Language Pack for Visual Studio Code</p>
<p>插件市场地址:<span data-offset-key="cf83o-1-0">https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans</span>👉</p>
<p>拓展描述:此中文(简体)语言包为 VS Code 提供本地化界面。</p>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202308/1336199-20230820111030874-232792823.png" alt="" loading="lazy"></p>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202308/1336199-20230820111316296-1039357334.png" alt="" loading="lazy"></p>
<h2>Visual Studio Code C#开发工具包</h2>
<h3 data-tool="mdnice编辑器">C# Dev Kit for Visual Studio Code</h3>
<blockquote data-tool="mdnice编辑器" data-lazy-bgimg="https://mmbiz.qpic.cn/mmbiz_png/Vtf2wZNabHCHmjqORfIEnRsic5lyTQ46wVenS4t3WPcub7qze3ZJLChY2tIXxAFl4fzbfPuWUfibQCichERUOCM0A/640?wx_fmt=png" data-fail="0">
<p>C# Dev Kit for Visual Studio Code(C# Dev Kit)是一个扩展工具,它为您的C#开发提供了一系列强大的功能和实用工具,以帮助您更高效地编写、调试和维护代码。它能够在Windows、macOS、Linux甚至Codespace等各种开发环境中使用,提升您的C#开发体验。</p>
</blockquote>
<p data-tool="mdnice编辑器">打开VS Code=>找到拓展(Ctrl+Shift+x)=>搜索<code>C# Dev Kit</code>=>点击安装</p>
<p><img src="https://img2024.cnblogs.com/blog/1336199/202403/1336199-20240315211305165-1351709641.png" alt="" width="1080" height="422" loading="lazy"></p>
<h3 data-tool="mdnice编辑器">C# for Visual Studio Code</h3>
<blockquote data-tool="mdnice编辑器" data-lazy-bgimg="https://mmbiz.qpic.cn/mmbiz_png/Vtf2wZNabHCHmjqORfIEnRsic5lyTQ46wVenS4t3WPcub7qze3ZJLChY2tIXxAFl4fzbfPuWUfibQCichERUOCM0A/640?wx_fmt=png" data-fail="0">
<p>C# for Visual Studio Code(C# for VS Code)是C# Dev Kit的一部分,为Visual Studio Code提供了功能丰富的C#语言支持。</p>
</blockquote>
<p data-tool="mdnice编辑器">打开VS Code=>找到拓展(Ctrl+Shift+x)=>搜索<code>C#</code>=>点击安装</p>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202308/1336199-20230820111346554-811920556.png" alt="" loading="lazy"></p>
<h2><span title="扩展名">Visual Studio代码的图标</span></h2>
<p>拓展名称:vscode-icons</p>
<p>插件市场地址:<span data-offset-key="45k83-1-0">https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons</span>👉</p>
<p>拓展描述:vscode-icons不仅能够给文件夹、文件添加上舒适的图标,而且可以自动检测项目,根据项目不同功能配上不同图标,例如,git、Markdown、配置项、工具类等。</p>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202308/1336199-20230820111400914-730578340.png" alt="" loading="lazy"></p>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202308/1336199-20230820111408351-904540534.png" alt="" loading="lazy"></p>
<h2>TabNine代码补全工具</h2>
<p>拓展名称:Tabnine AI Autocomplete for Javascript, Python, Typescript, PHP, Go, Java, Ruby & more</p>
<p>插件市场地址:<span data-offset-key="1an7o-1-0">https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode</span>👉</p>
<p>拓展描述:Tabnine 是一款 AI 代码补全插件,适用于 JavaScript、Python、Java、TypeScript 和其他所有编程语言。它通过自动补全代码来提高开发人员的工作效率。TabNine开箱即用。响应速度快:通常会在不到10毫秒的时间内生成建议列表。</p>
<p>详细介绍:<span data-offset-key="bpgfp-1-0">https://zhuanlan.zhihu.com/p/73811872</span>👉</p>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202308/1336199-20230820111442441-1037465169.png" alt="" loading="lazy"></p>
<h2>Copilot AI辅助编程工具</h2>
<p>拓展名称:GitHub Copilot</p>
<p>插件市场地址:<span data-offset-key="dfmo3-1-0">https://marketplace.visualstudio.com/items?itemName=GitHub.copilot</span>👉</p>
<p>拓展描述:是一个提供 AI 辅助编程的工具,它在您编码时会提供类似自动补全的建议。您可以通过开始编写您想要使用的代码,或者编写自然语言评论描述您希望代码完成的功能,来获取 GitHub Copilot 的建议。</p>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202308/1336199-20230820111505615-290739054.png" alt="" loading="lazy"></p>
<h2>CodeGeeX:AI 代码自动完成、聊天、自动注释</h2>
<p>拓展名称:CodeGeeX</p>
<p>插件市场地址:https://marketplace.visualstudio.com/items?itemName=aminer.codegeex👉</p>
<p>拓展描述:CodeGeeX 是一款功能强大的基于 LLM 的智能编程助手。它提供代码生成/完成、注释生成、代码翻译和基于人工智能的聊天等功能,帮助开发人员显著提高工作效率。CodeGeeX 支持多种编程语言。</p>
<p><img src="https://img2024.cnblogs.com/blog/1336199/202403/1336199-20240315211955641-1153397366.png" alt="" width="1083" height="699" loading="lazy"></p>
<h2>Docker for Visual Studio Code</h2>
<p>拓展名称:Docker for Visual Studio Code</p>
<p>插件市场地址:https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker👉</p>
<p>拓展描述:通过 Docker 扩展,可以轻松地从 Visual Studio Code 构建、管理和部署容器化应用程序。它还能在容器内一键调试 Node.js、Python 和 .NET。</p>
<p><img src="https://img2024.cnblogs.com/blog/1336199/202403/1336199-20240315212205736-83588538.png" alt="" width="1082" height="830" loading="lazy"></p>
<h2>自动添加关闭标签</h2>
<p>拓展名称:Auto Close Tag</p>
<p>插件市场地址:<span data-offset-key="bg1rv-1-0">https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag</span>👉</p>
<p>拓展描述:自动添加HTML / XML关闭标记,与Visual Studio IDE或Sublime Text相同(对前端开发的小伙伴非常有用)。</p>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202308/1336199-20230820111530681-1228345276.png" alt="" loading="lazy"></p>
<h2>Vs Code 最好的代码注释扩展插</h2>
<p>拓展名称:Better Comments</p>
<p>插件市场地址:h<span data-offset-key="1p6e-1-0">https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments</span>👉</p>
<p>拓展描述:更好的注释扩展将帮助您在代码中创建更人性化的注释。使用此扩展,您将能够将注释分类为:警报、查询、待办事项、强调、注释掉的代码也可以设置样式,以使代码不应该存在、您可以在设置中指定任何其他注释样式。</p>
<div>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202308/1336199-20230820111543602-1634382078.png" alt="" loading="lazy"></p>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202308/1336199-20230820111550788-92405554.png" alt="" loading="lazy"></p>
<h2>查找并修复JavaScript代码中的问题</h2>
<p>拓展名称:<span title="扩展名">ESLint</span></p>
<p><span title="扩展名">插件市场地址:<span data-offset-key="epm04-1-0">ESLint - Visual Studio Marketplace</span>👉</span></p>
<p>拓展描述:ESLint 是一个代码规范和错误检查工具,有以下几个特性</p>
<p>1、所有东西都是可以插拔的。你可以调用任意的rule api或者formatter api 去打包或者定义rule or formatter。<br>2、任意的rule 都是独立的<br>3、没有特定的coding style,你可以自己配置</p>
<p>ESLint配置详解:<span data-offset-key="7a0fp-1-0">ESLint配置详解_ecmafeatures_风火一回的博客-CSDN博客</span>👉</p>
</div>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202308/1336199-20230820111605432-1449274274.png" alt="" loading="lazy"></p>
<h2>Vs Code中好用的Git源代码管理插件GitLens</h2>
<p>拓展名称:GitLens</p>
<p>插件市场地址:<span data-offset-key="3iqk3-1-0">https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens</span>👉</p>
<p>拓展描述:GitLens内置到Visual Studio代码Git的能力。它可以帮助您通过Git责任注释和代码镜头一目了然地看到代码作者的身份,无缝地导航和浏览 Git存储库,通过功能强大的比较命令获得有价值的见解,等等。</p>
<p>Vs Code 源代码管理插件GitLens使用指南:<span data-offset-key="di5l8-1-0">https://www.jianshu.com/p/95a1a06ac0fb</span>👉</p>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202308/1336199-20230820111619773-1743592812.png" alt="" loading="lazy"></p>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202308/1336199-20230820111626525-1738263329.png" alt="" loading="lazy"></p>
<h2>Git历史记录查看</h2>
<p>拓展名称:<span title="扩展名">Git History</span></p>
<p>插件市场地址:<span data-offset-key="fe9cd-1-0">https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory</span>👉</p>
<p>拓展描述:Git历史记录,搜索和更多内容(包括git log)。</p>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202308/1336199-20230820111648115-1945792616.png" alt="" loading="lazy"></p>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202308/1336199-20230820111653715-1159199886.png" alt="" loading="lazy"></p>
<h2>流程图神器-Drawio</h2>
<p>拓展名称:Drawio Preview</p>
<p>插件市场地址:<span data-offset-key="57kb5-1-0">https://marketplace.visualstudio.com/items?itemName=purocean.drawio-preview</span>👉</p>
<p>拓展描述:在Vs Code中预览绘图图文件。</p>
<p>Vs Code中使用Drawio:<span data-offset-key="5n7n-1-0">https://blog.csdn.net/huanglin6/article/details/106239570</span>👉</p>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202308/1336199-20230820111710054-1942935797.png" alt="" loading="lazy"></p>
<h2>Import、Require模块路径自动补全</h2>
<p>拓展名称:Path Intellisense</p>
<p>插件市场地址:<span data-offset-key="41qjv-1-0">https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense</span>👉</p>
<p>拓展描述:在编辑器中输入对应文件的路径,会自动补全(在Import、Require导入/引入模块时非常便捷好用)。</p>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202308/1336199-20230820111721990-1052805051.png" alt="" loading="lazy"></p>
<h2>Vue开发必备-Vetur(VS Code的Vue工具)</h2>
<p>拓展名称:Vetur</p>
<p>插件市场地址:<span data-offset-key="apg6m-1-0">https://marketplace.visualstudio.com/items?itemName=octref.vetur</span>👉</p>
<p>拓展描述:Vue多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。vscode官方钦定Vue插件,Vue开发者必备。</p>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202308/1336199-20230820111733889-312064643.png" alt="" loading="lazy"></p>
<h2>帮助Vue开发者编写更高效的Element-UI代码</h2>
<p>拓展名称:vscode-element-helper</p>
<p>插件市场地址:<span data-offset-key="72cvo-1-0">https://marketplace.visualstudio.com/items?itemName=ElemeFE.vscode-element-helper</span>👉</p>
<p>拓展描述:VSCode-Element-Helper是Element-UI的VS Code扩展,Element-UI是一个很棒的库。越来越多的项目使用它。因此,为了帮助开发人员通过Element-UI编写更高效的代码。</p>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202308/1336199-20230820111749713-1639258140.png" alt="" loading="lazy"></p>
<h2>Vue VSCode片段</h2>
<p>拓展名称:Vue VSCode Snippets</p>
<p>插件市场地址:<span data-offset-key="e6s8o-1-0">https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets</span>👉</p>
<p>拓展描述:Vue 语法片段扩展。</p>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202308/1336199-20230820111805736-58452787.png" alt="" loading="lazy"></p>
<h2>Angular开发必备VS Code拓展</h2>
<p>拓展名称:Angular Language Service</p>
<p><span title="扩展名">插件市场地址:https://marketplace.visualstudio.com/items?itemName=Angular.ng-template👉</span></p>
<p>拓展描述:Visual Studio Code 的 Angular Language Service 扩展提供了与 Angular 项目相关的语言支持和功能,以提高开发人员在 VS Code 中的 Angular 开发体验。</p>
<p><strong>以下是这个扩展的主要作用:</strong></p>
<p>1. 自动完成(Autocomplete)<br>2. 快速信息查看(Quick Info)<br>3. 导航至定义(Go to Definition)<br>4. AOT(Ahead of Time)诊断信息</p>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202308/1336199-20230821123530077-1332057138.png" alt="" width="1073" height="511" loading="lazy"></p>
<h2>Vs Code代码运行器</h2>
<p>拓展名称:Code Runner</p>
<p>插件市场地址:<span data-offset-key="u1a1-1-0">https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner</span>👉</p>
<p>拓展描述:运行多种语言的代码段或代码文件C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp, Kit, V, SCSS, Sass, CUDA,和自定义命令。</p>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202308/1336199-20230820111835651-1117426693.png" alt="" loading="lazy"></p>
<h2>Visual Studio代码的图标字体</h2>
<p>拓展名称:Icon Fonts</p>
<p>插件市场地址:<span data-offset-key="1mtmf-1-0">https://marketplace.visualstudio.com/items?itemName=idleberg.icon-fonts</span>👉</p>
<p>拓展描述:icon fonts是一款提供VS Code图标、字体缩写的的插件。虽然看上去很不起眼,但是对于前端开发,这款工具可以说能够极大的提高开发效率。通过一些缩写,能够快速补全icon fonts相关的代码片段,这样能够减少80%以上的手动输入内容。icon fonts支持html、css、less、sass、scss、stylus、jsx、blade、vue。</p>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202308/1336199-20230820111849196-438843965.png" alt="" loading="lazy"></p>
<h2 data-tool="mdnice编辑器">Gitlink是一款辅助和增强VS Code GitHub使用的插件</h2>
<p>拓展名称:Gitlink</p>
<p>插件市场地址:<span data-offset-key="26cs1-1-0">https://marketplace.visualstudio.com/items?itemName=qezhu.gitlink</span>👉</p>
<p>拓展描述:gitlink是一款辅助和增强VS Code GitHub使用的插件。</p>
<p>它具有如下2个特性:<br>转到当前文件的在线链接。<br>复制当前文件的在线链接到剪切板。</p>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202308/1336199-20230820111904495-917782091.png" alt="" loading="lazy"></p>
<h2 data-tool="mdnice编辑器">GraphQL拓展</h2>
<p>拓展名称:GraphQL</p>
<p>插件市场地址:<span data-offset-key="19aga-1-0">https://marketplace.visualstudio.com/items?itemName=mquandalle.graphql</span>👉</p>
<p>拓展描述:GraphQL扩展包括自动完成功能它会在您键入时建议在查询中使用的字段和参数,从而更容易编写有效的 GraphQL 代码。此功能可为您节省时间并降低出现语法错误的可能性。它安装了一个内置的 linter,可以检查您的代码是否有错误并提出修复建议。使用此扩展可防止 GraphQL 错误并提高效率。</p>
<p><img src="https://img2023.cnblogs.com/blog/1336199/202308/1336199-20230820111917402-505817191.png" alt="" loading="lazy"></p>
</div>
<div id="MySignature" role="contentinfo">
<blockquote >
<p style='font-family:YouYuan;font-size: 16px;margin: 0 auto 0.01em auto;'><span style='font-size: 17px; '>作者名称:</span>追逐时光者</p>
<p style='font-family:YouYuan;font-size: 16px;margin: 0 auto 0.01em auto;'><span style='font-size: 17px; '>作者简介:</span>一个热爱编程、善于分享、喜欢学习、探索、尝试新事物和新技术的全栈软件工程师。</p>
<p style='font-family:YouYuan;font-size: 16px;margin: 0 auto 0.01em auto;'>
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。如果该篇文章对您有帮助的话,可以点一下右下角的【♥推荐♥】,希望能够持续的为大家带来好的技术文章,文中可能存在描述不正确的地方,欢迎指正或补充,不胜感激。
</p>
</blockquote><br><br>
来源:https://www.cnblogs.com/Can-daydayup/p/17643761.html
頁:
[1]