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

Question

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

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

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

Answer 1

我找到了解决方案，帮我扩展了 https://github.com/ecmel/vscode-html-css。非常感谢 Ecmel Ercan and 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。

如何强制 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?

visual-studio-code

elixir

phoenix-framework

tailwind-css