编程技术

Document

强大的HTML CSS类名智能提示插件

强大的HTML CSS类名智能提示插件

HTML-CSS-Class-Completion
:chocolate_bar: Visual Studio Code extension that provides CSS class name completion for the HTML class attribute based on the CSS files in your workspace

项目地址:https://gitcode.com/gh_mirrors/ht/HTML-CSS-Class-Completion

在开发网页时，快速准确地输入CSS类名是提升效率的关键。Visual Studio Code 的一款扩展插件 —— IntelliSense for CSS class names in HTML，正是为此场景而生的神器。它提供了基于工作区或外部样式表的HTML class属性的CSS类名自动补全功能。

功能亮点

这款插件的核心特性在于：

  1. 自动为工作区内（包括CSS文件和特定语言模式文件）定义的CSS类名提供补全建议。
  2. 支持通过HTML中的link元素引用的外部样式表。
  3. 提供手动刷新类定义缓存的命令。
  4. 用户可自定义设置应考虑或排除的文件夹和文件。
  5. 支持的语言模式
  6. 除基本的HTML支持外，此插件还兼容以下语言模式：
Razor
PHP
Laravel (Blade)
JavaScript
JavaScript React (.jsx)
TypeScript React (.tsx)
Vue (.vue)
Twig
Markdown (.md)
Embedded Ruby (.html.erb)
Handlebars
EJS (.ejs)
Django模板 (django-html)

此外，用户还可以自行添加其他语言模式以启用类名补全功能。

特别支持

  • 对于Tailwind CSS，支持@apply指令。
  • 在TypeScript React、JavaScript以及JavaScript React中，支持className和class属性。
  • 集成了Emmet，虽然默认关闭，但用户可根据需求开启。

最新更新

最新的1.20版增加了让用户自定义启用补全的语言模式的功能，并修复了媒体查询内类名解析的问题。更多更新详情，请查阅变更日志。

使用方法

只要工作区中有HTML或JS文件，插件就会自动开始查找CSS类定义。如果定义了新的CSS类或添加了新的CSS文件，只需点击状态栏上的闪电图标即可刷新缓存。也可以通过快捷键Ctrl+Shift+P(Mac上是Cmd+Shift+P)执行“缓存CSS类定义”命令。

定制设置

插件提供了一系列用户设置选项，如改变要搜索的文件夹和文件模式，以及是否开启Emmet支持。例如：

"html-css-class-completion.includeGlobPattern"：默认匹配所有*.css和*.html文件。
"html-css-class-completion.excludeGlobPattern"：默认无排除项。
"html-css-class-completion.enableEmmetSupport"：默认关闭，开启后在指定语言中输入.会触发Emmet补全。

以上就是IntelliSense for CSS class names in HTML的魅力所在，它让编码变得更简单，更高效。立即尝试并体验这款插件带来的强大辅助吧！您可以在GitHub上找到更多的信息，并参与到项目的贡献与开发中来。