VS code editor is splitting my code .. please helppp

[naimiii]

My code has been splitting in vs code editor while I have already installed and enabled prettier inside the editor. when I correct the code format inside the editor manually the code itself split automatically …

[skaparate]

Hello!

Does the same happen when you run it through the console? (Make a backup of the file/push it to git before you try).

In my experience, this has happened when there is an unclosed tag or when there is some kind of syntax error. It has also happened when if I open a folder instead of importing the project folder into the workspace… Also when the configuration is not correct.

Read the documentation of the plugins thoroughly and follow the instructions.

[nivethakrishnan72]

Hi @naimiii ,

I guess the issue is because you are placing Context.Provider value = {firstName} inside a tag.
Place a tag only for HTML elements.
Hope it helps

[DanCouper]

I think Prettier isn’t recognising it as JSX, it’s trying to format it as JS (greater than and less than signs).

Do you have a second formatter (something in addition to prettier, like beautify?) installed in VSCode?

Also

@nivethakrishnan72

I guess the issue is

This is React code using JSX, it’s not HTML: the React library makes use of something called JSX lets you write parts of your JS code in something that looks like HTML.

[nivethakrishnan72]

@DanCouper ,

I guess for the JS code to be in JSX, we should write it inside {} (curly braces) and not in <> (tag). Correct me if I am wrong!

[Marmiz]

Those are the short fragment syntax

const Foo = () =>  <>
        <td>Hello</td>
        <td>World</td>
      </>

Is equivalent to

const Foo = () => <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>

And is valid JSX.

[DanCouper]

Yes, you include JS code in JSX inside curly brackets, but React elements that are defined using JSX use angle brackets like HTML, like <button onClick={}> or <Context.Provider value={}>

[zaklina]

function Welcome() {
  return (
     <>
<Context.Provider value={}  />
    </>
     );
}
export default Welcome;

close your tags…
and your are Welcom {}

[DanCouper]

You can’t self-close that tag I’m afraid, it has to have children otherwise it makes no sense; a provider needs a consumer.

[naimiii]

The problem has been fixed now.