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

4
votes

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();
3
reactjsreact-reduxeslint

3 Answers

7
votes

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

2
votes

Failed in the next example, createDevTools fn:

eslint: function-paren-newline Unexpected newline after '('.

eslint: function-paren-newline Unexpected newline before ')'.

import React from 'react';
import { createDevTools } from 'redux-devtools';
import DockMonitor from 'redux-devtools-dock-monitor';
import LogMonitor from 'redux-devtools-log-monitor';
import SliderMonitor from 'redux-slider-monitor';

export default createDevTools(
  <DockMonitor defaultIsVisible="true" toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-w" changeMonitorKey="ctrl-m">
    <LogMonitor />
    <SliderMonitor keyboardEnabled />
  </DockMonitor>
);
0
votes

Add following line at the top of file for which you are getting this error.

/* eslint-disable func-call-spacing */

This will disable linting for func-call-spacing