在vscode中自定義.js和.jsx文件的代碼折疊，實現className='...'的折疊

Question

我希望在我的 React 應用程序中折疊 className 屬性，因為我使用的是 tailwindcss，因此 classNames 變得很長，使我的文件混亂。 我遇到過使用正則表達式基於開始和結束標識符的代碼折疊，但不確定我 go 如何編輯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>

Answer 1

安裝一個名為Inline Fold的插件。

如果它不適用於 JSX 或 TSX 只需 go 到 vscode 設置並搜索inline fold設置並添加jsx和tsx作為支持的語言，然后重新加載。

看;

現在這是我的tsx文件，帶有啟用折疊的 tailwind。