Стоит ли использовать index в названиях файлов в React?

Question

[Дмитрий Путилов]

Всем привет, возникла вот такая вот делима. Вопрос в том, стоит или не стоит использовать название файлом в формате
/audioList/index.tsx
или все же стоит использовать
/audioList/audioList.tsx
Какие вообще есть плюсы и минусы при использовании того или иного способа. На работе против использования index.tsx в компоненте, только для public API. То бишь, в проекте должно быть примерно вот так:

Как мне сказали и если я правильно понял, что проблема использования index формата заключается в неудобстве, что тяжело искать нужный файл, потому что они все index.tsx
Но при поиске ведь, если вбить название компонента, но когда вбиваешь в поиске название компонента, в поиске отображается сразу папка, в которой и находятся все нужные тебе компоненты, а дальше просто выбираешь, как мне кажется, тут нет такой сильной проблемы.

Вторая проблема, что не удобно понять в каом файле ты работаешь, потому что все они index.tsx
Но это тоже ведь не проблема, когда открыто 2 файла, с левой стороны подписывается в какой папке лежит index.tsx, то бишь название компонента


Я с толкнулся с этой проблемой, по причине того, что начал использовать FSD и когда я дописал уже проект почти, узнал у о существовании @feature-sliced/eslint-config - это линтер для FSD и проблема в том, что он не дает называть файлы типа AudiList.tsx
Потом в export ошибка линта выдает

И вот можете расписать, пожалуйста, ваше мнение насчет этого. Плюсы и минусы и вашу позицию максимально подробно, хочу все же разобраться, что лучше, что хуже и что приоритетнее

Comments

[WbICHA]

это линтер для FSD и проблема в том, что он не дает называть файлы типа AudiList.tsx

Во-первых, это не линтер, а конфиг для линтера.
Во-вторых, всё он прекрасно даёт, индекс файлы только для реэкспорта компонентов из папки.

Какие вообще есть плюсы и минусы при использовании того или иного способа.

Реальных плюсов писать в индексе нет. А относительные: меньше файлов и меньше мороки (только если используется индекс для реэкспорта). А в случае фсд с рулом на паблик апи ещё и серьёзный минус: комбинирование индекс файлов с логикой и индекс файлов с реэкспортами. Тебе же надо как-то экспортировать компоненты и функции из компонента слоя, а это тоже индекс и кода в нём быть не может, только реэкспорт. Следовательно удачи разобраться в этой каше.

Но при поиске ведь, если вбить название компонента, но когда вбиваешь в поиске название компонента, в поиске отображается сразу папка, в которой и находятся все нужные тебе компоненты, а дальше просто выбираешь, как мне кажется, тут нет такой сильной проблемы.

Во-первых, в вскоде это не так (там идёт поиск по названию файла, а путь надо вручную прописывать).
Во-вторых, как тебе это поможет в фсд, когда у тебя будут индексы и в ui, и в lib, и в других сегментах компонента слоя?

Вторая проблема, что не удобно понять в каом файле ты работаешь, потому что все они index.tsx
Но это тоже ведь не проблема, когда открыто 2 файла, с левой стороны подписывается в какой папке лежит index.tsx, то бишь название компонента

Ага, только вот что будет, когда ты откроешь 10 таких файлов? Название каждой вкладки примерно вдвое длиннее получается. Плюс в вскоде это по другому отображается и при большом количестве открытых файлов тупо удачи их отличить. А ещё это очень "удобно" при контрол-табе.

Короче, индексы только для реэкспортов.

Answer 1

[Михаил Р.]

или все же стоит использовать
/audioList/audioList.tsx

Если не компонент:
audioList/audioList.tsx
Если компонент:
AudioList/AudioList.tsx

Какие вообще есть плюсы и минусы при использовании того или иного способа.

Когда все разработчики придерживаются единых стандартов именования, код становится более читаемым. Это упрощает процесс ревью кода и позволяет новым членам команды быстрее разобраться в проекте.

И вот можете расписать, пожалуйста, ваше мнение насчет этого. Плюсы и минусы и вашу позицию максимально подробно, хочу все же разобраться, что лучше, что хуже и что приоритетнее

Мое мнение - если есть определенный стандарт, а у Вас нет острой необходимости его нарушать, то лучше его придерживаться.

Comments

[YuStep]

Я работаю на крупном проекте, где мы переписываем апп используемый миллионами пользователей с одного языка на React Native, это в Англии. На проекте 70 человек работает. Поэтому, думаю, что мы используем good practices. Мы используем index.tsx в каждой папке, но только для удобства навигации. В этом файле только одна строка export from ./audioList. React автоматически считывает index файл при навигации. Все остальное в папке для каждого компонента зовется именами компонента: audioList.tsx, audioList.test.tsx и etc.

[Михаил Р.]

YuStep,

с одного языка на React Native

Если не секрет, то с какого языка переходите, и почему выбрали React Native?

[YuStep]

Михаил Р., Xamarin