小编Zet*_*ick的帖子

Prettier 代码格式不会在 JSX 或 HTML 中拆分 classNames

我启用了 Prettier VSCode 扩展,并且我的本地 .prettierrc 文件具有"printWidth": 70选项之一,但是,当我的 JSX(或纯 HTML)文件中有一长串类名时,Prettier 不遵守该设置printWidth并让列表的课程无限期地进行而不会破坏线路。这只是一个问题,因为我使用 Headwind,它是 Tailwind 类排序扩展,运行时Headwind:Sort它会获取我的多行类并将它们放回一行。跑步Prettier:Format应该会再次把这条长长的队伍分开,但可惜的是,事实并非如此。

起始代码示例:

<div className="flex flex-col w-full p-6 border-r-2 items-start
w-1/2 bg-white rounded shadow h-1/3 hover:bg-slate-50 active:bg-slate-100">
Run Code Online (Sandbox Code Playgroud)

然后Headwind:Sort运行,将所有类放在一条长线上:

<div className="flex flex-col w-full p-6 border-r-2 items-start w-1/2 bg-white rounded shadow h-1/3 hover:bg-slate-50 active:bg-slate-100">
Run Code Online (Sandbox Code Playgroud)

然后,即使我的选项设置为 70 个字符,运行Prettier:Format所有代码后仍然是一行一行。printWidth

有没有办法让 Prettier 再次分割这些线?如果没有,还有其他解决方案吗?

谢谢你!

reactjs visual-studio-code prettier tailwind-css

6
推荐指数
1
解决办法
6205
查看次数

为什么 IntelliSense 无法将我的查询所选项目识别为元素?

问题

我试图弄清楚为什么当我使用以下命令访问 HTML 元素时 VSCode 的 IntelliSense 不会建议元素对象属性:

document.querySelector();
Run Code Online (Sandbox Code Playgroud)

每当我使用该document.querySelector()方法,然后使用.运算符尝试查看所选元素的属性时,我都不会获得 CSS 属性列表,例如style

例子

我的 HTML 文件中有一个带有“list”类的 div 元素

<div class='list'>
Run Code Online (Sandbox Code Playgroud)

在我的 .js 文件中,我可以通过编写以下内容来访问此元素:

const listElement = document.querySelector('.list');
Run Code Online (Sandbox Code Playgroud)

我的问题是,当.在 上使用运算符时listElement,VSCode 不显示基本属性,例如style. 我仍然可以通过手动输入类似的内容来设置

listElement.style.display = 'none';
Run Code Online (Sandbox Code Playgroud)

但是当我使用.运算符 VSCode 时不建议style,当我键入样式并.再次使用运算符时,它也不建议display。我的问题是: 如何让 Intellisense 显示这些属性?

注意:我是 HTML、CSS 和 Javascript 新手,所以我不知道我是否使用了所有正确的术语,但我尝试了!

html javascript css intellisense visual-studio-code

5
推荐指数
1
解决办法
1497
查看次数