我启用了 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 再次分割这些线?如果没有,还有其他解决方案吗?
谢谢你!
我试图弄清楚为什么当我使用以下命令访问 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 新手,所以我不知道我是否使用了所有正确的术语,但我尝试了!