ESLint Stylistic

外观

@stylistic/jsx/

jsx-sort-props ​

强制按字母顺序对属性进行排序。

一些开发人员更喜欢按字母顺序对属性名称进行排序，以便以后能够更容易地找到必要的属性。其他人则认为这增加了复杂性，并且维护起来很麻烦。

规则详情 ​

此规则检查所有 JSX 组件，并验证所有属性是否按字母顺序排序。扩展属性会重置验证。该规则的默认配置区分大小写。

此规则的不正确代码示例

jsx
<Hello lastName="Smith" firstName="John" />;

此规则的正确代码示例

jsx
<Hello firstName="John" lastName="Smith" />;
<Hello tel={5555555} {...this.props} firstName="John" lastName="Smith" />;

规则选项 ​

js
...
"@stylistic/jsx/jsx-sort-props": [<enabled>, {
  "callbacksLast": <boolean>,
  "shorthandFirst": <boolean>,
  "shorthandLast": <boolean>,
  "multiline": "ignore" | "first" | "last",
  "ignoreCase": <boolean>,
  "noSortAlphabetically": <boolean>,
  "reservedFirst": <boolean>|<array<string>>,
  "locale": "auto" | "any valid locale"
}]
...

ignoreCase ​

当为 true 时，此规则将忽略属性顺序的大小写敏感性。

此规则的正确代码示例

jsx
<Hello name="John" Number="2" />;

callbacksLast ​

当为 true 时，即使设置了 shorthandLast，回调也必须列在所有其他属性之后

jsx
<Hello tel={5555555} onClick={this._handleClick} />

shorthandFirst ​

当为 true 时，简写属性必须列在所有其他属性之前，但仍需遵循字母顺序

jsx
<Hello active validate name="John" tel={5555555} />

shorthandLast ​

当为 true 时，简写属性必须列在所有其他属性之后（除非设置了 callbacksLast），但仍需遵循字母顺序

jsx
<Hello name="John" tel={5555555} active validate />

multiline ​

强制对多行属性进行排序

  • ignore：在排序时不会考虑多行属性。

  • first：多行属性必须列在所有其他属性之前（除非设置了 shorthandFirst），但仍需遵循字母顺序。

  • last：多行属性必须列在所有其他属性之后（除非设置了 callbacksLast 或 shorthandLast），但仍需遵循字母顺序。

默认为 ignore。

jsx
// 'jsx-sort-props': [1, { multiline: 'first' }]
<Hello
  classes={{
    greetings: classes.greetings,
  }}
  active
  validate
  name="John"
  tel={5555555}
/>

// 'jsx-sort-props': [1, { multiline: 'last' }]
<Hello
  active
  validate
  name="John"
  tel={5555555}
  classes={{
    greetings: classes.greetings,
  }}
/>

noSortAlphabetically ​

当为 true 时，不会强制执行字母顺序

jsx
<Hello tel={5555555} name="John" />

reservedFirst ​

这可以是布尔值或数组选项。

当定义了 reservedFirst 时，React 保留的属性（children、dangerouslySetInnerHTML - 仅适用于 DOM 组件、key 和 ref）必须列在所有其他属性之前，但仍需遵循字母顺序

jsx
<Hello key={0} ref={johnRef} name="John">
  <div dangerouslySetInnerHTML={{__html: 'ESLint Plugin React!'}} ref={dangerDivRef} />
</Hello>

如果作为数组提供，则数组的值将覆盖保留属性的默认列表。注意：数组中的值只能是 React 保留属性的子集。

使用 reservedFirst: ["key"]，以下内容不会发出警告

jsx
<Hello key={'uuid'} name="John" ref={johnRef} />

locale ​

默认为 "auto"，即当前环境的语言环境。

此处提供的任何其他字符串都可以传递给 String.prototype.localeCompare - 请注意，未知或无效的语言环境可能会引发异常并导致崩溃。

不使用它的情况 ​

此规则是一种格式化首选项，不遵循它不会对代码的质量产生负面影响。如果按字母顺序排列道具不是编码标准的一部分，则可以关闭此规则。