ESLint 简单反应 App.js 括号函数-paren-newline 后出现意外的换行符

Question

这个没有意义...

ESLint 抱怨之后的新行（第 11 行。

如果我把它拿走并将 Provider 组件放在同一行，并从第 12 行和第 13 行（App 组件和关闭 Provider 标记，然后它会抱怨：

预期的结束标记与开头的缩进相匹配。 (react/jsx-closing-tag-location)

如果我将它缩进到现在开始 16 个字符的开始标记级别，因为我不得不删除新行，我会收到另一个错误：预期缩进 0 space 个字符，但找到 16 个。(react/jsx-indent)

是否有适用于 ESLint 和 AirBNB 规范的 React/Redux 的正确语法？

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

Answer 1

airbnb 似乎使用 function-paren-newline: 'multiline' 作为该规则，这意味着这应该通过：

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

我认为您只需要将每个参数放在单独的一行即可。

更新： 请参阅 eslint.org

上的 demo of the rule passing/failing

Answer 2

下一个例子失败了，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>
);

Answer 3

在出现此错误的文件顶部添加以下行。

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

这将为 func-call-spacing

禁用 linting

ESLint 简单反应 App.js 括号函数-paren-newline 后出现意外的换行符

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

reactjs

eslint

react-redux