Сделайте соответствующие настройки в своей IDE, например для Visual Studio Code вы можете установить плагины:
- При написании вспомогательных методов (функций), если число аргументов больше 1, необходимо использовать именованные атрибуты;
- Все элементы, которые могут и должны подвергаться тестированию (кнопки, селекты, инпуты и т.п.) должны иметь уникальный в масштабах проекта атрибут
id
, напримерid="LessonComponent--finishLesson"
. Формат id - <ИмяКомпонента>--<ОписаниеСутиЭлемента>
- Использовать знак семиколона (
;
) для завершения строк кода.; - Использовать символ табуляции для отступов (для этого есть двойной пробел);
- Использовать windows-style line endings;
- Сохранять файлы с атрибутом "исполняемый";
- Использовать в имени файлов знаки
"_"
или"-"
- Вместо этого используем camelCaseStyle; - Писать асинхронные запросы к сторонним сервисам или к api, используя async, await, циклы, таймауты и т.п. Вместо этого есть Redux dispatch;
- Передавать по цепочке вызовов параметры компонентов, которые используются один раз. Вместо этого есть mapStateToProps, mapDispatchToProps для подключения к Redux store любого компонента;
- Именовать переменные, методы, классы одним словом. Вместо этого наименование должно быть уникальным и достаточно точно отражать смысл наименование. Например плохо:
location
, хорошо:currentLocation
,locationCompareInfo
,locationParsed
и т.п.; - Усложнять код созданием функций, переменных, которые используются только один раз. Исключение составляет ситуация в файлах jsx, когда методы с чистым js целесообразно вынести в отдельный файл, чтобы код компонента мог быть использован повторно. Для таких методов есть специальная папка app/lib/componentHelpers/<ИмяФайлаКомпонента.js>
- Использовать бесполезные приставки и суффиксы (
on...
,...handler
,render...
и т.п.) в именах функций, менять имена функций при передаче параметров, если в этом нет нужды. Например: вместоclickHandler
будет целесообразнее использоватьredirectToNextLesson
. Название метода лучше составлять из двух-трёх слов, точно отражающих как объект, так и субъект, а так же суть действия. - Конструировать ссылки в виде строки, например
/courses/${courseId}/lessons/${lessonId}
. Вместо этого есть метод seoLinks:seoLink(links.CoursesPage, { courseId, lessonId })
;
Множественность объектов должна проявляться в наименовании, это может быть отдельное слово в конце, указанное во множественном числе: FETCH_CERTIFICATES__START;
Если наименование объекта состоит из двух слов, и множественность будет выглядеть коряво, например, FETCH_OLYMP_CERTIFICATES__START, то множественность можно отразить дополнительным словом, например: FETCH_OLYMP_CERTIFICATES__START
Не нужно ставить слово во множественной форме в середине наименования объекта, т.к. это может сбить с толку.
Примеры:
Хорошо:
- FETCH_OLYMP_CERTIFICATE__START;
- FETCH_CERTIFICATES__START;
- FETCH_OLYMP_CERTIFICATES__START;
- FETCH_CERTIFICATE__START;
Плохо:
- FETCH_CERTIFICATES_INFO__START;
- FETCH_CERTIFICATES_INFOS__START;
- FETCH_OLYMP_CERTIFICATES__START;
- FETCH_OLYMP_CERTIFICATESS__START;
- Задавать вопросы;
- Дополнять или исправлять этот текст;
- Атрибуты React компонентов необходимо располагать в алфавитном порядке;
- Использовать манипуляции с DOM;
- Применять ref атрибуты;
Например, папку для хранения файлов стилей вместо структуры
.
├── about_us
│ ├── about_us-content.less
│ ├── about_us-footer.less
│ ├── about_us-header.less
│ ├── about_us-intro.less
│ ├── about_us.less
│ ├── about_us-social.less
│ └── about_us-try.less
├── all_courses
│ ├── course-card.less
│ ├── courses-page.less
│ └── header_courses.less
├── authorization
│ └── auth-page.less
├── course-loader.less
├── elements.less
├── footer.less
├── icons.less
├── landing
│ ├── landing-about.less
│ ├── landing-header.less
│ ├── landing.less
│ ├── landing-motivation.less
│ ├── landing-promo.less
│ ├── landing-recommends.less
│ ├── landing-try.less
│ └── social.less
├── lessons
│ ├── components
│ │ └── custom-select.less
│ ├── lesson-counter.less
│ ├── lesson-explanation.less
│ ├── lesson-font-size-switcher.less
│ ├── lesson-footer.less
│ ├── lesson-header.less
│ ├── lesson-langs.less
│ ├── lessons.less
│ ├── lesson-theory.less
│ └── questions
│ ├── add-suffix.less
│ ├── fill-the-gaps.less
│ ├── mark-words.less
│ ├── match-logn.less
│ ├── match-words.less
│ ├── put-in-match.less
│ ├── put-in-order.less
│ ├── questions.less
│ ├── select-answer.less
│ ├── select-words.less
│ └── sort-and-type.less
├── main.less
├── normalize.less
├── popup.less
├── quiz.less
├── top-message.less
├── user-interview.less
└── vars.less
следует реорганизовать так, чтобы из названия файла была понятна его суть, названия файлов были уникальны и папки отражали бы не логику, а назначение файлов:
.
├── common
│ ├── Icons.less
│ ├── Main.less
│ ├── Normalize.less
│ └── Vars.less
├── components
│ ├── AboutUsContentComponent.less
│ ├── AboutUsFooterComponent.less
│ ├── AboutUsHeaderComponent.less
│ ├── AboutUsIntroComponent.less
│ ├── AboutUsSocialComponent.less
│ ├── AboutUsTryComponent.less
│ ├── CourseCardComponent.less
│ ├── CourseLoaderComponent.less
│ ├── CoursesHeaderComponent.less
│ ├── FooterComponent.less
│ ├── LandingAboutComponent.less
│ ├── LandingHeaderComponent.less
│ ├── LandingMotivationComponent.less
│ ├── LandingPromoComponent.less
│ ├── LandingRecommendsComponent.less
│ ├── LandingTryComponent.less
│ ├── LessonCounterComponent.less
│ ├── LessonExplanationComponent.less
│ ├── LessonFontSizeSwitcherComponent.less
│ ├── LessonFooterComponent.less
│ ├── LessonHeaderComponent.less
│ ├── LessonLangsComponent.less
│ ├── LessonTheoryComponent.less
│ ├── PopupComponent.less
│ ├── QuestionsAddSuffixComponent.less
│ ├── QuestionsComponent.less
│ ├── QuestionsFillTheGapsComponent.less
│ ├── QuestionsMarkWordsComponent.less
│ ├── QuestionsMatchLognComponent.less
│ ├── QuestionsMatchWordsComponent.less
│ ├── QuestionsPutInMatchComponent.less
│ ├── QuestionsPutInOrderComponent.less
│ ├── QuestionsSelectAnswerComponent.less
│ ├── QuestionsSelectWordsComponent.less
│ ├── QuestionsSortAndTypeComponent.less
│ ├── SocialComponent.less
│ ├── TopMessageComponent.less
│ └── UserInterviewComponent.less
└── pages
├── AboutUsPage.less
├── AuthPage.less
├── CoursesPage.less
├── LessonsPage.less
└── QuizPage.less
<div className="block" />
.block {
//some styles
}
Если название блока состоит из двух и более слов, то следует разделить их дефисом:
<div className="block-example" />
.block-example {
//some styles
}
Если даем название блоку-компоненту, то в название добавляем слово component через дефис -
<div className="block-component" />
Если блоку нужны дополнительные стили, то добавляем блоку модификатор - второй класс по такому принципу 1. Первым идет имя блока 2. После идет подчеркивание _ 3. Имя модификатора
<div className="block block_disabled" />
.block {
&_disabled {
//some styles
}
}
Если внутри блока есть элементы, то называние формируется в следующем порядке: 1. Имя блока 2. Два символа подчеркивания __ 3. Имя элемента
<div className="block">
<div className="block__element" />
</div>
.block {
&__element {
//some style
}
}
Если элементу внутри блока нужно добавить свои уникальные стили, то добавляем блоку модификатор 1. Имя блока 2. Два символа подчеркивания __ 3. Имя элемента 4. Символ подчеркивания _ 5. Имя модификатора
<div className="block">
<div className="block__element block__element_disabled" />
</div>
.block {
&__element {
//some styles
}
&__element_disabled {
//some more styles
}
}
-
Если строка вмещается в лимит ширины, не нужно делать переносы:
- Неправильно:
const { confirm, } = something
- Правильно:
const { confirm } = something
<div>
{
confirmCancelSubscriptionId &&
confirmCancelSubscriptionId === subscription.id &&
showConfirmCancelSubscriptionInFailedPopup &&
this.subscriptionConfirmCancelPopup({ subscription })
}
</div>
-
Не нужно оставлять пробелы по краям выражения.
- Неправильно:
<div> { this.coursesList() } </div>
- Правильно:
<div> {this.coursesList()} </div>