Skip to content

Instantly share code, notes, and snippets.

@bsa7

bsa7/js_jsx_code_conventions.md

Created April 25, 2019 18:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save bsa7/cf900d4313aa25d3c4e3a17f30150776 to your computer and use it in GitHub Desktop.
Save bsa7/cf900d4313aa25d3c4e3a17f30150776 to your computer and use it in GitHub Desktop.
Download ZIP
js and jsx code conventions
Raw
js_jsx_code_conventions.md

Требования к качеству кода javascript

Процесс написания кода сопровождается проверкой кода с помощью ESLint прямо в процессе правки.

Сделайте соответствующие настройки в своей IDE, например для Visual Studio Code вы можете установить плагины:

Обязательные требования:

Нельзя:

Множественные формы объектов в наименовании переменных:

Множественность объектов должна проявляться в наименовании, это может быть отдельное слово в конце, указанное во множественном числе: 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 компонентов;

Обязательные требования:

  • Атрибуты React компонентов необходимо располагать в алфавитном порядке;

Нельзя:

  • Использовать манипуляции с DOM;
  • Применять ref атрибуты;

Требования к логике

Избегать вложенностей папок, глубиной более 1.

Например, папку для хранения файлов стилей вместо структуры

.
├── 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
  }
}

Соглашения для некоторых логических конструкций

js

Длинные строки

React

Длинные строки

<div>
  {
    confirmCancelSubscriptionId &&
      confirmCancelSubscriptionId === subscription.id &&
      showConfirmCancelSubscriptionInFailedPopup &&
      this.subscriptionConfirmCancelPopup({ subscription })
  }
</div>

Блоки кода внутри jsx

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment