eslint-plugin-smarthr 3.5.1 → 4.0.1

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [4.0.1](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v4.0.0...eslint-plugin-smarthr-v4.0.1) (2026-01-04)
+
+
+### Bug Fixes
+
+* **best-practice-for-spread-syntax:** 関数に対してspread syntaxで引数を渡すパターンが誤検知される問題を修正 ([#999](https://github.com/kufu/tamatebako/issues/999)) ([3f4a163](https://github.com/kufu/tamatebako/commit/3f4a163b183305922651612d7945434dcb5fa991))
+
+## [4.0.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v3.5.1...eslint-plugin-smarthr-v4.0.0) (2026-01-04)
+
+
+### ⚠ BREAKING CHANGES
+
+* **jsx-start-with-spread-attributes:** best-practice-for-spread-syntaxにrenameし、objectに展開する場合もチェックするように修正 ([#992](https://github.com/kufu/tamatebako/issues/992))
+
+### Features
+
+* **jsx-start-with-spread-attributes:** best-practice-for-spread-syntaxにrenameし、objectに展開する場合もチェックするように修正 ([#992](https://github.com/kufu/tamatebako/issues/992)) ([b5cde40](https://github.com/kufu/tamatebako/commit/b5cde40cc85e74babe76cd00c4b639d91e142abc))
+
 ## [3.5.1](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v3.5.0...eslint-plugin-smarthr-v3.5.1) (2025-12-31)
 
 

package/README.md

@@ -31,7 +31,7 @@
 - [design-system-guideline-prohibit-double-icons](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/design-system-guideline-prohibit-double-icons)
 - [format-import-path](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/format-import-path)
 - [format-translate-component](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/format-translate-component)
-- [jsx-start-with-spread-attributes](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/jsx-start-with-spread-attributes)
+- [best-practice-for-spread-syntax](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-spread-syntax)
 - [no-import-other-domain](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/no-import-other-domain)
 - [prohibit-export-array-type](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/prohibit-export-array-type)
 - [prohibit-file-name](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/prohibit-file-name)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "3.5.1",
+  "version": "4.0.1",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",
@@ -26,7 +26,7 @@
     "json5": "^2.2.3"
   },
   "devDependencies": {
-    "typescript-eslint": "^8.50.1"
+    "typescript-eslint": "^8.51.0"
   },
   "peerDependencies": {
     "eslint": "^9"
@@ -37,5 +37,5 @@
     "eslintplugin",
     "smarthr"
   ],
-  "gitHead": "ca09d161140518cc79de3365fab83b93ff883da7"
+  "gitHead": "8dd34c6f8ed86887e4287f55b2b511e340291b32"
 }

package/rules/best-practice-for-spread-syntax/README.md

@@ -0,0 +1,116 @@
+# smarthr/best-practice-for-spread-syntax
+
+- 意図しない属性の上書きを防ぐため、spread syntax({ ...b } のようにjs, jsxでオブジェクトを展開する記述)を通常の属性より先に記述するよう促すruleです
+- eslint を `--fix` オプション付きで実行する際、 fix オプション を true にすると自動修正します
+  - !!! 要注意 !!! 自動修正は属性の並び替えだけ行うため、spread syntaxによって上書きすることを期待していたロジックが狂う可能性があります
+- jsxのspread attributesのみ、objectのspread sytaxのみチェック対象にしたい場合、checkTypeオプションに only-jsx, only-object を指定してください
+
+# spread syntax を通常の属性より後に記述した場合に発生する問題
+
+spread syntaxより先に通常の属性を記述した場合、** spread syntaxで値が上書きされる ** 可能性があります。
+
+```jsx
+const AnyComponent = (props: Props) => {
+  ...
+  return <Fuga id="ABC" {...props} />
+}
+```
+
+上記例の場合、** Props型がidを含むか? 含む場合必須か？などの確認 ** が必要になります。
+(idが必須の場合、Fugaにベタ書きしているidがそもそも不要になるため)
+また`idのデフォルト値が"ABC", propsでidが指定された場合そちらを優先` というロジックが必要かどうかを該当コードの部分だけで判断出来ず、広範囲の確認が必要になりがちです。
+特にidなど多用され、HTMLの要素が持つ属性と名前が被っている場合、意図せず上書きされてしまう問題が発生する可能性が高く危険です。
+そのため下記の様に記述することを推奨します。
+
+```jsx
+// propsがidを含む可能性がある場合
+const AnyComponent = (props: Props) => {
+  ...
+  return <Fuga {...props} id={props.id || 'ABC'} />
+}
+
+// propsがidを含む可能性がない場合(もしくはidを固定値にしたい場合)
+const AnyComponent = (props: Props) => {
+  ...
+  return <Fuga {...props} id="ABC" />
+}
+```
+
+推奨の記法では
+
+- spread syntaxによる意図せぬ上書きを回避できる
+- コードとしてデフォルト値なのか、固定値なのかが一目でわかる
+
+などのメリットがあります。
+
+例ではjsxを使用しましたが、通常のオブジェクトの場合も同様にチェックします
+
+```js
+// NG例
+const obj = {
+  fuga: 'piyo',
+  ...hoge,
+}
+
+// OK例
+const obj = {
+  ...hoge,
+  fuga: hoge.fuga || 'piyo',
+}
+```
+
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/best-practice-for-spread-syntax': [
+      'error', // 'warn', 'off'
+      {
+        fix: false // true
+        // 個別に対象指定する場合(default always)
+        // checkType: 'always', // only-jsx, only-object
+      },
+    ]
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+<AnyComponent hoge="hoge" {...props} />
+```
+
+```jsx
+<AnyComponent {...fuga} hoge="hoge" {...piyo} />
+```
+
+```jsx
+const obj = {
+  fuga: 'piyo',
+  ...hoge,
+}
+```
+
+## ✅ Correct
+
+```jsx
+<AnyComponent {...props} hoge="hoge" />
+```
+
+```jsx
+<AnyComponent {...props} hoge={props.hoge || "hoge"} />
+```
+
+```jsx
+<AnyComponent {...fuga} {...piyo} hoge="hoge" />
+```
+
+```jsx
+const obj = {
+  ...hoge,
+  fuga: hoge.fuga || 'piyo',
+}
+```

package/rules/best-practice-for-spread-syntax/index.js

@@ -0,0 +1,99 @@
+const SCHEMA = [
+  {
+    type: 'object',
+    properties: {
+      fix: { type: 'boolean', default: false },
+      checkType: { type: 'string', enum: ['always', 'only-jsx', 'only-object'], default: 'always' },
+    },
+    additionalProperties: false,
+  }
+]
+
+const CHECK_JSX_REGEX = /^(always|only-jsx)$/
+const CHECK_OBJ_REGEX = /^(always|only-object)$/
+
+// HINT: -1: 見つからなかった >= 0: 見つかった
+const getInsertIndex = (node, type, attributesKey) => {
+  const attributes = node.parent[attributesKey]
+
+  // HINT: 関数のspread elementの場合などは除外したいので属性がない場合に対応
+  if (attributes) {
+    for (let i = 0; i < attributes.length; i++) {
+      const a = attributes[i]
+
+      if (a === node) {
+        return -1
+      } else if (a.type !== type) {
+        return i
+      }
+    }
+  }
+
+  return -1
+}
+
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
+module.exports = {
+  meta: {
+    type: 'problem',
+    fixable: 'code',
+    schema: SCHEMA,
+  },
+  create(context) {
+    const option = context.options[0] || {}
+    const fix = option.fix
+    const checkType = option.checkType || 'always'
+
+    const generateAction = (type, attributesKey, fixAction) => {
+      return ((node) => {
+        const insertIndex = getInsertIndex(node, type, attributesKey)
+
+        if (insertIndex !== -1) {
+          const code = context.sourceCode.getText(node)
+
+          context.report({
+            node,
+            message: `"${code}" は意図しない上書きを防ぐため、spread syntaxでない属性より先に記述してください
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-spread-syntax`,
+            fix: fixAction ? (fixer) => {
+              const elementNode = node.parent
+              const normals = []
+              const spreads = []
+
+              elementNode[attributesKey].forEach((a, i) => {
+                if (a !== node) {
+                  if (insertIndex === i) {
+                    spreads.push(code)
+                  }
+
+                  (a.type === type ? spreads : normals).push(context.sourceCode.getText(a))
+                }
+              })
+
+              return fixer.replaceText(
+                elementNode,
+                fixAction(spreads.concat(normals), elementNode),
+              )
+            } : null
+          });
+        }
+      })
+    }
+
+    return {
+      JSXSpreadAttribute: (
+        CHECK_JSX_REGEX.test(checkType)
+          ? generateAction('JSXSpreadAttribute', 'attributes', (option.fix) && ((attributes, e) => `<${e.name.name} ${attributes.join(' ')}${e.selfClosing ? ' /' : ''}>`))
+          : undefined
+      ),
+      SpreadElement: (
+        CHECK_OBJ_REGEX.test(checkType)
+          ? generateAction('SpreadElement', 'properties', (option.fix) && ((attributes) => `{ ${attributes.join(', ')} }`))
+          : undefined
+      ),
+    }
+  },
+}
+module.exports.schema = SCHEMA

package/test/best-practice-for-spread-syntax.js

@@ -0,0 +1,63 @@
+const rule = require('../rules/best-practice-for-spread-syntax')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+})
+
+const errorMessage = (code) => `"${code}" は意図しない上書きを防ぐため、spread syntaxでない属性より先に記述してください
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-spread-syntax`
+
+ruleTester.run('best-practice-for-spread-syntax', rule, {
+  valid: [
+    { code: `<Fuga {...props} id={props.id || 'ABC'} />` },
+    { code: `<Fuga {...props1} {...props2} id="ABC" />` },
+    { code: `const hoge = { ...props, id: props.id || 'ABC' }` },
+    { code: `const hoge = { ...props1, ...props2, id: 'ABC' }` },
+    { code: `dig(target, ...keys.slice(1))` },
+  ],
+  invalid: [
+    {
+      code: `<Fuga id={props.id || 'ABC'} {...props} />`,
+      options: [ { fix: true } ],
+      errors: [ { message: errorMessage('{...props}') } ],
+      output: `<Fuga {...props} id={props.id || 'ABC'} />`
+    },
+    {
+      code: `<Fuga {...props1} id="ABC" {...props2} />`,
+      options: [ { fix: true, checkType: 'only-jsx' } ],
+      errors: [  { message: errorMessage('{...props2}') } ],
+      output: `<Fuga {...props1} {...props2} id="ABC" />`
+    },
+    {
+      code: `<Fuga id="ABC" {...props1} {...props2} />`,
+      options: [ { fix: true, checkType: 'only-jsx' } ],
+      errors: [ { message: errorMessage('{...props1}') }, { message: errorMessage('{...props2}') } ],
+      output: `<Fuga {...props1} {...props2} id="ABC" />`
+    },
+    {
+      code: `const hoge = { id: props.id || 'ABC', ...props }`,
+      options: [ { fix: true, checkType: 'only-object' } ],
+      errors: [ { message: errorMessage('...props') } ],
+      output: `const hoge = { ...props, id: props.id || 'ABC' }`
+    },
+    {
+      code: `const hoge = { ...props1, id: 'ABC', ...props2 }`,
+      options: [ { fix: true, checkType: 'only-object' } ],
+      errors: [ { message: errorMessage('...props2') } ],
+      output: `const hoge = { ...props1, ...props2, id: 'ABC' }`
+    },
+    {
+      code: `const hoge = { id: 'ABC', ...props1, ...props2 }`,
+      options: [ { fix: true, checkType: 'only-object' } ],
+      errors: [ { message: errorMessage('...props1') }, { message: errorMessage('...props2') } ],
+      output: `const hoge = { ...props1, ...props2, id: 'ABC' }`
+    },
+  ]
+})

package/rules/jsx-start-with-spread-attributes/README.md

@@ -1,31 +0,0 @@
-# smarthr/jsx-start-with-spread-attributes
-
-- jsxを記述する際、意図しない属性の上書きを防ぐため、spread-attributesを先に指定するように強制するruleです
-- eslint を `--fix` オプション付きで実行する際、 fix option を true にすると自動修正します
-
-## rules
-
-```js
-{
-  rules: {
-    'smarthr/jsx-start-with-spread-attributes': [
-      'error', // 'warn', 'off'
-      {
-        fix: false, // true
-      },
-    ]
-  },
-}
-```
-
-## ❌ Incorrect
-
-```jsx
-<AnyComponent hoge="hoge" {...props} />
-```
-
-## ✅ Correct
-
-```jsx
-<AnyComponent {...props} hoge="hoge" />
-```

package/rules/jsx-start-with-spread-attributes/index.js

@@ -1,69 +0,0 @@
-const SCHEMA = [
-  {
-    type: 'object',
-    properties: {
-      fix: { type: 'boolean', default: false },
-    },
-    additionalProperties: false,
-  }
-]
-
-/**
- * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
- */
-module.exports = {
-  meta: {
-    type: 'problem',
-    fixable: 'code',
-    schema: SCHEMA,
-  },
-  create(context) {
-    return {
-      JSXSpreadAttribute: (node) => {
-        // HINT: -2: 計算中 -1: 見つからなかった >= 0: 見つかった
-        const insertIndex = node.parent.attributes.reduce((h, a, i) => {
-          if (h === -2) {
-            if (a === node) {
-              return -1
-            }
-
-            return a.type !== 'JSXSpreadAttribute' ? i : h
-          }
-
-          return h
-        }, -2)
-
-        if (insertIndex >= 0) {
-          const option = context.options[0]
-          const attributeCode = context.sourceCode.getText(node)
-
-          context.report({
-            node,
-            message: `"${attributeCode}" は意図しない上書きを防ぐため、spread attributesでない属性より先に記述してください
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/jsx-start-with-spread-attributes`,
-            fix: option?.fix ? (fixer) => {
-              const elementNode = node.parent
-              const sortedAttributes = [...elementNode.attributes].reduce((p, a, i) => {
-                if (insertIndex === i) {
-                  p = [attributeCode, ...p]
-                }
-
-                if (a !== node) {
-                  p = [...p, context.sourceCode.getText(a)]
-                }
-
-                return p
-              }, [])
-
-              return fixer.replaceText(
-                elementNode,
-                `<${elementNode.name.name} ${sortedAttributes.join(' ')}${elementNode.selfClosing ? '/' : ''}>`
-              )
-            } : null
-          });
-        }
-      },
-    };
-  },
-}
-module.exports.schema = SCHEMA