如何强制 VSCode 的 Tailwind CSS IntelliSense 扩展与 .html.eex 和 .html.leex 文件一起使用？

Posted 2023-03-06

【中文标题】如何强制 VSCode 的 Tailwind CSS IntelliSense 扩展与 .html.eex 和 .html.leex 文件一起使用？

【英文标题】：How to force the Tailwind CSS IntelliSense extension for VSCode work with .html.eex and .html.leex files?

【发布时间】：2020-01-20 14:55:41

【问题描述】：

如何强制 VSCode 的 Tailwind CSS IntelliSense 扩展与 .html.eex 和 .html.leex 文件一起使用？

我同样尝试为 HTML 中的 CSS 类名称的 IntelliSense 添加设置 .html.eex 和 .html.leex，但对我不起作用。

所以我可以看到这个扩展支持 HTML (EEx)：https://github.com/bradlc/vscode-tailwindcss/blob/f5dfe02f74ac9bd68529f1997ae875691b819833/src/index.ts#L50

【参考方案1】：

我找到了解决方案，帮我解决了这个扩展https://github.com/ecmel/vscode-html-css。 非常感谢 Ecmel Ercan 和 tme_317 的想法！

但是这个扩展不适用于 HTML (EEx) 文件。我为此做出了贡献。在作者合并 pull-request 之前，可以使用我的分支：https://github.com/reducio/vscode-html-css/tree/add-html-eex

git clone https://github.com/reducio/vscode-html-css/tree/add-html-eex
npm install
vsce package

# deps may be need, if you need hack this code
npm install -g typescript
npm install -g yo generator-code
npm install -g vsce
npm i -g @zeit/ncc

所以，在运行 vsce package 之后，您会在根项目文件夹中获得文件 vscode-html-css-0.2.3.vsix。 然后你需要手动安装扩展：

不要忘记扩展的设置。 在 settings.json 添加：

    "css.remoteStyleSheets": [
        "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
    ],

用法： 您可以通过ctrl + space查看属性列表。

在您的 HTML (EEx) 文件中享受自动完成 Tailwind CSS。