<template>内に書くprop名をkebab-caseからcamelCaseに変えたい

[Hiroshiba]

内容

Vueのtemplate内で書かれているpropを、kebab-caseからcamelCaseにすると便利そうに思いました。

Vueのscript内に書くpropsはcamelCaseが推奨されています。
https://ja.vuejs.org/style-guide/rules-strongly-recommended#prop-name-casing
↑にも書いてますが、template内はkebab-caseでもcamelCaseでもどちらでも良いとのことです。

ただ、この２つを比べるとkebab-caseは面倒が増えていると感じます。

• キャメルケースを毎回ケバブケースに変えないといけなくて面倒
• 探す時にkebab-caseバージョンを検索しないといけない

またVue3.4からはv-bind:hoge=hogeを:hogeと省略できる記法が入っています。
ケースをpropとtemplate内で揃えておけばより直感的な気がします。

Pros 良くなる点

煩わしさがちょっと減る

Cons 悪くなる点

template内で使われて内で使われてる普通のHTML要素の引数にも影響があるかも。
といってもニ単語以上になってるのはアクセシビリティ関連のプロパティくらい？

実現方法

そういう公式のESLintルールが有りそうなので適用すれば一発かも
https://eslint.vuejs.org/rules/camelcase

その他

これと似たタスクです

• <template>内に書くコンポーネント名をkebab-caseからPascalCaseに変えたい #1873