VSCode 中的折叠样式组件常量

Question

我一直在 NextJS/React 中使用 Styled Components，我喜欢它。通常，我将我的样式分解成单独的 js 文件，但由于我对 React、props、hooks 和 context 等比较陌生，所以我经常发现需要将我的样式保留在我的组件文件中。我的问题是如何在 VSCode 中折叠以下代码：

const SomeStyledComponent = styled.div`
  height: 300px;
  width: 300px;
  ...
`;

它会让我的编码生活更轻松。

谢谢

Answer 1

您可以使用 indentation 代码折叠策略。

// settings.json
{
//  ...other settings
    "editor.foldingStrategy": "indentation",
}

来自settings doc：

Controls the strategy for computing folding ranges. auto uses a language specific folding strategy, if available. indentation uses the indentation based folding strategy.

VSCode 中的折叠样式组件常量

Folding Styled Components Consts in VSCode

reactjs

visual-studio-code

styled-components

next.js