现代前端开发指南

相关扩展介绍

主题

这里主要介绍 vscode 常用的一些扩展插件。

HTML 相关扩展

1.Highlight Matching Tag**（HTML 高亮）**

可以帮我们更好的看清代码结构，点击 tag，对应 tag 首尾都会变色高亮显示

kuozhan1

  • 如果光标在 Tag 区域，找到匹配的光标，然后用 Overlay 高亮匹配的标签
  • 如果光标不在 Tag 区域，隐藏标签高亮

相关设置

"highlight-matching-tag.style":{
	"backgroundcolor":"rgba(165,153,233)"//高亮颜色
},
"highlight-matching-tag.leftstyle":{
	"borderwidth":"0"//左边框样式
},
"highlight-matching-tag.rightstyle":{
	"borderwidth":"0"//右边框样式
}

2.Auto Rename Tag （HTML 标签自动闭合）

让我们更高效的书写代码，写一个 tag 或修改一个 tag 的时间更短

kuozhan2

重命名一个 HTML / XML 标签时，自动重命名配对的 HTML / XML 标签

3.HTMLHint （代码检查工具）

可以帮助我们更好的维护代码质量

kuozhan3

HTMLHint 工具内置了很多规则，可以对 HTML 代码文件进行静态代码检查，从而提高 HTML 代码编写的规范和质量。

4.lit-html （语法高亮，响应补全）

当我们在 js/ts 中写 html 代码时，可以更轻松，看的也更清晰

kuozhan4

在 JavaScript/TypeScript 的文件中，如果有使用到 HTML 标记，lit-html 提供语法高亮和相应的补全支持。

CSS 相关扩展

1.Color Highlight

kuozhan5

可以显示高亮你所输入的颜色

2.CSS Peek

kuozhan10

可以追踪至样式表中 CSS 类和 id 定义的地方。

GIT 相关扩展

1.Gitconfig Syntax(语法高亮)

kuozhan6

.gitconfig， .gitattributes 和.gitmodules 文件的语法高亮显示。

2.gitignore

kuozhan7

  • 通过从 github/gitignore 存储库中提取.gitignore 模板来添加本地.gitignorefile
  • .gitignore 文件的语言支持

相关设置

// Git lens
"gitlens.gitExplorer.files.layout":"auto",//获取视图布局
"gitlens.currentLine.enabled":false, //指定默认情况下是否为当前行提供一个责备注释。
"gitlens.hovers.enabled":false, //指定是否提供任何悬停
"gitlens.keymap":"alternate", //指定GitLens快捷键使用的键映射alternate-添加以Alt（⌥在macOS上）chorded-添加以Ctrl+Shift+G（⌥⌘G在macOS上）none开头的快捷键集合
"gitlens.advanced.messages":{//指定应禁止显示哪些消息
    "suppressShowKeyBindingsNotice":true
}

image-20221121145103602

3.GitLens — Git supercharged(特别推荐)

kuozhan8

Gitlens 增强了 VS Code 中内置的 Git 功能。它允许可视化代码作者，存储库视图，行悬停等等！您必须使用它来了解其全部潜力。

  • 在每行代码的末尾，GitLens 都会公开最后一次提交的作者、提交的时间以及其他详细的备注信息。状态栏的备注显示类似的信息。将鼠标悬停在这些注释上将显示有关每行提交历史记录的更多详细信息。

  • 在每个文件的顶部和每个代码块的开头，GitLens 公开了最近的提交和作者数量。它通过利用 CodeLens（VS Code 中最强大的工具之一）来实现此目的，它提供了可单击的链接，公开了提交详细信息，并允许您从快速选择菜单中进行选择，以比较、导航和进一步探索每个提交。

  • 只需单击一个按钮，您就可以在任何文件的历史记录中来回导航。比较随时间推移而发生的变化，并查看整个文件或每行代码的修订历史记录。可自定义且不显眼的 Git 责备注释仍然显示在每一行上，告诉您最后一次提交的作者，日期和消息！

  • 这个功能强大的工具提供对许多常见 Git 命令的引导式分步访问，以及对提交（历史记录和搜索）、隐藏和状态（当前分支和工作树）的快速访问

    4.GitHub Pull Requests

kuozhan9

在 Visual Studio Code 中查看和管理GitHub在新窗口打开拉取请求和问题