整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
于扩展可以很大程度提高开发的效率，VisualStudio Code 俨然成为开发者社区最流行的一款编辑器。本文就为大家介绍下 2021 年最流行的 10 款 VisualStudio Code 扩展。
VisualStudio Code是开发者社区最流行的一款编辑器。理由之一就是VSCode有许多扩展，可以提高开发的效率。
在本文中，我们将介绍每一位开发人员都应该了解的10款VSCode扩展。
AutoRename Tag是一款面向Web开发人员的VSCode扩展。顾名思义，Auto Rename Tag可以在一个标签更改时自动更新另一个标签：
这款扩展不仅可以在HTML中使用，也可用于React，因为React使用了JSX：
上述示例中标签内只有一个文本，但是在真正的应用程序中，大量的标签和元素嵌套在一起，手工更新非常困难且麻烦。
这款扩展可以将匹配的括号染成相同的颜色。同一个文件内嵌套的组件、函数、对象等带来的大量括号很容易让人摸不着头脑：
例如下述代码示例：
第一眼看上去，区分不同的代码块很困难，但是Bracket Pair Colorizer扩展可以将对应的括号着色，方便浏览代码和阅读：
代码片段
代码片段是节约时间提高生产力的最好办法。这并不是一个扩展，而是多种语言的各种扩展。
下面是一些流行的代码片段扩展：
例如，在React中创建新组建时，输入函数式组件的语法非常繁琐。使用ES7React/Redux/GraphQL/React-Native snippets扩展，只需要输入rfc并按回车即可创建函数式组件。
BetterComments可以帮助你编写便于阅读的注释。
清晰、方便理解的注释不仅对阅读代码的人有好处，对自己也非常有用。开发人员经常会遇到这种情况：过一段时间之后，阅读自己的代码都有困难。而编写描述性的注释对于自己和团队都有好处。
使用Better Comments扩展，你可以将注释分为警告、询问、待办、重点等几大类。
在双斜线后面使用下述字符做标记：
MarkdownAll in One可以处理所有的markdown需求，例如自动预览、快捷键、自动完成等。
从2004年发布以来，Markdown已成为最流行的标记语言之一。技术作者广泛使用Markdown转写文章、博客、文档等，因为它十分轻便、简单，而且可以在多个平台上使用。它的流行带动了许多Markdown变体的出现，如GitHub Flavored markdown、MDX等。微信搜索公众号 逆锋起笔，关注后回复 编程资源，领取各种经典学习资料。
例如，要在Markdown中加粗字体，只需要选中文字按快捷键Ctrl+B即可，这样可以提高生产力。
图标
描述性的图标可以帮你区分不同的文件和文件夹。图标也让开发过程更有趣。
下面是两个VSCode标签页的比较。一个有图标，另一个没有。
有许多图标扩展可供选择。流行的图标扩展有：
Prettier
Prettier是一款有倾向的代码格式化程序。它在GitHub上获得了38500多个标星，是最流行的代码格式化器之一。一致的代码格式和风格可以节省不少时间，特别是在与其他开发人员协作的时候。
考虑下述代码：
这段代码有许多格式问题，例如：
下图演示了如何使用Prettier来格式化并修复以上错误：
该扩展支持Prettier插件，这样你就可以使用本地定制过的Perttier。
你还可以进一步配置该扩展，甚至可以配置成保存时自动执行。
Importcost可以在代码中显示导入的估计大小。编写项目时，很重要的一点就是不要导入过大的软件包，以免损害用户体验。避免导入过大软件包的方法之一就是随时跟踪软件包的大小。
如果导入过大，Import Cost就会用红色显示大小，以示警告。你可以自行配置小、中、大分别对应的大小。
ProfileSwitcher可以在多个用户配置中切换。
该扩展特别适合内容创作者，如技术博客作者、YouTube主播等。你不需要每次共享VSCode屏幕时更改设置，只需要创建新的用户配置即可。
下图演示了怎样在两个用户配置Default和Content Creation之间切换：
GitLens是一款开源扩展。它给VSCode添加了Git的功能。
该扩展最好的一点就是能通过Git blame和code lens的功能，将代码的作者可视化。
下面是更详细的代码作者的信息：
这只是GitLens的诸多功能之一。其他值得一提的功能有：
本文介绍了10款VSCode扩展，帮助你成为更好的开发者并提高生产力。
还有许多其他的VSCode扩展，比如：
原文链接：
https://blog.logrocket.com/top-10-vs-code-extensions-2021/
这里是云端源想IT，帮你轻松学IT”
嗨~ 今天的你过得还好吗？
生命是什么呢，
生命是时时刻刻不知如何是好。
- 2024.03.06 -
工欲善其事必先利其器，一款好的开发工具可以让我们事半功倍。前面我们对HTML的相关概念和基本结构已经有了基本的了解，下面我们就来安装在前端开发中的需要使用的开发工具及环境。
在众多HTML编辑器中，选择一个适合自己的工具至关重要。今天我们就来认识一下前端开发工作中使用的最广泛的工具 “VS Code” , 并在本地搭建好开发环境。
在介绍 “VS Code” 之前，我们先来了解一下什么是 “IDE”。
什么是 “IDE”
IDE 是集成开发环境的英文缩写 （Integrated Development Environment)，集成开发环境就是将在开发过程中所需要的工具或功能集成到了一起，比如：代码编写、分析、编译、调试等功能，从而最大化地提高开发者的工作效率。
IDE 通用特点：
前端开发IDE
而在前端开发中我们需要安装一个“趁手”的IDE，帮助我们更快更高效的开发，一个好的IDE是每个程序员的必备武器。前端开发IDE有很多种，例如 Visual Studio Code、HBuilder、WebStorm、Atom 或 Sublime Text 等。
我们可以任选一种使用。这几种IDE的对比如下：
这么多IDE该怎么选呢？对于我们初学者来说，选择Visual Studio Code，（简称VS Code）就可以了。VS code具备内置功能非常丰富、插件很全且安装简单、轻量、对电脑的配置要求不算很高，且有MAC版本，应用广泛等优点，很适合新手。
下面就和我一起下载并安装VS code吧！
1、进入VScode官网
官网地址：https://code.visualstudio.com/
点击【Download】进入下载，不要点击【Download for Windows Stable Build】，否则它会自动帮你下载User Installer用户版本。
2、然后你会看见Windows，Linux，苹果三个版本，我们选择Windows版本，选择System Installer 点击【x64】进行下载，不要点击【↓ Windows windows8,10,11】，否则它也会自动默认下载User Installer用户版本。
其实选哪个版本都无伤大雅，就算你下载了【User Installer】版本也没事，因为没人会没事把自己电脑上的账户换成其他人的账户登录，就算换了也可以换回来，只是有时候特殊情况换了个账户登录不能使用就有一点麻烦，所以还是推荐尽量下载【System Installer】版本。
【x86】：32位操作系统。【x64】:64位操作系统，如果想知道自己是什么系统，可以敲击Win键找到“设置”→“系统”→“关于”→“系统类型”。
3、正在下载
这个下载会比较慢，如果不想等可直接去找个别人下好的安装包哦！也可找小编领取。
4、下载完后打开文件，会弹出许可协议弹窗，勾选我同意此协议，单击【下一步】。
5、先去D盘里创建一个新文件夹取名叫“VScode”，点击【浏览】按钮修改安装路径，把路径改到刚刚在D盘里创建的VScode文件夹里。如果觉得麻烦也可以直接默认安装在C盘，然后单击【下一步】，但还是建议安装在D盘里。
6、修改完路径后，单击【下一步】。（安装路径是这个样子D:\VScode\Microsoft VS Code）
7、选择开始菜单文件夹，默认"Visual Studio Code",单击【下一步】。
8、根据自己的需求进行勾选，勾选完单击【下一步】。
【创建桌面快捷方式】：在桌面创建VScode快捷方式。
【将“通过Code打开”操作添加到Windows资源管理器文件上下文菜单】：选中一个文件鼠标右键可以通过VScode打开文件。
【将“通过Code打开”操作添加到Windows资源管理器目录上下文菜单】：选中一个文件夹鼠标右键可以通过VScode打开文件夹。
【将Code注册为受支持的文件类型的编辑器】：对于受支持的文件类型的文件，鼠标右键选择“打开方式”，可以通过“Vscode”打开。
【添加到PATH】：添加VScode文件夹里的bin目录到PATH环境变量里，添加完以后可通过系统命令输入code直接启动VScode。
9、单击【安装】进行安装。
10、安装完成后单击【完成】启动。
下载完之后，大家可以根据自己的需求下载插件，这里推荐我用的比较顺手的几个。
1、下载汉化包
点击扩展，在搜索栏搜索Chinese，选择Chinese中文简体点击【Install】进行安装。（建议少用，多看英文，这是一位优秀的程序员走向成功的标志性成长。）
安装完后单击【Change Language and Restart】重启VScode软件，刷新一下就变成中文简体了。
2、下载【会了吧】插件
在搜索栏里搜索【会了吧】，这个是在你敲代码时会自动识别你敲的单词进行翻译，如果你有一个单词不认识，可以点进“会了吧”看看翻译，对英语基础差的人很友好。
3、下载【Open in browser】插件
这个是用来运行代码，并且在浏览器打开，查看运行效果的，这个插件必须下，否则当你写完HTML网页时你无法运行，无法预览页面，不信你可以先试试能不能运行再回来下载。
4、下载【Live Server】插件
这个是用于实时预览运行效果，当你使用open in browser运行代码时，只要你的代码有改变，你就需要手动刷新重新预览页面运行结果，而Live Server是自动刷新运行结果，非常方便，非常滴银性！
1、先去D盘里创建一个新文件夹取名叫“Workspace”（名字随便取名）。
2、进入VScode找到左上角的文件选择点击打开文件夹。
3、找到刚刚创建的“workspace”文件夹，单击【选择文件夹】。
4、找到WORKSPACRE，点击新建文件，名字输入“01.html”,然后点击回车键创建。
5、在刚刚创建的01.html文件下输入以下代码。
<!DOCTYPE html>
<html>
<head>
<meta charest="utf-8">
<title>HTML</title>
</head>
<body>
<h1>这是我的第一个网页</h1>
</body></html>
6、鼠标右击空白处单击【Open In Default Browser】查看运行结果。
7、运行结果如下 。
以上就是常用的前端开发工具VS Code的下载和安装教程了，你的第一个HTML网页运行成功了吗？
一个高效的HTML开发工具和环境是每个前端开发者的得力助手。通过合理选择工具、配置环境、使用框架和库、以及不断的调试和测试，你可以将创意转化为现实，构建出令人惊叹的网页。记住，技术永远在变，唯有不断学习和实践，才能让你在这个数字世界中游刃有余。
今天就先讲到这里了，
更多前端开发基础知识点击文末阅读原文查看哦！
记得关注【云端源想IT】一起学编程！
我们下期再见！
END
文案编辑|云端学长
文案配图|云端学长
内容由：云端源想分享
这个数字编织的现代世界里，代码成了连接现实与虚拟的桥梁。但正如繁华都市背后可能隐藏着杂乱的小巷，程序员的代码库也常常在创新的风暴中变得混乱不堪。正如宋代诗人苏轼所云：“横看成岭侧成峰，远近高低各不同。”代码世界的风景，也需要一番整理，方能展现出它那井然有序的美。今天，作为您的代码整理向导，我将带领您探索五款Visual Studio Code（简称VS Code）的神奇扩展，让您的代码库焕然一新，宛如穿越回那个一切井井有条的黄金时代。
在编程的浩瀚宇宙中，VS Code以其灵活而强大的编辑器特性，成为了众多开发者心中的“都城”。它不仅承载着现代技术的辉煌，还巧妙融合了开发者的古老智慧——高效与简洁。想象一下，在摩天大楼的环绕下，一座座古寺静静诉说着编码艺术的源远流长。是时候揭开这五款宝藏扩展的神秘面纱，看看它们如何在现代化的编码战场上，为我们的代码库披上秩序的外衣。
推荐指数：
推荐指数：
推荐指数：
推荐指数：
推荐指数：
随着这趟旅程的结束，希望您已装备好这些强大的VS Code扩展，准备开启一段从混乱到有序的编程新篇章。正如古都的保护与现代化建设并行不悖，让我们的代码世界同样在保持高效创新的同时，不失其优雅与秩序。别忘了，分享您的体验，使用#代码管理艺术、#VSCode扩展推荐等标签，让更多的开发者加入这场追求卓越的编码之旅。
*请认真填写需求信息，我们会在24小时内与您取得联系。
