ESLint y Prettier

Buenas!

Tengo este trozo de código de ejemplo (se que no anda, es solo ejemplo) y no logro hacer que ESLint lo acomode como quiero. También probé con Prettier y no hubo caso (entiendo que prettier sería lo más indicado para lo que necesito pero se genera un conflicto entre ellos. Por lo que por ahora estoy probando solo con ESLint)

Estoy trabajando con react y typescript.
https://i.imgur.com/9EgDbIW.png

Lo que quiero hacer es que el if, for, while... le agregue el "(" al lado y no separado (quiero que sea if() en vez de if ()).
También quiero que aproveche los 120 caracteres por línea antes de que mueva el código a la siguiente o lo ordene, por ejemplo a mi me gusta que quede como la línea 18 y no como la 11.
Por ultimo quiero que const [personA, setPersonA] = useState(0) no aparezca así, a mi gusto debería estar así: const [ personA, setPersonA ] = useState(0)

Tienen idea como manejar eso ?, busqué y no encontré como hacerlo. Lo mejor que hice fue que en ESLint no haga nada respecto a lo de la línea 18, pero si le agrego prettier hace lo que quiere y se acomoda como en la línea 11. Pero también me pasa que como lo acomoda prettier me genera errores y eso que traté de que la config fuera similar.

Esto es lo que tengo ahora mismo en el código de .eslintrc.json (me falta lo de los 120 caracteres por línea)

Código:

{ "env": { "browser": true, "es2021": true }, "extends": [ "eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended", "plugin:react/jsx-runtime" ], "overrides": [], "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaVersion": "latest", "sourceType": "module", "ecmaFeatures": { "jsx": true } }, "plugins": [ "react", "@typescript-eslint" ], "rules": { "padding-line-between-statements": ["error", { "blankLine": "always", "prev": ["const", "let", "var"], "next": "*"}, {"blankLine": "always", "prev": ["*"], "next": ["const", "let", "var", "return", "for"]} ] } }

Saludos