@stylistic/eslint-plugin-jsx

用于 ESLint 的 JSX 样式规则，从 eslint-plugin-react 迁移而来。与 React 解耦，支持通用 JSX 语法。

感谢所有为原始规则做出贡献的贡献者。

提示

我们建议使用 @stylistic/eslint-plugin，因为它包含 JavaScript 和 TypeScript 的规则

安装

npm i -D @stylistic/eslint-plugin-jsx

将 @stylistic/jsx 添加到您的插件列表中，并将 样式规则 的前缀从 react 更改为 @stylistic/js

扁平配置

// eslint.config.js
import stylisticJsx from '@stylistic/eslint-plugin-jsx'

export default [
  {
    plugins: {
      '@stylistic/jsx': stylisticJsx
    },
    rules: {
      'react/jsx-indent': ['error', 2],
      '@stylistic/jsx/jsx-indent': ['error', 2],
      // ...
    }
  }
]

传统配置

// .eslintrc.js
module.exports = {
  plugins: [
   '@stylistic/jsx'
  ],
  rules: {
    'react/jsx-indent': ['error', 2],
    '@stylistic/jsx/jsx-indent': ['error', 2],
    // ...
  }
}

查看 迁移指南 以了解更多详细信息。

规则

每个规则都有表情符号表示

💼

该规则是共享配置的一部分

🔧

一些报告的问题可以通过 --fix 命令行选项修复

全部

20

间距

5

换行符

5

方括号

5

缩进

2

JSX

20

规则	描述
jsx-child-element-spacing	强制或禁止在 JSX 属性和表达式中的花括号内使用空格
jsx-closing-bracket-location	强制在 JSX 中使用闭合括号的位置	💼	🔧
jsx-closing-tag-location	强制在多行 JSX 中使用闭合标签的位置	💼	🔧
jsx-curly-brace-presence	禁止在仅使用文字时使用不必要的 JSX 表达式，或强制在 JSX 子元素或属性中的文字中使用 JSX 表达式	💼	🔧
jsx-curly-newline	强制在 JSX 属性和表达式中的花括号中使用一致的换行符	💼	🔧
jsx-curly-spacing	强制或禁止在 JSX 属性和表达式中的花括号内使用空格	💼	🔧
jsx-equals-spacing	强制或禁止在 JSX 属性中的等号周围使用空格	💼	🔧
jsx-first-prop-new-line	强制在 JSX 中使用第一个属性的正确位置	💼	🔧
jsx-function-call-newline	强制在将 JSX 元素用作函数参数时，在 JSX 元素前后使用换行符。	💼	🔧
jsx-indent	强制 JSX 缩进	💼	🔧
jsx-indent-props	强制在 JSX 中缩进属性	💼	🔧
jsx-max-props-per-line	强制在 JSX 中每行上的属性数量最大值	💼	🔧
jsx-newline	要求或禁止在 jsx 元素和表达式之后使用换行符。		🔧
jsx-one-expression-per-line	要求每行一个 JSX 元素	💼	🔧
jsx-pascal-case	强制使用 PascalCase 命名用户定义的 JSX 组件
jsx-props-no-multi-spaces	不允许在内联 JSX 属性之间出现多个空格		🔧
jsx-self-closing-comp	不允许对没有子元素的组件使用额外的结束标签		🔧
jsx-sort-props	强制按字母顺序排序属性		🔧
jsx-tag-spacing	强制在 JSX 开闭括号内和周围使用空格	💼	🔧
jsx-wrap-multilines	不允许在多行 JSX 周围缺少括号	💼	🔧

总共 20 条规则。