Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ESLint simple react App.js Unexpected newline after parentheses function-paren-newline

This one makes no sense...

ESLint is complainig about the new line after that ( on line 11.

If I take it away and put the Provider component on the same line, and take one tab away from line 12 and 13 (App component and closing Provider tag, then it complains about:

Expected closing tag to match indentation of opening. (react/jsx-closing-tag-location)

If I do indent it to the level of opening tag which now starts 16 characters in cause I had to remove the new line, I get another error: Expected indentation of 0 space characters but found 16. (react/jsx-indent)

Is there correct syntax for this with React/Redux that works with ESLint and AirBNB spec?

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import './index.css';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';
import configureStore from './state/store/configureStore';

window.store = configureStore();

ReactDOM.render(
  <Provider store={window.store}>
    <App />
  </Provider>, document.getElementById('root'));
registerServiceWorker();
like image 642
pixelwiz Avatar asked Jan 03 '23 07:01

pixelwiz


1 Answers

It seems airbnb uses function-paren-newline: 'multiline' for that rule, which means this should pass:

ReactDOM.render(
  <Provider store={window.store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

I think you just need each argument on a separate line.

update: See demo of the rule passing/failing on eslint.org

like image 102
Austin Greco Avatar answered Jan 05 '23 20:01

Austin Greco