千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  技术干货  > 用于Web开发的10个必备VSCode扩展

用于Web开发的10个必备VSCode扩展

来源:千锋教育
发布人:syq
时间: 2022-09-22 16:57:04 1663837024

  将这些功能强大的 VSCode 扩展安装到显著在 Web 开发过程中提高您的工作效率。

  视觉工作室代码是目前使用最广泛的源代码编辑器之一,在GitHub上有超过136k颗星。它的受欢迎程度是由于其轻巧,灵活,开源性质,简单性和可扩展性。

VSCode扩展

  说到可扩展性,VSCode有数千个扩展,您可以安装这些扩展来提高开发人员的工作效率,并使自己免于执行日常任务。它们都可以在Visual Studio代码市场中使用,其中绝大多数都是完全免费的。

  本文将介绍 10 个功能强大的 Visual Studio 代码扩展,这些扩展可显著改善 Web 开发体验。为每个示例用法和安装链接提供了示例。

  1. 更漂亮

  “更漂亮”是一个有用的工具,它使用固执己见和可自定义的规则自动设置代码格式。它可确保所有代码具有一致的格式,并有助于在涉及多个开发人员的协作项目中强制实施特定的样式约定。

从 React 中的短语列表中键入动画695

  Visual Studio 代码的更漂亮的扩展带来了代码编辑器和更漂亮的代码之间的无缝集成,允许您使用键盘快捷键或在保存文件后立即轻松设置代码格式。

  观看更漂亮的动作:

从 React 中的短语列表中键入动画879

  “漂亮”会在保存文件后立即格式化代码

  安装: 漂亮 — 代码格式化程序 — Visual Studio Marketplace

  2. 脚本助推器

  此扩展使用代码操作升级 Visual Studio 代码,以执行使用 JavaScript 编程时发生的常见重构任务。

从 React 中的短语列表中键入动画1250

  它们是它可以执行的数十种代码操作,包括:用三元运算符替换语句:if...else

从 React 中的短语列表中键入动画1390

  将声明和初始化拆分为多个语句:

从 React 中的短语列表中键入动画1505

  并将函数转换为箭头函数:

从 React 中的短语列表中键入动画1617

  安装: JavaScript 助推器 — Visual Studio Marketplace

  3. 断续器

  ESLint 是一种查找并修复 JavaScript 代码中问题的工具。它处理代码质量和编码风格问题,帮助识别可能产生棘手错误的编程模式。

从 React 中的短语列表中键入动画2070

  可视化工作室代码的 ESLint 扩展支持在 ESLint 和代码编辑器之间进行集成。此集成允许 ESLint 直接在编辑器中通知您问题。

  例如,它可以使用红色波浪线来通知错误:

从 React 中的短语列表中键入动画2259

  我们可以通过将鼠标悬停在红线上来查看有关错误的详细信息:

从 React 中的短语列表中键入动画2387

  我们还可以使用该选项卡查看当前 VSCode 工作区中每个文件中的所有错误。Problems

从 React 中的短语列表中键入动画2533

  安装: ESLint — Visual Studio Marketplace

  4. 吉特伦斯

  GitLens 是另一个功能强大的扩展,可帮助你充分利用可视化工作室代码中的 Git 源代码管理。

从 React 中的短语列表中键入动画2867

  GitLens 显示包含重要存储库数据和当前文件信息(如文件历史记录、提交、分支和远程)的视图。

从 React 中的短语列表中键入动画3015

  将光标放在编辑器中的任何一行上,GitLens 将显示有关更改该行的最新提交的信息:

从 React 中的短语列表中键入动画3157

  安装: GitLens — Git 增压 — Visual Studio Marketplace

  5. 实时服务器

  VSCode 的实时服务器扩展将启动一个本地服务器,该服务器使用工作区中的文件内容提供页面。当关联文件发生更改时,服务器将自动重新加载。

从 React 中的短语列表中键入动画3514

  在下面的演示中,将快速启动新服务器以显示文件的内容。修改和保存文件会立即重新加载服务器。这样,您就不必在每次进行更改时在浏览器中手动重新加载页面。index.html index.html

从 React 中的短语列表中键入动画3707

  如演示所示,可以使用 VSCode 资源管理器中文件的右键单击上下文菜单中的项轻松启动新服务器。Open with Live Server

从 React 中的短语列表中键入动画3876

  安装:实时服务器 — 可视化工作室市场

  6.CSS 偷看

  通过 CSS 速览扩展,您可以快速查看 HTML 中分配的各种类名和 ID 的 CSS 样式定义。

从 React 中的短语列表中键入动画4191

  有三种方法可以使用 CSS 速览:

  您可以按住该键并将鼠标悬停在类名或 ID 上,以查看其定义。Ctrl

  可以使用键盘快捷键打开一个永久定义窗口,该窗口显示类名或 ID 的 CSS 定义。

  可以使用键盘快捷键导航到定义在其 CSS 文件中的位置。

  以下是所有这些方法的演示:

从 React 中的短语列表中键入动画4428

  Install: CSS 速览 — Visual Studio Marketplace

  7. 对 HTML 中 CSS 类名的智能感知

  此扩展可以与 CSS 速览携手合作,它为当前可视化工作室代码工作区中的现有 CSS 定义中的 HTML 属性提供代码完成。class

从 React 中的短语列表中键入动画4865

  当使用包含数百个类的第三方 CSS 库时,您会欣赏此扩展的好处。

从 React 中的短语列表中键入动画4997

  安装:用于 HTML 中的 CSS 类名的智能感知 — Visual Studio Marketplace

  8. 脚本 (ES6) 代码片段

  顾名思义,这是一个扩展,它以 ES6 语法完全加载了大量节省时间的 JavaScript 代码片段。

从 React 中的短语列表中键入动画5365

  下面是一个演示,其中此扩展的 和 代码段用于快速导入具有 ES6 语法的两个模块。impimd

从 React 中的短语列表中键入动画5583

  安装:脚本 (ES6) 代码片段 — 可视化工作室市场

  9. 视觉工作室智能代码

  人工智能继续提高工人在各种工作中的生产力,开发人员也不会被排除在外。IntelliCode 是一种生成智能代码完成建议的工具,这些建议在当前代码上下文中是有意义的。它使用AI模型来做到这一点,该模型已经在GitHub上数千个流行的开源项目中进行了训练。

从 React 中的短语列表中键入动画5992

  当您键入字符以访问对象方法或字段时,IntelliCode 将建议一个可能在当前方案中使用的成员列表。列表中的项目使用星号表示,如以下演示所示。

从 React 中的短语列表中键入动画6171

  智能代码可用于 JavaScript、类型脚本、蟒蛇和许多其他语言。

  安装: 智能代码 — Visual Studio Marketplace

  10. VS码图标

  图标包可用于自定义 Visual Studio 代码中不同类型的文件的外观。它们增强了应用程序的外观,使识别和区分各种文件变得更加容易。

  VSCode图标是最受欢迎的图标包扩展之一,拥有一组高度全面的图标和超过1100万次下载。

从 React 中的短语列表中键入动画6621

  它超越了文件扩展名区分,为具有特定名称的文件和文件夹(包括 、 和 ) 提供不同的图标。package.jsonnode_modules.prettierrc

从 React 中的短语列表中键入动画6800

  安装:vscode-icons — Visual Studio 市场

  因此,我们已经完成了 10 个基本扩展,这些扩展有助于在 Visual Studio 代码中进行 Web 开发。立即安装它们以提高开发人员的工作效率,并提高您作为Web开发人员的生活质量。

tags:
声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT