时间戳

首页 > 解决方案 > 如何强制 VSCode 的 Tailwind CSS IntelliSense 扩展与 .html.eex 和 .html.leex 文件一起使用？

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

问题描述

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

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

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

标签： visual-studio-codeelixirphoenix-frameworktailwind-css

解决方案

我找到了一个解决方案，帮我解决了这个问题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。

推荐阅读