Question 73526 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Hide style props in VScode extention – Reactjs

I am looking for an extension, maybe their is a setting?, that would hide the big style block in my React components. I am using Chakra UI Library and all styles are given using properties so a single div may look like this:

    <Box
      display="flex"
      flexDirection="column"
      margin="0 auto"
      maxWidth="330px"
      paddingTop="32px"
    >

And potentially even larger! And this gets annoying real quick as the more components you use, the larger and larger the file gets so more and more scrolling is required to get from the top of the file to the bottom. Even using just 6 components – its 97 lines of codes like this! Thats insane!

I wonder if their is an extension that would compress the properties to like <Box ...> and once the cursor is on the line then it would expand (similar to tailwind extension).

I tried searching for such extension but sadly found nothing.

Tags:

2

Answers


  1. 0

    Don’t think you will find a plugin for this. You could go with a structure like this.

    Create a file called BoxStyles.js inside:

    export default {
  display: "flex"
  flexDirection: "column"
  margin: "0 auto"
  maxWidth: "330px"
  paddingTop: "32px"
}

    Then in the file where you are using the Box component.

    import BoxStyles from './BoxStyles';

<Box {...BoxStyles} />

    This will help keep file sizes smaller.

    Hope that helps

    Login or Signup to reply.
  2. 0

    You could use this extension I wrote to do this: Find and Transform. You can make use of its ability to find regex matches and then run a command on them.

    The command editor.createFoldingRangeFromSelection lets you create a folding range for anything you can select.

    So try this keybinding (in your keybindings.json) :

    {
  "key": "shift+alt+i",            // whatever binding you want
  "command": "findInCurrentFile",
  "args": {
    "find": "(?<=<Box)[\s\n\S]*?>",
    "isRegex": true,
    "matchCase": true,
    "postCommands": [
      "editor.createFoldingRangeFromSelection"
    ]
  },
  "when": "editorTextFocus && !editorReadonly && editorLangId == javascriptreact"
}

    folding javascript props

    You can remove all the manually-created folding ranges (those created with a selection and the command) with the command: Remove Manual Folding Ranges.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search