Folding Styled Components Consts in VSCode

Question

I have been using Styled Components in NextJS/React and I love it. Generally, I break my styles out into separate js files, but because I am relatively new to React, props, hooks, and context and such, I often find need to keep my styles in my component files. My question is how do I, in VSCode, fold the following code:

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

It would go a long way to make my coding life easier.

Thank You

Answer 1

You can use the indentation code folding strategy.

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

From the 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.