@stylistic/eslint-plugin-jsx

ESLint用のJSXスタイルルール。 eslint-plugin-react から移行されました。Reactから切り離されており、一般的なJSX構文をサポートしています。

元のルールにコミットしたすべてのコントリビューターに感謝します。

ヒント

JavaScriptとTypeScriptの両方のルールを含む@stylistic/eslint-pluginの使用をお勧めします。

インストール

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コマンドラインオプションで修正できます。

全て

スペース

改行

ブラケット

インデント

JSX

ルール	説明
`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-indent`	JSXのインデントを強制します。	💼	🔧
`jsx-indent-props`	JSXのプロパティのインデントを強制します。	💼	🔧
`jsx-max-props-per-line`	JSXの1行あたりのプロパティの最大数を強制します。	💼	🔧
`jsx-newline`	jsx要素と式の後に改行を要求または禁止します。		🔧
`jsx-one-expression-per-line`	1行につき1つのJSX要素を要求します。	💼	🔧
`jsx-pascal-case`	ユーザー定義のJSXコンポーネントにPascalCaseを強制します。
`jsx-props-no-multi-spaces`	インラインJSXプロパティ間の複数スペースを禁止します。		🔧
`jsx-self-closing-comp`	子を持たないコンポーネントの余分な閉じタグを禁止します。		🔧
`jsx-sort-props`	プロパティのアルファベット順ソートを強制します。		🔧
`jsx-tag-spacing`	JSXの開始と終了ブラケットの内側と周囲の空白を強制します。	💼	🔧
`jsx-wrap-multilines`	複数行JSXの周りの括弧の不足を禁止します。	💼	🔧

合計20個のルール。

@stylistic/eslint-plugin-jsx ​

インストール ​

ルール ​

@stylistic/eslint-plugin-jsx

インストール

ルール