ESLint 样式

外观

@stylistic/

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 - 注意，未知或无效的区域设置可能会抛出异常并崩溃。

何时不使用它 ​

这条规则是格式偏好，不遵循它不会对代码质量产生负面影响。如果字母排序属性不是您编码标准的一部分，那么您可以关闭此规则。