eslint-plugin-smarthr 0.2.13 → 0.2.14

package/CHANGELOG.md

@@ -2,12 +2,17 @@
 
 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.14](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.13...v0.2.14) (2022-12-13)
+
+### Features
+* trim-propsルールを追加 ([#44](https://github.com/kufu/eslint-plugin-smarthr/pull/44)) 
+
 ### [0.2.13](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.12...v0.2.13) (2022-12-07)
 
 
 ### Bug Fixes
 
-* redundant-nameのarrowedNameなどで利用するファイルパスが削られすぎていたため、指定が行いにくい問題を修正する ([4d45281](https://github.com/kufu/eslint-plugin-smarthr/commit/4d45281c383a9996437f3603dd954548f428cd19))
+* redundant-nameのarrowedNameなどで利用するファイルパスが削られすぎていたため、指定が行いにくい問題を修正する ([#43](https://github.com/kufu/eslint-plugin-smarthr/issues/43)) ([6de9618](https://github.com/kufu/eslint-plugin-smarthr/commit/6de961831a9f9e0e93eeeebb80e56ecb60d9a2ff))
 
 ### [0.2.12](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.11...v0.2.12) (2022-12-07)
 

package/README.md

@@ -17,3 +17,4 @@
 - [require-declaration](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/require-declaration)
 - [require-export](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/require-export)
 - [require-import](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/require-import)
+- [trim-props](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/trim-props)

package/package.json

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

package/rules/trim-props/README.md

@@ -0,0 +1,30 @@
+# smarthr/trim-props
+
+- このルールはCLIオプションの`--fix`で自動的に修正可能です
+- 文字列型のpropsについて、先頭末尾に空白文字を含む文字列の設定を禁止させたい場合に利用します
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/trim-props': 'error', // 'warn', 'off',
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+<a href=" https://www.google.com">google</a>
+<img src={"/sample.jpg "} alt={" sample "} />
+<div data-spec=" info-area ">....</div>
+```
+
+## ✅ Correct
+
+```jsx
+<a href="https://www.google.com">google</a>
+<img src={"/sample.jpg"} alt={"sample"} />
+<div data-spec="info-area">....</div>
+```

package/rules/trim-props/index.js

@@ -0,0 +1,37 @@
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    messages: {
+      'trim-props': '{{ message }}',
+    },
+    schema: [],
+    fixable: 'whitespace',
+  },
+  create(context) {
+    return {
+      JSXOpeningElement: (node) =>
+        node.attributes.reduce((prev, current) => {
+          const attribute = current.value?.type === 'JSXExpressionContainer' ? current.value.expression : current.value
+          const props = attribute?.value
+
+          if (typeof props !== 'string') return prev
+
+          if (props.match(/(^\s+|\s+$)/)) {
+            return context.report({
+              node,
+              loc: current.loc,
+              messageId: 'trim-props',
+              data: {
+                message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください',
+              },
+              fix(fixer) {
+                return fixer.replaceTextRange([attribute.range[0] + 1, attribute.range[1] - 1], props.trim())
+              },
+            })
+          }
+          return prev
+        }, []),
+    }
+  },
+}
+module.exports.schema = []

package/test/trim-props.js

@@ -0,0 +1,78 @@
+const rule = require('../rules/trim-props')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+})
+
+ruleTester.run('trim-props', rule, {
+  valid: [
+    { code: '<a href="https://www.google.com">google</a>' },
+    { code: '<a href={"https://www.google.com"}>google</a>' },
+    { code: '<img src="/sample.jpg" alt="sample" />' },
+    { code: '<img src={"/sample.jpg"} alt={"sample"} />' },
+    { code: '<div data-spec="info-area">....</div>' },
+  ],
+  invalid: [
+    {
+      code: '<a href=" https://www.google.com">google</a>',
+      output: '<a href="https://www.google.com">google</a>',
+      errors: [{ message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください' }],
+    },
+    {
+      code: '<a href="https://www.google.com ">google</a>',
+      output: '<a href="https://www.google.com">google</a>',
+      errors: [{ message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください' }],
+    },
+    {
+      code: '<a href=" https://www.google.com ">google</a>',
+      output: '<a href="https://www.google.com">google</a>',
+      errors: [{ message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください' }],
+    },
+    {
+      code: '<a href={" https://www.google.com"}>google</a>',
+      output: '<a href={"https://www.google.com"}>google</a>',
+      errors: [{ message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください' }],
+    },
+    {
+      code: '<a href={"https://www.google.com "}>google</a>',
+      output: '<a href={"https://www.google.com"}>google</a>',
+      errors: [{ message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください' }],
+    },
+    {
+      code: '<a href={" https://www.google.com "}>google</a>',
+      output: '<a href={"https://www.google.com"}>google</a>',
+      errors: [{ message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください' }],
+    },
+    {
+      code: '<img src=" /sample.jpg" alt="sample " />',
+      output: '<img src="/sample.jpg" alt="sample" />',
+      errors: [
+        { message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください' },
+        { message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください' },
+      ],
+    },
+    {
+      code: '<img src={" /sample.jpg"} alt={"sample "} />',
+      output: '<img src={"/sample.jpg"} alt={"sample"} />',
+      errors: [
+        { message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください' },
+        { message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください' },
+      ],
+    },
+    {
+      code: '<div data-spec=" info-area ">....</div>',
+      output: '<div data-spec="info-area">....</div>',
+      errors: [{ message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください' }],
+    },
+    {
+      code: '<div data-spec={" info-area "}>....</div>',
+      output: '<div data-spec={"info-area"}>....</div>',
+      errors: [{ message: '属性に設定している文字列から先頭、末尾の空白文字を削除してください' }],
+    },
+  ],
+})