Автор оригинала: Alex Moldovan.
Никто не подходит для записи уродливого, несовместимо-стилизованного кода. Это просто вроде случается.
Даже как единственный разработчик на проекте, тем больше времени, которое проходит и чем больше кода, который вы проходили, тем сложнее становится сложнее поддерживать последовательный стиль кода.
Вот почему вам нужен гид стиля.
Я испытал первую руку, насколько все больше команд могут достичь после принятия стиля.
Вам больше не нужно делать маленькие стиль суждения звонков в течение дня. Просто проконсультируйтесь с руководством стиля.
И когда товарищ по команде должен поддерживать ваш код, это чистый код, который они могут читать и понять.
Принятие стиля руководства является одной из самых простых вещей, которые вы можете сделать, чтобы повысить удовольствие вашего кода, что в конечном итоге повышает производительность вашей команды. Итак, давайте рассмотрим самый популярный способ сделать это.
Введите Airbnb + Eslint
Экосистема JavaScript предлагает широкий спектр Инструменты и Стиль гиды Отказ Это не должно удивить никого. С JavaScript мы стали ожидать широкого спектра всего.
Но как экосистема созревает, опытные разработчики начинают жаждать «стандартного способа» делать то, что предлагают более укрепленные экосистемы.
Вы, конечно, добро пожаловать, чтобы провести несколько дней, исследуя экосистему JavaScript и сравнивая разные инструменты, но я постараюсь спасти вам некоторое время : Eslint является самым популярным подвижным инструментом JavaScript и Руководство по стилю Airbnb является наиболее широко используемым руководством стилей.
Для получения более подробной информации о добавлении Eslint в ваш проект Checkout эта ссылка Отказ
После того, как у вас есть это в квадрате, вы можете настроить свой проект для руководства стиля Airbnb, установив свой пакет NPM:
npm install --save-dev eslint-config-airbnb
Добавьте следующую строку в вашем .eslintrc файл
"extends": "airbnb"
И VUILà! Ваш код теперь подвержен правилам наиболее популярного руководства в JavaScript. Счастливое кодирование!
Стандарты переоценены
Пока я согласен с большинством правил в стиле руководства, вот список переопределений, которые я составил. Это то, что .eslintrc Файлы в проектах «Корневые папки выглядят как:
Позвольте мне объяснить рассуждение позади каждой из этих настроек подробно.
Отступ
Вкладки против пробелов войны могут потенциально испортить дружбу и, возможно, даже саботажать романтические отношения.
Я предпочитаю отступить для моего кода 4 пробела, хотя подавляющее большинство конфигураций там предпочитают углубление 2.
Мои рассуждения состоят в том, что для того, чтобы написать чистый код, большие углубления дают вам лучшее визуальное представление о том, насколько глубоко вложено в ваших функциях, и сколько у вас разных ветвей.
Вы определенно не должны быть вложенным кодом глубже 3 или 4 слоев в файле JavaScript (это код кода). Таким образом, 4 пространства предлагает вам более удобную читаемость, сохраняя другие правила, такие как сохранение вашего кода в течение 80 или 120 символов.
Кроме того, вдавливание является одним из правил, которые вдохнут более «воздух» в гид стиля по умолчанию Airbnb. В результате ваш код не так сильно толпятся на левой стороне редактора.
Расстояние
Это, вероятно, самое большое отклонение от стандарта. Я ненавижу переполненный код. Я начал писать код с дополнительной космической прокладкой более 2 лет назад, и я никогда не оглянулся назад.
Так что означают эти правила? Ну, посмотрите на следующий код. Он технически уважает правила официального стиля Airbnb.
Я знаю, это немного запутанно. Я попытался искать функцию сложности средней сложности из одного из моих кодовых базах, но мне пришлось комфортировать многое из этого, поэтому не пытайтесь понять логику позади кода (потому что нет). Просто попробуйте прочитать это. Попробуйте сосредоточиться, например, на переменных, которые используются в нескольких местах, когда параметры передаются в функции, и где вызовы функций.
Теперь посмотрите на тот же код, но при применении правил дополнительных интервалов:
Я не говорю, что теперь это очень читается, но вы можете легче идентифицировать, где у вас есть параметры, отправленные в функции – особенно вокруг функций Curred.
Также проверьте разницу между отступом 2 и 4-х пространств в двух примерах.
Сначала эти методы могут не казаться большим улучшением. Я призываю вас дать им попробовать. Я думаю, что вы быстро будете испытывать то, что это делает.
Цитата Войны
В то время как первые две категории имели некоторые четкие аргументы, я должен сказать, что одинокий против Двойной Решение цитаты – это высоко субъективный.
Мое предпочтение двойных цитатах, вероятно, происходит от работы с реагированием, где вы смешиваете JavaScript с Jsx теги Отказ Поскольку JSX ближе к HTML, тенденция состоит в том, чтобы добавить атрибуты между двойными кавычками. Поэтому я начал использовать двойные кавычки для всего, только для последовательности.
Одна вещь, которую я заметил, это то, что вы намного с большей вероятностью нужно будет написать одну цитату внутри строки английского языка, чем двойная цитата («Я здесь», «не делай этого»). Таким образом, двойные цитаты могут быть более удобными в этих случаях.
Кодовое расположение
Официальный руководство по стилю AirbnB имеет правило «без использования без определения», что бросает ошибку, если вы попытаетесь использовать что-то, прежде чем определить его. Это хорошее правило – особенно для переменных – потому что вы не должны положиться на подъем, и вы должны держать Временная мертвая зона Проблема в уме, когда вы используете пусть и const.
Я предпочитаю разрешать использоваться функции, прежде чем они определены. Причина проста: большую часть времени вы нарушите ваши функции в меньшие подфункции. Тем не менее, правило «без использования-определения» сообщит вам, чтобы поставить эти подфункции до Оригинальная функция.
Но ваши подфункции находятся в абстрактных частях алгоритма. Они не должны беспокоить вас, когда вы открываете файл, содержащий ваш Функция верхнего уровня , который вы используете за пределами файла.
Конечно, это спорно. Но это влияет на отладку. Когда вы повторяете какой-то код, и вы найдете вызов другой функции, в идеале вы должны быть в состоянии посмотреть под ним, или – худший сценарий – прокрутите вниз по нескольким подфункциям и найдите то, что вы ищете.
Это, в сочетании с Airbnb’s Функция Декларация против функции выражение Правило, Может дать вам свободу структурировать ваши модули или функциональные библиотеки, как вам нравится, в то время как обеспечить случайное значение неинициализированной функции.
Const Over Let.
Вот еще одно небольшое отклонение от гида стиль. Вы можете заметить в моем конфиге:
"prefer-const": 1
На конфиге Airbnb это установлено на 2, который стоит Ошибка . , пока 1 обозначает Предупреждение Отказ
Теперь, если вы не понимаете, почему вы должны предпочесть превзойти постоянно, вы можете прочитать больше об этом здесь и здесь Отказ
Что касается моего отклонения, я предпочитаю предупреждение, потому что существуют ситуации, в которых вы не изменяете назначение переменной, но вы меняете много его содержания.
Посмотрите на этот код:
Правила скажут вам, что это правильно – хеш должно быть Const Потому что он не повторно назначен. Но это никогда не имеет смысла для меня. Я должен знать, что внутри есть много изменений, происходящих внутри хеш
Так что я буду использовать Пусть Чтобы сигнализировать тот факт, что переменная зависит от изменения. Const и Пусть должен давать больше смысла к вашим переменным и не должен скрывать правду никак.
Код сложности
Вы можете Цикломатный код сложности вычислить сложность каждого из ваших функций.
Решение на максимальный уровень сложности сложно. В идеале это должно быть максимально ниже, означает, что ваши функции должны иметь максимально более 1 или 2 возможностей разветвления.
Это имеет смысл иметь этот номер как можно ниже с точки зрения повторного использования кода и тестирования. Но есть времена, когда труднее сломать функции. Вот почему я вижу сложность больше как предупреждение, а затем как ошибка.
Здесь важно ограничить количество функций, которые достигают этой максимальной предел сложности. Даже в кодовой базе среднего размера я бы не хотел видеть более 10 функций, которые нарушают это правило. Поэтому я выбрал максимальное значение 5, чтобы выделить эти функции. Я нацелюсь на эти функции, когда у меня будет время, чтобы сделать рефакторинг.
Сложность может быть решена несколькими способами. Рефакторинг на меньшие функции является очевидным. Другой вариант преобразует ваш Переключатель заявления в сопоставление назначений.
У нас было несколько дискуссий в нашей команде, и мы закончили использовать 5 в качестве эталонного значения для правила максимального сложности. Но в некоторых случаях мы идем до 4, просто чтобы убедиться, что мы пишем чистый и простой код.
Примечание к реакции
Поскольку я много работаю с React, и конфигурация Airbnb также содержит огромное количество правил в этой области, я хотел бы включить некоторые из моих предпочтений на них здесь.
Основной целью моего переопределения реагирования является ограничение дифференциации между регулярными модулями JavaScript и компонентами реагирования, а также между кодом JavaScript и JSX. Вот почему я выбираю подобные углубления и использование двойных кавычек для всех атрибутов JSX. И именно поэтому я предпочитаю оставить все мои файлы с расширением .js.
Наконец, связанные с Класс против заводских компонентов Я склонен предпочитать последнее. Я не вижу никакого преимущества для использования классов в этот момент. Я могу написать будущий пост, расширяющийся, почему я чувствую этот путь.
Вот об этом! Я надеюсь, что вам понравилось прочитать это. Я приветствую ваши отзывы ниже.
Если вам понравилась статья, нажмите на зеленое сердце ниже, и я узнаю, что мои усилия не зря.