Можно ли обойтись без префиксов в именах компонентов Vue.js?

Question

[Александр]

В style guide vue.js говорится о том, что имена компонентов должны состоять исключительно из 2 и более слов ради того чтобы избегать конфликтов с именами встроенных html элементов. Ради этого приходится городить вот такую вот лабуду:



Нельзя ли этого как-то избежать? Мне вот например кажется намного более логичным вариант с использованием PascalCase для всех кастомных компонентов и kebab-case для всех встроенных элементов. Нельзя ли данное правило закрепить где-то на уровне компиляции .vue компонентов?

Answer 1

[Aetae]

Конечно можно избежать, правила нужны для того чтоб их нарушать.)
Лично мне нравится называть файлы в kebab-case и в kebab-case же использовать компоненты внутри шаблонов. Просто потому, что это эстетически смотрится куда приятнее и вписывается в структуру html.

На коллизии можно было бы спокойно плюнуть: если вы назвали свой компонент также как какой-то новомодный html-тэг, о котором вы и не слышали, значит этот тэг вам и не нужен, однако это могло бы поломать сторонние компоненты.
Я лично просто использую однобуквенный префикс.

Энфорсить же имена файлов на уровне проекта можно например с помощью плагинов для eslint: eslint-plugin-filenames.

P.S. Единственное что: даже если вы используете PascalCase для именования компонента - Vue всё равно будет искать также и kebab-case версию, что сделано для удобства. Так что как способ избегания коллизий - это не сработает.