ESLint简单反应App.js括号后的意外换行符function-paren-newline答案

【问题标题】：ESLint simple react App.js Unexpected newline after parentheses function-paren-newlineESLint简单反应App.js括号后的意外换行符function-paren-newline
【发布时间】：2018-04-02 19:39:30
【问题描述】：

这个没有意义……

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

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

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

如果我将它缩进到现在开始 16 个字符的开始标记级别，因为我必须删除新行，我会收到另一个错误：预期缩进 0 个空格字符，但发现 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();

【问题讨论】：

标签： reactjs react-redux eslint

【解决方案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

【讨论】：

我不认为这条规则是关于单独一行的每个参数。此规则是关于结束 ) 之前的换行符。正是函数使用的内容 - 开始和结束符号匹配缩进。
@Sulthan 规则是关于设置为 multiline 时的规则 - 请参阅此处的示例 eslint.org/docs/rules/function-paren-newline .. 如果有换行符，则所有参数必须在 multiline 的单独行上规则通过。
我明白了，它实际上同时处理了这两个问题。
非常感谢。这么多的 linting 规则，我曾经认为我编写了风格良好的代码。这完全有效，除了它还想要在右括号前加一个逗号。

【解决方案2】：

在下一个示例中失败，createDevTools fn:

eslint: function-paren-newline '(' 之后出现意外的换行符。

eslint: function-paren-newline ')' 之前的意外换行符。

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

【讨论】：

【解决方案3】：

在您遇到此错误的文件顶部添加以下行。

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

这将禁用 func-call-spacing 的 linting

【讨论】：