在vscode中自定义.js和.jsx文件的代码折叠，实现className=\'...\'的折叠答案

【问题标题】：Customize code folding for .js and .jsx files in vscode to achieve folding of className='...'在vscode中自定义.js和.jsx文件的代码折叠，实现className=\'...\'的折叠
【发布时间】：2023-01-17 03:20:39
【问题描述】：

我希望在我的 React 应用程序中折叠 className 属性，因为我使用的是 tailwindcss，因此 classNames 变得很长，使我的文件混乱。我遇到过使用正则表达式基于开始和结束标识符的代码折叠，但我不确定如何编辑 javascript-language.configuration.json 文件。

我正在考虑将开始标识符设置为className='，将结束标识符设置为'

我如何打开这个文件，甚至可以在一行中折叠代码吗？

例如，我想转换以下内容：

   <div className='some-superlong list-of-tailwind utility-classes that clutter-up this-file'>
      <p className='some-more utility-classes that-need to get-folded'>
   </div>

变成这样的东西：

   <div className...>
      <p className...>
   </div>

【问题讨论】：

我发誓我在某个地方看到了这个扩展，但我完全忘记了。对此有什么想法吗？
相关VS Code issue和extension。

标签： javascript reactjs jsx vscode-settings code-folding

【解决方案1】：

安装一个名为内联折叠.

如果它不适用于 JSX 或 TSX 只需转到 vscode 设置并搜索 inline fold 设置并添加 jsx 和 tsx 作为支持的语言，然后重新加载。

看 ;

现在这是我的 tsx 文件，带有启用折叠的 tailwind。

【讨论】：