Add support for jsx indentation

[TheElegantCoding]

Describe the need i need identation of the html in a component a example of this exist in this package for react eslint-plugin-react, the rule is:

"react/jsx-indent": ["error", 2],

this makes identation of hte html return in a component:

Example

Error

const App = () =>
{
  return (
    <div>
                                    </div>
  );
};

Good

const App = () =>
{
  return (
    <div>
    </div>
  );
};

[joshwilsonvu]

Prettier can accomplish the whitespace changes you're looking for, and since it's an industry standard at this point, ESLint plugins generally don't implement new formatting rules that Prettier covers.

You may want to look at the self-closing-comp rule options; with "html": "void", it will automatically produce JSX with the same structure as valid HTML, which in combination with Prettier might be to your taste.

You can also configure this eslint-plugin-react rule on a Solid codebase. Most formatting rules from that package still work since the syntax is the same.

[TheElegantCoding]

the rule "solid/self-closing-comp" dont support indentation, and also there are pleople like me than dont use prettier, eslint, eslint it is also a formarter and should do it

yes i can put eslint-plugin-react in my workspace, but is still incorrect, also i need to reconfigure the rule of eslint-react, beacuse format the code puttin clasname and asking for more tings that solid dont use. for example for now i have this

    "react/jsx-indent": [
      "off",
      2
    ],
    "react/react-in-jsx-scope": "off",
    "react/no-unknown-property": "off",

i have to urn off oher properties od eslit react to get it work only the indentation.

[joshwilsonvu]

If you don't put "plugin/react:recommended" in your ESLint "extends" array, you won't have to disable other rules. Just include "react" in the "plugins" array and only enable the indentation rule.

If you dislike Prettier you may find other code formatters better to work with. But this project is not going to support much in the way of formatting as most people use other solutions.

[CorentinTh]

For people that does not want to use prettier (Why I don't use Prettier from antfu) use the react eslint package as mentionned above:

1. Install eslint-plugin-react

   pnpm i -D eslint-plugin-react

2. Update your eslint config (add the react plugin, but don't extend)

   {
   "plugins": [ /* other plugins */, "react"], // <-- add react plugin
   // ...
   "rules": {
       // ...
       "react/jsx-indent": ["error", 2], // <-- add those two rules
       "react/jsx-indent-props": ["error", 2] 
   }
   }

3. Enjoy