eslint-plugin-smarthr 0.2.23 → 0.2.24

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.24](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.23...v0.2.24) (2023-03-10)
+
+
+### Features
+
+* next.js, react-routerのLinkコンポーネントに対応するオプションを追加 ([#59](https://github.com/kufu/eslint-plugin-smarthr/issues/59)) ([88996e8](https://github.com/kufu/eslint-plugin-smarthr/commit/88996e88dfd4c14bfaaa36594663737d47f1f029))
+
 ### [0.2.23](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.22...v0.2.23) (2023-03-09)
 
 ### [0.2.22](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.21...v0.2.22) (2023-01-27)

package/package.json

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

package/rules/a11y-anchor-has-href-attribute/README.md

@@ -12,7 +12,13 @@
 ```js
 {
   rules: {
-    'smarthr/a11y-anchor-has-href-attribute': 'error', // 'warn', 'off'
+    'smarthr/a11y-anchor-has-href-attribute': [
+      'error', // 'warn', 'off'
+      // {
+      //   nextjs: true,
+      //   react_router: true,
+      // },
+    ]
   },
 }
 ```
@@ -32,4 +38,10 @@
 <a href="https://www.google.com/search">any</a>
 <XxxAnchor href={hoge}>any</XxxAnchor>
 <XxxLink href={undefined}>any</XxxLink>
+
+// nextjs: true
+<Link href={hoge}><a>any</a></Link>
+
+// react_router: true
+<Link to={hoge}>any</Link>
 ```

package/rules/a11y-anchor-has-href-attribute/index.js

@@ -7,34 +7,84 @@ const EXPECTED_NAMES = {
 }
 
 const REGEX_TARGET = /(Anchor|Link|^a)$/
-const findHref = (a) => a.name?.name == 'href'
+const check = (node, option) => {
+  let result = baseCheck(node)
+
+  if (
+    result && (
+      (option.nextjs && !nextCheck(node)) ||
+      (option.react_router && !reactRouterCheck(node))
+    )
+  ) {
+    result = null
+  }
+
+  return result
+}
+const baseCheck = (node) => {
+  const nodeName = node.name.name || ''
+
+  if (nodeName.match(REGEX_TARGET)) {
+    const href = node.attributes.find((a) => a.name?.name == 'href')
+
+    if (!href || !href.value) {
+      return nodeName
+    }
+  }
+
+  return false
+}
+const nextCheck = (node) => {
+  // HINT: next/link で `Link>a` という構造がありえるので直上のJSXElementを調べる
+  const target = node.parent.parent.openingElement
+
+  if (target) {
+    return baseCheck(target)
+  }
+
+  return false
+}
+const reactRouterCheck = (node) => {
+  const href = node.attributes.find((a) => a.name?.name == 'to')
+
+  return !href || !href.value
+}
+
+const SCHEMA = [
+  {
+    type: 'object',
+    properties: {
+      nextjs: { type: 'boolean' },
+      react_router: { type: 'boolean' },
+    },
+    additionalProperties: false,
+  }
+]
 
 module.exports = {
   meta: {
     type: 'problem',
-    schema: [],
+    schema: SCHEMA,
   },
   create(context) {
+    const option = context.options[0] || {}
+
     return {
       ...generateTagFormatter({ context, EXPECTED_NAMES }),
       JSXOpeningElement: (node) => {
-        const nodeName = node.name.name || ''
-
-        if (nodeName.match(REGEX_TARGET)) {
-          const href = node.attributes.find(findHref)
+        const nodeName = check(node, option)
 
-          if (!href || !href.value) {
-            context.report({
-              node,
-              message: `${nodeName} に href 属性を設定してください。
+        if (nodeName) {
+          context.report({
+            node,
+            message: `${nodeName} に href 属性を設定してください。
  - onClickなどでページ遷移する場合、href属性に遷移先のURIを設定してください。Cmd + clickなどのキーボードショートカットに対応出来ます。
  - onClickなどの動作がURLの変更を行わない場合、リンクではなくbuttonでマークアップすることを検討してください。
  - リンクを無効化することを表したい場合、href属性に undefined を設定してください。`,
-            })
-          }
+          })
         }
       },
     }
   },
 }
-module.exports.schema = []
+module.exports.schema = SCHEMA

package/test/a11y-anchor-has-href-attribute.js

@@ -41,6 +41,14 @@ ruleTester.run('a11y-anchor-has-href-attribute', rule, {
     {
       code: `<Link href="hoge">ほげ</Link>`,
     },
+    {
+      code: `<Link href="hoge"><a>ほげ</a></Link>`,
+      options: [{ nextjs: true }],
+    },
+    {
+      code: `<Link to="hoge">ほげ</Link>`,
+      options: [{ react_router: true }],
+    },
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
@@ -52,5 +60,8 @@ ruleTester.run('a11y-anchor-has-href-attribute', rule, {
     { code: `<Anchor>hoge</Anchor>`, errors: [{ message: generateErrorText('Anchor') }] },
     { code: `<HogeLink>hoge</HogeLink>`, errors: [{ message: generateErrorText('HogeLink') }] },
     { code: `<HogeLink href>hoge</HogeLink>`, errors: [{ message: generateErrorText('HogeLink') }] },
+    { code: `<HogeLink href="hoge"><a>hoge</a></HogeLink>`, errors: [{ message: generateErrorText('a') }] },
+    { code: `<HogeLink><a>hoge</a></HogeLink>`, options: [{ nextjs: true }], errors: [{ message: generateErrorText('a') }] },
+    { code: `<HogeLink to="hoge">hoge</HogeLink>`, errors: [{ message: generateErrorText('HogeLink') }] },
   ]
 })