# smarthr/trim-props

文字列型のpropsについて、先頭末尾に空白文字を含む文字列の設定を禁止させたい場合に利用します。このルールはCLIオプションの `--fix` で自動的に修正可能です。

## なぜpropsの前後空白を禁止する必要があるのか

JSXの属性に設定する文字列の前後に空白文字が含まれていると、予期しない動作やバグの原因となります：

### 意図しない空白の混入

開発者が意図せず文字列の前後に空白を含めてしまうケースがあります：

- コピー＆ペーストによる空白の混入
- フォーマッターによる自動整形時の意図しない空白追加
- 手動入力時の入力ミス

### バグの原因となる

前後の空白文字は視覚的に気づきにくく、以下のような問題を引き起こします：

- URL属性に空白が含まれるとリンクが正しく機能しない
- data属性に空白が含まれるとセレクタが正しく動作しない
- alt属性に空白が含まれると不自然な表示になる

### テストの信頼性低下

テストコードで要素を検索する際、空白の有無により検索結果が変わってしまい、テストが不安定になる可能性があります。

このルールを適用することで、これらの問題を未然に防ぎ、コードの品質を保つことができます。

## 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>
```