eslint-plugin-smarthr 0.2.16 → 0.2.17

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.
 
+### [0.2.17](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.15...v0.2.17) (2023-01-12)
+
+
+### Features
+
+* a11y-radio-has-name-attributeをinput, select, textareaに対してname属性を必須にするルール a11y-input-has-name-attribute に変更する ([#50](https://github.com/kufu/eslint-plugin-smarthr/issues/50)) ([f278bf8](https://github.com/kufu/eslint-plugin-smarthr/commit/f278bf8f094dab8b01b492ca24444f5ab3812b09))
+* ラジオボタンにnameを強制するルールを追加 ([97792cf](https://github.com/kufu/eslint-plugin-smarthr/commit/97792cf276e3400cb6e01a01ef4cf104de5db190))
+
+
+### Bug Fixes
+
+* no-import-other-domain、require-barrel-import でignoresオプションを指定するとエラーが発生する問題を修正する ([#49](https://github.com/kufu/eslint-plugin-smarthr/issues/49)) ([8526236](https://github.com/kufu/eslint-plugin-smarthr/commit/85262365d105c1afa4fd53662825c4c51cb84531))
+* prohibit-path-within-template-literalのpathオブジェクト名の解析の際、エラーになるパターンがあったため修正する ([#48](https://github.com/kufu/eslint-plugin-smarthr/issues/48)) ([715e485](https://github.com/kufu/eslint-plugin-smarthr/commit/715e485f3679e4ca2eb9675b67b8f452f9707096))
+
 ### [0.2.16](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.15...v0.2.16) (2022-12-21)
 
 

package/README.md

@@ -2,6 +2,7 @@
 
 - [a11y-clickable-element-has-text](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-clickable-element-has-text)
 - [a11y-image-has-alt-attribute](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-image-has-alt-attribute)
+- [a11y-input-has-name-attribute](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-input-has-name-attribute)
 - [a11y-prohibit-input-placeholder](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-prohibit-input-placeholder)
 - [a11y-trigger-has-button](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-trigger-has-button)
 - [best-practice-for-date](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/best-practice-for-date)

package/libs/format_styled_components.js

@@ -37,10 +37,7 @@ const generateTagFormatter = ({ context, EXPECTED_NAMES }) => ({
     if (invalidNameNode) {
       context.report({
         node: invalidNameNode,
-        messageId: 'format-styled-components',
-        data: {
-          message: "styled-components をimportする際は、名称が`styled` となるようにしてください。例: `import styled from 'styled-components'`",
-        },
+        message: "styled-components をimportする際は、名称が`styled` となるようにしてください。例: `import styled from 'styled-components'`",
       });
     }
   },
@@ -58,10 +55,7 @@ const generateTagFormatter = ({ context, EXPECTED_NAMES }) => ({
             if (!extended.match(extendedregex)) {
               context.report({
                 node: node.parent,
-                messageId: 'format-styled-components',
-                data: {
-                  message: `${extended}を正規表現 "${extendedregex.toString()}" がmatchする名称に変更してください`,
-                },
+                message: `${extended}を正規表現 "${extendedregex.toString()}" がmatchする名称に変更してください`,
               });
             }
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "0.2.16",
+  "version": "0.2.17",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",

package/rules/a11y-clickable-element-has-text/index.js

@@ -25,10 +25,6 @@ const filterFalsyJSXText = (cs) => cs.filter((c) => (
 module.exports = {
   meta: {
     type: 'problem',
-    messages: {
-      'format-styled-components': '{{ message }}',
-      'a11y-clickable-element-has-text': '{{ message }}',
-    },
     schema: SCHEMA,
   },
   create(context) {
@@ -89,7 +85,7 @@ module.exports = {
 
               return (!!a.value.value || a.value.type === 'JSXExpressionContainer') ? a : prev
             }, null)
-            
+
             if (result || (existRole && existAriaLabel)) {
               return true
             }
@@ -107,10 +103,7 @@ module.exports = {
         if (!child) {
           context.report({
             node,
-            messageId: 'a11y-clickable-element-has-text',
-            data: {
-              message: 'a, button要素にはテキストを設定してください。要素内にアイコン、画像のみを設置する場合はSmartHR UIのvisuallyHiddenText、通常のHTML要素にはaltなどの代替テキスト用属性を指定してください',
-            },
+            message: 'a, button要素にはテキストを設定してください。要素内にアイコン、画像のみを設置する場合はSmartHR UIのvisuallyHiddenText、通常のHTML要素にはaltなどの代替テキスト用属性を指定してください',
           });
         }
       },

package/rules/a11y-image-has-alt-attribute/index.js

@@ -9,7 +9,7 @@ const EXPECTED_NAMES = {
 
 const isWithinSvgJsxElement = (node) => {
   if (
-    node.type === 'JSXElement' && 
+    node.type === 'JSXElement' &&
     node.openingElement.name?.name === 'svg'
   ) {
     return true
@@ -25,10 +25,6 @@ const isWithinSvgJsxElement = (node) => {
 module.exports = {
   meta: {
     type: 'problem',
-    messages: {
-      'format-styled-components': '{{ message }}',
-      'a11y-image-has-alt-attribute': '{{ message }}',
-    },
     schema: [],
   },
   create(context) {
@@ -36,7 +32,7 @@ module.exports = {
       ...generateTagFormatter({ context, EXPECTED_NAMES }),
       JSXOpeningElement: (node) => {
         const matcher = (node.name.name || '').match(/(img|image)$/i) // HINT: Iconは別途テキストが存在する場合が多いためチェックの対象外とする
-        if (matcher) { 
+        if (matcher) {
           const alt = node.attributes.find((a) => a.name?.name === 'alt')
 
           let message = ''
@@ -52,10 +48,7 @@ module.exports = {
           if (message) {
             context.report({
               node,
-              messageId: 'a11y-image-has-alt-attribute',
-              data: {
-                message,
-              },
+              message,
             });
           }
         }

package/rules/a11y-input-has-name-attribute/README.md

@@ -0,0 +1,53 @@
+# smarthr/a11y-input-has-name-attribute
+
+- input, textarea, select に name 属性を設定することを強制するルールです。
+  - input は name を設定することでブラウザの補完機能が有効になる可能性が高まります。
+    - 補完機能はブラウザによって異なるため、補完される可能性が上がるよう、name には半角英数の小文字・大文字と一部記号(`_ , [, ]`)のみ利用可能です。
+  - input[type="radio"] は name を適切に設定することでラジオグループが確立され、キーボード操作しやすくなる等のメリットがあります。
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/a11y-input-has-name-attribute': 'error', // 'warn', 'off'
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+<RadioButton />
+<Input type="radio" />
+<input type="text" />
+<Textarea />
+<Select />
+```
+
+
+```jsx
+import styled from 'styled-components';
+
+const StyledHoge = styled.input``;
+const StyledFuga = styled(Input)``;
+const StyledPiyo = styled(RadioButton)``;
+```
+
+## ✅ Correct
+
+```jsx
+<RadioButton name="hoge" />
+<Input type="radio" name="fuga" />
+<input type="text" name="any" />
+<Textarea name="some" />
+<Select name="piyo" />
+```
+
+```jsx
+import styled from 'styled-components';
+
+const StyledInput = styled.input``;
+const StyledInput = styled(Input)``;
+const StyledRadioButton = styled(RadioButton)``;
+```

package/rules/a11y-input-has-name-attribute/index.js

@@ -0,0 +1,64 @@
+const { generateTagFormatter } = require('../../libs/format_styled_components');
+
+const EXPECTED_NAMES = {
+  'RadioButton$': 'RadioButton$',
+  '(i|I)nput$': 'Input$',
+  '(t|T)extarea$': 'Textarea$',
+  '(s|S)elect$': 'Select$',
+}
+const TARGET_TAG_NAME_REGEX = new RegExp(`(${Object.keys(EXPECTED_NAMES).join('|')})`)
+const INPUT_NAME_REGEX = /^[a-zA-Z0-9_\[\]]+$/
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    messages: {
+      'format-styled-components': '{{ message }}',
+      'a11y-input-has-name-attribute': '{{ message }}',
+    },
+    schema: [],
+  },
+  create(context) {
+    return {
+      ...generateTagFormatter({ context, EXPECTED_NAMES }),
+      JSXOpeningElement: (node) => {
+        const nodeName = node.name.name || '';
+
+        if (!nodeName.match(TARGET_TAG_NAME_REGEX)) {
+          return
+        }
+
+        const nameAttr = node.attributes.find((a) => a?.name?.name === 'name')
+
+        if (!nameAttr) {
+          const isRadio =
+            nodeName.match(/RadioButton$/) ||
+            (nodeName.match(/(i|I)nput$/) && node.attributes.some(
+              (a) => a.name?.name === 'type' && a.value.value === 'radio'
+            ));
+
+          context.report({
+            node,
+            messageId: 'a11y-input-has-name-attribute',
+            data: {
+              message: `${nodeName} にname属性を指定してください。適切に指定することで${isRadio ? 'グループが確立され、キーボード操作しやすくなる' : 'ブラウザの自動補完が有効化される'}などのメリットがあります。`,
+            },
+          });
+        } else {
+          const nameValue = nameAttr.value?.value || ''
+
+          if (nameValue && !nameValue.match(INPUT_NAME_REGEX)) {
+            context.report({
+              node,
+              messageId: 'a11y-input-has-name-attribute',
+              data: {
+                message: `${nodeName} のname属性の値(${nameValue})はブラウザの自動補完が適切に行えない可能性があるため ${INPUT_NAME_REGEX.toString()} にmatchするフォーマットで命名してください。`,
+              },
+            });
+          }
+        }
+      },
+    };
+  },
+};
+module.exports.schema = [];

package/rules/a11y-prohibit-input-placeholder/index.js

@@ -12,10 +12,6 @@ const EXPECTED_NAMES = {
 module.exports = {
   meta: {
     type: 'suggestion',
-    messages: {
-      'format-styled-components': '{{ message }}',
-      'a11y-prohibit-input-placeholder': '{{ message }}',
-    },
     schema: [],
   },
   create(context) {
@@ -41,10 +37,7 @@ module.exports = {
             if (!tooltipMessage) {
               context.report({
                 node: placeholder,
-                messageId: 'a11y-prohibit-input-placeholder',
-                data: {
-                  message: `${name} にはplaceholder属性を単独で利用せず、tooltipMessageオプションのみ、もしくはplaceholderとtooltipMessageの併用を検討してください。 (例: '<${name} tooltipMessage="ヒント" />', '<${name} tooltipMessage={hint} placeholder={hint} />')`,
-                },
+                message: `${name} にはplaceholder属性を単独で利用せず、tooltipMessageオプションのみ、もしくはplaceholderとtooltipMessageの併用を検討してください。 (例: '<${name} tooltipMessage="ヒント" />', '<${name} tooltipMessage={hint} placeholder={hint} />')`,
               })
             }
           } else if (name.match(/ComboBox$/)) {
@@ -53,10 +46,10 @@ module.exports = {
 
             node.attributes.forEach((a) => {
               switch(a.name?.name) {
-                case 'defaultItem': 
+                case 'defaultItem':
                   defaultItem = a
                   break
-                case 'dropdownHelpMessage': 
+                case 'dropdownHelpMessage':
                   dropdownHelpMessage = a
                   break
               }
@@ -65,30 +58,21 @@ module.exports = {
             if (defaultItem) {
               context.report({
                 node: placeholder,
-                messageId: 'a11y-prohibit-input-placeholder',
-                data: {
-                  message: `${name} にはdefaultItemが設定されているため、placeholder属性を閲覧出来ません。削除してください。`,
-                },
+                message: `${name} にはdefaultItemが設定されているため、placeholder属性を閲覧出来ません。削除してください。`,
               })
             } else if (!dropdownHelpMessage) {
               context.report({
                 node: placeholder,
-                messageId: 'a11y-prohibit-input-placeholder',
-                data: {
-                  message: `${name} にはplaceholder属性は設定せず、以下のいずれか、もしくは組み合わせての対応を検討してください。
+                message: `${name} にはplaceholder属性は設定せず、以下のいずれか、もしくは組み合わせての対応を検討してください。
  - 選択肢をどんな値で絞り込めるかの説明をしたい場合は dropdownHelpMessage 属性に変更してください。
  - 空の値の説明のためにplaceholderを利用している場合は defaultItem 属性に変更してください。
  - 上記以外の説明を行いたい場合、ヒント用要素を設置してください。(例: '<div><${name} /><Hint>ヒント</Hint></div>')`,
-                },
               })
             }
           } else {
             context.report({
               node: placeholder,
-              messageId: 'a11y-prohibit-input-placeholder',
-              data: {
-                message: `${name} にはplaceholder属性は設定せず、別途ヒント用要素の利用を検討してください。(例: '<div><${name} /><Hint>ヒント</Hint></div>')`,
-              },
+              message: `${name} にはplaceholder属性は設定せず、別途ヒント用要素の利用を検討してください。(例: '<div><${name} /><Hint>ヒント</Hint></div>')`,
             })
           }
         }

package/rules/a11y-trigger-has-button/index.js

@@ -18,10 +18,6 @@ const filterFalsyJSXText = (cs) => cs.filter((c) => (
 module.exports = {
   meta: {
     type: 'problem',
-    messages: {
-      'format-styled-components': '{{ message }}',
-      'a11y-trigger-has-button': '{{ message }}',
-    },
     schema: [],
   },
   create(context) {
@@ -52,10 +48,7 @@ module.exports = {
         if (children.length > 1) {
           context.report({
             node,
-            messageId: 'a11y-trigger-has-button',
-            data: {
-              message: `${match[1]}Trigger の直下には複数のコンポーネントを設置することは出来ません。buttonコンポーネントが一つだけ設置されている状態にしてください`,
-            },
+            message: `${match[1]}Trigger の直下には複数のコンポーネントを設置することは出来ません。buttonコンポーネントが一つだけ設置されている状態にしてください`,
           })
 
           return
@@ -74,10 +67,7 @@ module.exports = {
           ) {
             context.report({
               node: c,
-              messageId: 'a11y-trigger-has-button',
-              data: {
-                message: `${match[1]}Trigger の直下にはbuttonコンポーネントのみ設置してください`,
-              },
+              message: `${match[1]}Trigger の直下にはbuttonコンポーネントのみ設置してください`,
             })
           }
         })

package/rules/best-practice-for-date/index.js

@@ -1,9 +1,6 @@
 module.exports = {
   meta: {
     type: 'problem',
-    messages: {
-      'best-practice-for-date': '{{ message }}',
-    },
     schema: [],
   },
   create(context) {
@@ -15,10 +12,7 @@ module.exports = {
         ) {
           context.report({
             node,
-            messageId: 'best-practice-for-date',
-            data: {
-              message: "'new Date(arg)' のように引数一つのみの指定方は実行環境により結果が変わる可能性があるため 'new Date(2022, 12 - 1, 31)' のようにparseするなど他の方法を検討してください。",
-            },
+            message: "'new Date(arg)' のように引数一つのみの指定方は実行環境により結果が変わる可能性があるため 'new Date(2022, 12 - 1, 31)' のようにparseするなど他の方法を検討してください。",
           });
         }
       },
@@ -29,10 +23,7 @@ module.exports = {
         ) {
           context.report({
             node,
-            messageId: 'best-practice-for-date',
-            data: {
-              message: 'Date.parse は日付形式の解釈がブラウザによって異なるため、他の手段を検討してください',
-            },
+            message: 'Date.parse は日付形式の解釈がブラウザによって異なるため、他の手段を検討してください',
           });
         }
       },

package/rules/format-import-path/index.js

@@ -82,9 +82,6 @@ const calculateRelativeImportPath = ({ importPath, filteredDirs, filteredPaths }
 module.exports = {
   meta: {
     type: 'suggestion',
-    messages: {
-      'format-import-path': '{{ message }}',
-    },
     fixable: 'code',
     schema: SCHEMA,
   },
@@ -122,10 +119,7 @@ module.exports = {
         if (importPath !== fixedImportPath) {
           context.report({
             node,
-            messageId: 'format-import-path',
-            data: {
-              message: `${fixedImportPath} に修正してください`,
-            },
+            message: `${fixedImportPath} に修正してください`,
             fix: (fixer) => fixer.replaceText(
               node,
               context.getSourceCode().getText(node).replace(new RegExp(`from '${importPath}'$`), `from '${fixedImportPath}'`)

package/rules/format-translate-component/index.js

@@ -16,9 +16,6 @@ const SCHEMA = [
 module.exports = {
   meta: {
     type: 'suggestion',
-    messages: {
-      'format-translate-component': '{{ message }}',
-    },
     schema: SCHEMA,
   },
   create(context) {
@@ -32,10 +29,7 @@ module.exports = {
         if (hit) {
           context.report({
             node,
-            messageId: 'format-translate-component',
-            data: {
-              message: `${hit} 属性は使用せず、 ${componentPath || componentName} コンポーネントを利用してください`,
-            },
+            message: `${hit} 属性は使用せず、 ${componentPath || componentName} コンポーネントを利用してください`,
           });
         }
       }
@@ -51,19 +45,19 @@ module.exports = {
 
           node.parent.children.forEach((c) => {
             switch (c.type) {
-              case 'JSXText': 
+              case 'JSXText':
                 // HINT: 空白と改行のみの場合はテキストが存在する扱いにはしない
                 if (c.value.replace(/(\s|\n)+/g, '')) {
                   existValidChild = true
                 }
 
                 break
-              case 'JSXExpressionContainer': 
+              case 'JSXExpressionContainer':
                 // TODO 変数がstringのみか判定できるなら対応したい
                 existValidChild = true
 
                 break
-              case 'JSXElement': 
+              case 'JSXElement':
                 if (c.openingElement.name.name !== 'br') {
                   existNotBrElement = true
                 }
@@ -77,16 +71,13 @@ module.exports = {
               return `${componentName} 内では <br /> 以外のタグは使えません`
             } else if (!existValidChild && !node.attributes.some((a) => a.name.name === 'dangerouslySetInnerHTML')) {
               return `${componentName} 内には必ずテキストを設置してください`
-            } 
+            }
           })()
 
           if (message) {
             context.report({
               node,
-              messageId: 'format-translate-component',
-              data: {
-                message,
-              },
+              message,
             });
           }
         }

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

@@ -11,16 +11,13 @@ const SCHEMA = [
 module.exports = {
   meta: {
     type: 'problem',
-    messages: {
-      'jsx-start-with-spread-attributes': '{{ message }}',
-    },
     fixable: 'code',
     schema: SCHEMA,
   },
   create(context) {
     return {
       JSXSpreadAttribute: (node) => {
-        // HINT: -2: 計算中 -1: 見つからなかった >= 0: 見つかった 
+        // HINT: -2: 計算中 -1: 見つからなかった >= 0: 見つかった
         const insertIndex = node.parent.attributes.reduce((h, a, i) => {
           if (h === -2) {
             if (a === node) {
@@ -40,10 +37,7 @@ module.exports = {
 
           context.report({
             node,
-            messageId: 'jsx-start-with-spread-attributes',
-            data: {
-              message: `"${attributeCode}" は意図しない上書きを防ぐため、spread attributesでない属性より先に記述してください`,
-            },
+            message: `"${attributeCode}" は意図しない上書きを防ぐため、spread attributesでない属性より先に記述してください`,
             fix: option?.fix ? (fixer) => {
               const elementNode = node.parent
               const sortedAttributes = [...elementNode.attributes].reduce((p, a, i) => {

package/rules/no-import-other-domain/index.js

@@ -36,9 +36,6 @@ const SCHEMA = [
 module.exports = {
   meta: {
     type: 'suggestion',
-    messages: {
-      'no-import-other-domain': '{{ message }}',
-    },
     fixable: 'code',
     schema: SCHEMA,
   },
@@ -122,10 +119,7 @@ module.exports = {
 
           context.report({
             node,
-            messageId: 'no-import-other-domain',
-            data: {
-              message: `別ドメインから ${importPath}${deniedModules.length ? ` の ${deniedModules.join(', ')}` : ''} がimportされています。`,
-            },
+            message: `別ドメインから ${importPath}${deniedModules.length ? ` の ${deniedModules.join(', ')}` : ''} がimportされています。`,
           })
         }
       },

package/rules/prohibit-export-array-type/index.js

@@ -1,9 +1,6 @@
 module.exports = {
   meta: {
     type: 'suggestion',
-    messages: {
-      'prohibit-export-array-type': '{{ message }}',
-    },
     schema: [],
   },
   create(context) {
@@ -11,10 +8,7 @@ module.exports = {
       if (node.declaration?.typeAnnotation?.type === 'TSArrayType') {
         context.report({
           node,
-          messageId: 'prohibit-export-array-type',
-          data: {
-            message: '利用する際、配列かどうかわかりにくいため、配列ではない状態でexportしてください',
-          },
+          message: '利用する際、配列かどうかわかりにくいため、配列ではない状態でexportしてください',
         })
       }
     }

package/rules/prohibit-file-name/index.js

@@ -12,9 +12,6 @@ const SCHEMA = [{
 module.exports = {
   meta: {
     type: 'suggestion',
-    messages: {
-      'prohibit-file-name': '{{ message }}',
-    },
     schema: SCHEMA,
   },
   create(context) {
@@ -48,10 +45,7 @@ module.exports = {
         messages.forEach((message) => {
           context.report({
             node,
-            messageId: 'prohibit-file-name',
-            data: {
-              message,
-            },
+            message,
           })
         })
       },

package/rules/prohibit-import/index.js

@@ -35,9 +35,6 @@ const defaultReportMessage = (moduleName, exportName) => `${moduleName}${typeof
 module.exports = {
   meta: {
     type: 'suggestion',
-    messages: {
-      'prohibit_import': '{{ message }}',
-    },
     schema: SCHEMA,
   },
   create(context) {
@@ -74,7 +71,7 @@ module.exports = {
             if (actualTarget !== sourceValue) {
               return
             }
-            
+
             const useImported = (() => {
               if (!Array.isArray(imported)) {
                 return !!imported
@@ -88,10 +85,7 @@ module.exports = {
             if (useImported) {
               context.report({
                 node,
-                messageId: 'prohibit_import',
-                data: {
-                  message: reportMessage ? reportMessage.replaceAll('{{module}}', node.source.value).replaceAll('{{export}}', useImported) : defaultReportMessage(node.source.value, useImported)
-                },
+                message: reportMessage ? reportMessage.replaceAll('{{module}}', node.source.value).replaceAll('{{export}}', useImported) : defaultReportMessage(node.source.value, useImported)
               });
             }
           })

package/rules/prohibit-path-within-template-literal/index.js

@@ -29,9 +29,6 @@ const SCHEMA = [
 module.exports = {
   meta: {
     type: 'suggestion',
-    messages: {
-      'prohibit-path-within-template-literal': '{{ message }}',
-    },
     schema: SCHEMA,
   },
   create(context) {
@@ -46,10 +43,7 @@ module.exports = {
           if (name) {
             context.report({
               node: exp,
-              messageId: 'prohibit-path-within-template-literal',
-              data: {
-                message: `${name}は \`\` で囲まないでください。queryStringを結合するなどのURL生成は ${name} 内で行います。 (例: ${name}({ query: { hoge: 'abc' } })`,
-              },
+              message: `${name}は \`\` で囲まないでください。queryStringを結合するなどのURL生成は ${name} 内で行います。 (例: ${name}({ query: { hoge: 'abc' } })`,
             });
           }
         })

package/rules/redundant-name/index.js

@@ -191,10 +191,7 @@ const handleReportBetterName = ({
     if (candidates.length > 0) {
       context.report({
         node,
-        messageId: `${key}-name`,
-        data: {
-          message: generateMessage({ name, betterName: candidates.join(', ') }),
-        },
+        message: generateMessage({ name, betterName: candidates.join(', ') }),
       });
     }
   }
@@ -226,10 +223,7 @@ const generateTypeRedundant = (args) => {
       SuffixedName = `${typeName}${suffix[0]}`
       report = {
         node,
-        messageId: 'type-name/invalid-suffix',
-        data: {
-          message: `type ${typeName} の名称の末尾に ${suffix.join(', ')} ${suffix.length > 1 ? 'のいずれか' : ''}を追加してください`,
-        },
+        message: `type ${typeName} の名称の末尾に ${suffix.join(', ')} ${suffix.length > 1 ? 'のいずれか' : ''}を追加してください`,
       }
     }
 
@@ -246,10 +240,7 @@ const generateTypeRedundant = (args) => {
     if (SuffixedName !== betterName) {
       report = {
         node,
-        messageId: 'type-name',
-        data: {
-          message: `type ${typeName} の名称からパスで推測できる箇所を取り除いてしてください (例: ${betterName})`,
-        },
+        message: `type ${typeName} の名称からパスで推測できる箇所を取り除いてしてください (例: ${betterName})`,
       }
     }
 
@@ -392,17 +383,6 @@ const generateMethodRedundant = (args) => {
 module.exports = {
   meta: {
     type: 'suggestion',
-    messages: {
-      'file-name': ' {{ message }}',
-      'type-name': '{{ message }}',
-      'type-name/invalid-suffix': '{{ message }}',
-      'property-name': ' {{ message }}',
-      'function-name': ' {{ message }}',
-      'functionParams-name': ' {{ message }}',
-      'variable-name': ' {{ message }}',
-      'class-name': ' {{ message }}',
-      'method-name': ' {{ message }}',
-    },
     schema: SCHEMA,
   },
   create(context) {

package/rules/require-barrel-import/index.js

@@ -75,9 +75,6 @@ const SCHEMA = [
 module.exports = {
   meta: {
     type: 'suggestion',
-    messages: {
-      'require-barrel-import': '{{ message }}',
-    },
     schema: SCHEMA,
   },
   create(context) {
@@ -183,10 +180,7 @@ module.exports = {
 
           context.report({
             node,
-            messageId: 'require-barrel-import',
-            data: {
-              message: deniedModules.length ? `${deniedModules.join(', ')} は ${noExt} からimportしてください` :  `${noExt} からimportするか、${barrel} のbarrelファイルを削除して直接import可能にしてください`,
-            },
+            message: deniedModules.length ? `${deniedModules.join(', ')} は ${noExt} からimportしてください` :  `${noExt} からimportするか、${barrel} のbarrelファイルを削除して直接import可能にしてください`,
           });
         }
       },

package/rules/require-declaration/index.js

@@ -43,9 +43,6 @@ const useRegex = (use) => {
 module.exports = {
   meta: {
     type: 'suggestion',
-    messages: {
-      'require-declaration': '{{ message }}',
-    },
     schema: SCHEMA,
   },
   create(context) {
@@ -102,10 +99,7 @@ module.exports = {
             if (!hit) {
               context.report({
                 node,
-                messageId: 'require-declaration',
-                data: {
-                  message: localOption.reportMessage || `${localOption.type} ${requireDeclaration}が宣言されていません`,
-                },
+                message: localOption.reportMessage || `${localOption.type} ${requireDeclaration}が宣言されていません`,
               })
             } else if (localOption.use) {
               const code = context.getSourceCode().getText(hit)
@@ -115,10 +109,7 @@ module.exports = {
                 if (!code.match(useRegex(u)) && (!localOption.reportMessage || !reported)) {
                   context.report({
                     node: hit,
-                    messageId: 'require-declaration',
-                    data: {
-                      message: localOption.reportMessage || `${localOption.type} ${requireDeclaration} では ${u} を利用してください`,
-                    },
+                    message: localOption.reportMessage || `${localOption.type} ${requireDeclaration} では ${u} を利用してください`,
                   })
                   reported = true
                 }

package/rules/require-export/index.js

@@ -23,9 +23,6 @@ const fetchEdgeDeclaration = (node) => {
 module.exports = {
   meta: {
     type: 'suggestion',
-    messages: {
-      'require-export': '{{ message }}',
-    },
     schema: SCHEMA,
   },
   create(context) {
@@ -76,10 +73,7 @@ module.exports = {
           if (notExistsExports.length) {
             context.report({
               node,
-              messageId: 'require-export',
-              data: {
-                message: `${notExistsExports.join(', ')} をexportしてください`,
-              },
+              message: `${notExistsExports.join(', ')} をexportしてください`,
             })
           }
         })

package/rules/require-import/index.js

@@ -35,9 +35,6 @@ const defaultReportMessage = (moduleName, exportName) => `${moduleName}${typeof
 module.exports = {
   meta: {
     type: 'suggestion',
-    messages: {
-      'require_import': '{{ message }}',
-    },
     schema: SCHEMA,
   },
   create(context) {
@@ -81,10 +78,7 @@ module.exports = {
             const reporter = (item) => {
               context.report({
                 node,
-                messageId: 'require_import',
-                data: {
-                  message: reportMessage ? reportMessage.replaceAll('{{module}}', actualTarget).replaceAll('{{export}}', item) : defaultReportMessage(actualTarget, item)
-                },
+                message: reportMessage ? reportMessage.replaceAll('{{module}}', actualTarget).replaceAll('{{export}}', item) : defaultReportMessage(actualTarget, item)
               })
             }
 

package/rules/trim-props/index.js

@@ -1,9 +1,6 @@
 module.exports = {
   meta: {
     type: 'suggestion',
-    messages: {
-      'trim-props': '{{ message }}',
-    },
     schema: [],
     fixable: 'whitespace',
   },
@@ -20,10 +17,7 @@ module.exports = {
             return context.report({
               node,
               loc: current.loc,
-              messageId: 'trim-props',
-              data: {
-                message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください',
-              },
+              message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください',
               fix(fixer) {
                 return fixer.replaceTextRange([attribute.range[0] + 1, attribute.range[1] - 1], props.trim())
               },

package/test/a11y-input-has-name-attribute.js

@@ -0,0 +1,54 @@
+const rule = require('../rules/a11y-input-has-name-attribute');
+const RuleTester = require('eslint').RuleTester;
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2018,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+});
+
+ruleTester.run('a11y-input-has-name-attribute', rule, {
+  valid: [
+    { code: `import styled from 'styled-components'` },
+    { code: `import styled, { css } from 'styled-components'` },
+    { code: `import { css } from 'styled-components'` },
+    { code: 'const HogeInput = styled.input``' },
+    { code: 'const HogeInput = styled(Input)``' },
+    { code: 'const HogeRadioButton = styled(RadioButton)``' },
+    { code: 'const HogeSelect = styled(Select)``' },
+    { code: 'const HogeSelect = styled.select``' },
+    { code: 'const HogeTextarea = styled(Textarea)``' },
+    { code: 'const HogeTextarea = styled.textarea``' },
+    { code: '<input type="radio" name="hoge" />' },
+    { code: '<HogeInput type="radio" name="hoge" />' },
+    { code: '<HogeRadioButton name="hoge" />' },
+    { code: '<textarea name="hoge" />' },
+    { code: '<HogeTextarea name="hoge" />' },
+    { code: '<select name="hoge" />' },
+    { code: '<Select name="hoge[0][Fuga]" />' },
+  ],
+  invalid: [
+    { code: `import hoge from 'styled-components'`, errors: [ { message: "styled-components をimportする際は、名称が`styled` となるようにしてください。例: `import styled from 'styled-components'`" } ] },
+    { code: 'const Hoge = styled.input``', errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Hoge = styled.Input``', errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Hoge = styled(RadioButton)``', errors: [ { message: `Hogeを正規表現 "/RadioButton$/" がmatchする名称に変更してください` } ] },
+    { code: '<input />', errors: [ { message: 'input にname属性を指定してください。適切に指定することでブラウザの自動補完が有効化されるなどのメリットがあります。' } ] },
+    { code: '<input type="date" />', errors: [ { message: 'input にname属性を指定してください。適切に指定することでブラウザの自動補完が有効化されるなどのメリットがあります。' } ] },
+    { code: '<Input type="checkbox" />', errors: [ { message: 'Input にname属性を指定してください。適切に指定することでブラウザの自動補完が有効化されるなどのメリットがあります。' } ] },
+    { code: '<input type="radio" />', errors: [ { message: 'input にname属性を指定してください。適切に指定することでグループが確立され、キーボード操作しやすくなるなどのメリットがあります。' } ] },
+    { code: '<HogeInput type="radio" />', errors: [ { message: 'HogeInput にname属性を指定してください。適切に指定することでグループが確立され、キーボード操作しやすくなるなどのメリットがあります。' } ] },
+    { code: '<HogeInput type="text" />', errors: [ { message: 'HogeInput にname属性を指定してください。適切に指定することでブラウザの自動補完が有効化されるなどのメリットがあります。' } ] },
+    { code: '<HogeRadioButton />', errors: [ { message: 'HogeRadioButton にname属性を指定してください。適切に指定することでグループが確立され、キーボード操作しやすくなるなどのメリットがあります。' } ] },
+    { code: '<select />', errors: [ { message: 'select にname属性を指定してください。適切に指定することでブラウザの自動補完が有効化されるなどのメリットがあります。' } ] },
+    { code: '<HogeSelect />', errors: [ { message: 'HogeSelect にname属性を指定してください。適切に指定することでブラウザの自動補完が有効化されるなどのメリットがあります。' } ] },
+    { code: '<textarea />', errors: [ { message: 'textarea にname属性を指定してください。適切に指定することでブラウザの自動補完が有効化されるなどのメリットがあります。' } ] },
+    { code: '<HogeTextarea />', errors: [ { message: 'HogeTextarea にname属性を指定してください。適切に指定することでブラウザの自動補完が有効化されるなどのメリットがあります。' } ] },
+    { code: '<input type="radio" name="ほげ" />', errors: [ { message: 'input のname属性の値(ほげ)はブラウザの自動補完が適切に行えない可能性があるため /^[a-zA-Z0-9_\\[\\]]+$/ にmatchするフォーマットで命名してください。' } ] },
+    { code: '<select name="hoge[fuga][0][あいうえお]" />', errors: [ { message: 'select のname属性の値(hoge[fuga][0][あいうえお])はブラウザの自動補完が適切に行えない可能性があるため /^[a-zA-Z0-9_\\[\\]]+$/ にmatchするフォーマットで命名してください。' } ] },
+  ],
+});

package/rules/a11y-radio-has-name-attribute/README.md

@@ -1,58 +0,0 @@
-# smarthr/a11y-radio-has-bane-attribute
-
-- ラジオボタンに name 属性を設定することを強制するルールです。
-  - name を適切に設定することでラジオグループが確立され、キーボード操作しやすくなる等のメリットがあります。
-
-## rules
-
-```js
-{
-  rules: {
-    'smarthr/a11y-radio-has-name-attribute': 'error', // 'warn', 'off'
-  },
-}
-```
-
-## ❌ Incorrect
-
-```jsx
-<RadioButton />
-```
-
-```jsx
-<Input type="radio" />
-```
-
-```jsx
-<input type="radio" />
-```
-
-```jsx
-import styled from 'styled-components';
-
-const StyledHoge = styled.input``;
-const StyledFuga = styled(Input)``;
-const StyledPiyo = styled(RadioButton)``;
-```
-
-## ✅ Correct
-
-```jsx
-<RadioButton name="hoge" />
-```
-
-```jsx
-<Input type="radio" name="hoge" />
-```
-
-```jsx
-<input type="radio" name="hoge" />
-```
-
-```jsx
-import styled from 'styled-components';
-
-const StyledInput = styled.input``;
-const StyledInput = styled(Input)``;
-const StyledRadioButton = styled(RadioButton)``;
-```

package/rules/a11y-radio-has-name-attribute/index.js

@@ -1,49 +0,0 @@
-const { generateTagFormatter } = require('../../libs/format_styled_components');
-
-const EXPECTED_NAMES = {
-  RadioButton$: 'RadioButton$',
-  '(i|I)nput$': 'Input$',
-};
-
-module.exports = {
-  meta: {
-    type: 'problem',
-    messages: {
-      'format-styled-components': '{{ message }}',
-      'a11y-radio-has-name-attribute': '{{ message }}',
-    },
-    schema: [],
-  },
-  create(context) {
-    return {
-      ...generateTagFormatter({ context, EXPECTED_NAMES }),
-      JSXOpeningElement: (node) => {
-        const name = node.name.name || '';
-        const isRadio =
-          (name.match(/(i|I)nput$/) &&
-            node.attributes.some(
-              (a) => a.name?.name === 'type' && a.value.value === 'radio'
-            )) ||
-          name.match(/RadioButton$/);
-
-        if (!isRadio) return;
-
-        const hasName = node.attributes.some(
-          (attribute) => attribute?.name?.name === 'name'
-        );
-
-        if (!hasName) {
-          context.report({
-            node,
-            messageId: 'a11y-radio-has-name-attribute',
-            data: {
-              message:
-                'ラジオボタンにはname属性を指定してください。nameを適切に設定することでラジオグループが確立され、キーボード操作しやすくなる等のメリットがあります。',
-            },
-          });
-        }
-      },
-    };
-  },
-};
-module.exports.schema = [];

package/test/a11y-radio-has-name-attribute.js

@@ -1,36 +0,0 @@
-const rule = require('../rules/a11y-radio-has-name-attribute');
-const RuleTester = require('eslint').RuleTester;
-
-const ruleTester = new RuleTester({
-  parserOptions: {
-    ecmaVersion: 2018,
-    ecmaFeatures: {
-      experimentalObjectRestSpread: true,
-      jsx: true,
-    },
-    sourceType: 'module',
-  },
-});
-
-ruleTester.run('a11y-radio-has-name-attribute', rule, {
-  valid: [
-    { code: `import styled from 'styled-components'` },
-    { code: `import styled, { css } from 'styled-components'` },
-    { code: `import { css } from 'styled-components'` },
-    { code: 'const HogeInput = styled.input``' },
-    { code: 'const HogeInput = styled(Input)``' },
-    { code: 'const HogeRadioButton = styled(RadioButton)``' },
-    { code: '<input type="radio" name="hoge" />' },
-    { code: '<HogeInput type="radio" name="hoge" />' },
-    { code: '<HogeRadioButton name="hoge" />' },
-  ],
-  invalid: [
-    { code: `import hoge from 'styled-components'`, errors: [ { message: "styled-components をimportする際は、名称が`styled` となるようにしてください。例: `import styled from 'styled-components'`" } ] },
-    { code: 'const Hoge = styled.input``', errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください` } ] },
-    { code: 'const Hoge = styled.Input``', errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください` } ] },
-    { code: 'const Hoge = styled(RadioButton)``', errors: [ { message: `Hogeを正規表現 "/RadioButton$/" がmatchする名称に変更してください` } ] },
-    { code: '<input type="radio" />', errors: [ { message: 'ラジオボタンにはname属性を指定してください。nameを適切に設定することでラジオグループが確立され、キーボード操作しやすくなる等のメリットがあります。' } ] },
-    { code: '<HogeInput type="radio" />', errors: [ { message: 'ラジオボタンにはname属性を指定してください。nameを適切に設定することでラジオグループが確立され、キーボード操作しやすくなる等のメリットがあります。' } ] },
-    { code: '<HogeRadioButton />', errors: [ { message: 'ラジオボタンにはname属性を指定してください。nameを適切に設定することでラジオグループが確立され、キーボード操作しやすくなる等のメリットがあります。' } ] },
-  ],
-});