title: Seperate JSX and function blocks from parent parentheses or parent tag
body: <p>let say I have a React Component (class based for now, yeah i should start using hooks =D)</p>
  
  <pre class="lang-js prettyprint-override"><code>class App extends Component {
    state = {
      someState: ""
    }  
  
    render() {
      return (
        &lt;View&gt;
          &lt;View&gt;
            &lt;Text&gt;Header&lt;/Text&gt;
          &lt;/View&gt;
  
          &lt;View&gt;
            &lt;Text&gt;Main&lt;/Text&gt;
          &lt;/View&gt;
  
          &lt;View styles={styles.footer}&gt;
            &lt;Text&gt;Footer&lt;/Text&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      )
    }
  }
  
  </code></pre>
  
  <p>Now i am using <strong>vimvscode</strong> so i use <code>shift + [</code> or <code>shift + ]</code> a lot;</p>
  
  <p>now let say i need to delete</p>
  
  <pre><code>state = {
    someState: ""
  }
  </code></pre>
  
  <p>for me i think best way to delete that part i <code>d + shift + [</code>
  if my cursor is at </p>
  
  <pre><code>  state = {
      someState: ""
    }[Cursor]
  </code></pre>
  
  <p>but it will delete up to <code>class App extends Component</code></p>
  
  <p>same goes for <strong>JSX</strong></p>
  
  <p>if i want to delete footer only</p>
  
  <pre><code>&lt;View styles={styles.footer}&gt;
    &lt;Text&gt;Footer&lt;Text&gt;
  &lt;/View&gt;  
  </code></pre>
  
  <p>with <code>d + shift + ]</code> if my cursor is at:</p>
  
  <p>it will delete all upto:</p>
  
  <pre><code>        &lt;View styles={styles.footer}&gt;
            &lt;Text&gt;Footer&lt;/Text&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      )
    }
  }
  </code></pre>
  
  <p>I don't want this behaviour,</p>
  
  <p>so i would love to know any <strong>prettier configuration</strong> or <strong>vim plugin</strong> that can help me do these stuff</p>