This one makes no sense...

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

If I take it away and put the Provider ponent on the same line, and take one tab away from line 12 and 13 (App ponent and closing Provider tag, then it plains 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 './ponents/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();

This one makes no sense...

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

If I take it away and put the Provider ponent on the same line, and take one tab away from line 12 and 13 (App ponent and closing Provider tag, then it plains 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 './ponents/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();

• javascript
• node.js
• reactjs
• react-redux
• eslint

4 Answers 4

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

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>
);

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

Add

"function-paren-newline": ["off", "multiline"]

to rules in .eslintrc.js file, will disable linting for function-paren-newline for all files.