В первой части материала на Highload я рассказала о популярных принципах в разработке, которых стоит придерживаться при написании кода, а также о том, как правильно называть переменные. Сегодня поговорим о стилизации JS-кода, таких инструментах как ESLint, Prettier, Code Spell Checker и SonarQube, а также о выстраивании архитектуры проекта. Начнем!
У разработчиков Google и Airbnb есть два самых популярных стилевых руководства по этой теме. Самыми интересными замечаниями и релевантными правилами я хочу поделиться с вами.
Каждое объявление должно заканчиваться точкой с запятой. Не полагайтесь на автоматическую вставку.
Это практика добавления большого количества пробелов в ваш код, чтобы определенные символы появлялись прямо под другими символами на предыдущей строке. В основном это считается дурным тоном, если следовать советам Google, но иногда допустимо. Только не нужно продолжать использовать горизонтальные выравнивания там, где они уже есть.
Объявляйте все локальные переменные с помощью const
или let
. Используйте const
по дефолту, пока переменную не надо будет переназначить. Слово var
не должно использоваться.
Стрелочные функции дают краткий синтаксис и решают много сложностей с ним. Выбирайте стрелочные функции вместо слова function
, особенно во вложенных функциях.
Обозначить их можно помощью обратных кавычек `
, вместо сложного объединения строк, особенно если есть несколько строчных литералов. К тому же, они могут быть в несколько строк.
Обычные строчные литералы заключаются в одинарные кавычки. Если строка содержит один символ цитирования, то рассмотрите использование шаблонных строк во избежании выхода из области цитаты.
Использование интервалов тоже улучшает читабельность вашего кода. Даже если весь файл содержится в одной замкнутой структуре (например, в функции), содержимое функции должно иметь отступ в одну табуляцию. Оформляйте отступы с помощью табуляций.
Строки обычно пишутся не длиннее 80 символов и не должны превышать 100 (считая каждую табуляцию за 4 пробела).
Это не жесткое правило, но длинные строки обычно указывают на нечитабельный или плохо организованный код.
А также:
++
, --
) не должны иметь пробелов после своих операндов;,
и ;
не должно быть пробелов;:
после имени свойства в определении объекта не должно быть пробелов;?
и :
в тернарном условном операторе должны иметь пробелы с обеих сторон;{}
, []
, fn()
) не должно быть заполняющих пробелов;Строгая проверка на равенство (===
) должна использоваться вместо простой проверки (==
). Единственное исключение — ситуация, когда осуществляется проверка на undefined
или null
путем проверки на равенство null
.
//
) и текстом комментария должен быть один пробел;Блоки if
, else
, for
, while
, try
всегда должны использовать фигурные скобки и располагаться на нескольких строках. Открывающая скобка должна быть в одной строке с определением функции, условием или началом цикла. Закрывающая скобка должна быть в строке, следующей за последним оператором блока.
Если она слишком длинная и не помещается на одной строке, каждый вызов метода должен быть на отдельной строке, а первый — располагаться на следующей строке после имени объекта, методы которого вызываются. Если метод меняет контекст, используйте дополнительный отступ.
Вам вовсе необязательно помнить все эти правила и вручную корректировать весь код — для этого есть специальные инструменты.
Прежде всего вам понадобится линтер — инструмент статического анализа кода для выявления проблемных шаблонов. ESLint — самый популярный из них. Он гибкий, легко расширяется и поставляется с большим количеством настраиваемых правил и возможностью применять различные стили. У него лучшая поддержка ES6 по сравнению с другими линтерами.
ESLint очень полезен в JavaScript, поскольку будучи интерпретируемым языком, JS не имеет этапа компиляции. Поэтому многие ошибки можно обнаружить только во время выполнения кода.
Многие из доступных правил в ESLint отключены, но их можно включить в файле конфигурации .eslintrc
, который может быть глобальным или локальным для проекта. Одна из самых популярных настроек для линтера — Airbnb JavaScript Style. Она приводит код к более-менее единому стилю, умеет автоматически исправлять многие из найденных проблем и отлично интегрируется со многими инструментами разработки.
Кстати, он, как и другие линтеры, не обязывает вас использовать один какой-то стиль. Наоборот, вы можете выбрать что-то из лучших практик и доработать стиль на свое усмотрение.
Prettier — это форматтер. Он сканирует файлы по вопросам стиля и автоматически форматирует код. Таким образом единые правила соблюдаются для отступов, интервалов, запятых, одинарные vs. двойные кавычки. Рекомендуемым способом считается использование поддержки ESLint в eslint-plugin-prettier. Задача Prettier — заставить разработчика не думать о форматировании. В нем минимум настроек: поставил сам Prettier, поставил pre-commit-хук.
Чтобы работать с Prettier в Visual Studio Code, вам понадобится установить расширение. Для этого выполните поиск инструмента Prettier — Code Formatter в панели расширений VS Code. Вы можете превращать код с несогласованными отступами, скобками, разрывами строк и точками с запятой в хорошо отформатированный код. Чтобы автоматизировать этот процесс, вы можете выбрать в VS Code настройку, чтобы ваши файлы автоматически форматировались при сохранении. Это также гарантирует, что неформатированный код не попадет в систему контроля версий.
Есть недостаток в меню встроенных параметров VS Code — не обеспечивается согласованность между разработчиками в вашей команде. Если вы измените настройки VS Code, у другого разработчика может оказаться совершенно иная конфигурация. Обеспечить единство форматирования в своей команде вы можете, создав файл конфигурации для текущего проекта.
Значительная часть ошибок, с которыми сталкиваются разработчики, связана с опечатками (или грамматическими ошибками) в именах переменных, функций и пакетов. Опечататься можно и в комментариях, описаниях, документации. Этот пакет подсвечивает ошибки в файле, учитывает код camelCase
. Синие подчеркивания дают понять, какие слова необходимо исправить. Если вы хотите «размонтировать» слово как правильное написание, то можете щелкнуть правой кнопкой мыши, чтобы добавить его в пользовательский (глобальный) словарь или словарь папки (локальный).
Выбор подходящей методологии разработки и применение проверенных методик и инструментов повышает вероятность того, что код будет написан правильно, а конечный продукт будет соответствовать требуемым стандартам качества. Для непрерывного анализа и измерения качества кода используется SonarQube — это платформа с открытым исходным кодом. Он позволяет оценить текущее состояние кодовой базы, динамику этого состояния и возможные риски при реализации проекта.
SonarQube предоставляет следующие возможности:
Расширять существующую функциональность вы можете с помощью сторонних плагинов.
Стандартный Quality Gate SonarQube использует следующие значения метрик для определения того, что код успешно прошел проверки:
Технический долг (также известный как долг кодинга) — это метафора программной инженерии, обозначающая накопленные в программном коде или архитектуре проблемы, связанные с пренебрежением к качеству при разработке программного обеспечения и вызывающие дополнительные затраты труда в будущем. Технический долг обычно незаметен для конечных пользователей продукта, а связан с недостатками в сопровождаемости, тестируемости, понятности, модифицируемости, переносимости.
Команда Sonar определила семь смертных грехов разработчиков, увеличивающих технический долг:
Платформа SonarQube как раз и предназначена для того, чтобы помогать бороться с этими семью грехами.
Переходим к структуре проекта и именованию компонентов в React. Хотелось бы выделить такие преимущества структурированного проекта на React:
redux
или mobx
? HOC
или render prop
? react-motion
или react-spring
? Исключение одной из проблем — согласованная структура.Как оформлять компоненты React?
import { TinyButton } from './shared/Button'
components
. Храните каждый компонент в отдельном файле. Если вам нужен файл стилей, создайте папку и храните его там. Главное преимущество такого подхода в том, что компоненты не спрятаны где-то глубоко внутри. Они предназначены для повторного использования, поэтому их нужно хранить на виду.*.js
, а актуальные файлы компонентов. Чтобы избежать необходимости импортировать такие компоненты: import { TinyButton } from './TinyButton/TinyButton'
создайте файл index.js
в той папке компонентов, которая экспортирует именованный компонент: // components/TinyButton/index.js export * from './TinyButton'
pages
. Следуйте соглашению Next.js о структуре проекта, в котором логика маршрутизации хранится в каталоге pages
. Каждая страница — это компонент React и имеет некоторое состояние. Компонент страницы использует другие компоненты для сборки страницы. Причина того, что логика маршрута не используется повторно в том, что компоненты страницы не могут быть reusable
. Преимущество такого подхода в возможности быстро посмотреть доступные маршруты, центральное расположение всей логики маршрутизации, хранение компонентов страницы отдельно от других.Поскольку искусство веб-дизайна продолжает развиваться, мы осознаем необходимость разработки продуманных систем дизайна, а не создания простых коллекций веб-страниц. В поисках вдохновения и параллелей автор все время возвращался к химии. Идея состоит в том, что вся материя (твердое тело, жидкость, газ, простая, сложная) состоит из атомов. Эти атомарные единицы соединяются вместе, образуя молекулы, которые, в свою очередь, объединяются в более сложные организмы, чтобы в конечном итоге создать всю материю в нашей Вселенной.
Точно так же интерфейсы состоят из более мелких компонентов. Это означает, что мы можем разбить целые интерфейсы на фундаментальные строительные блоки и работать оттуда. Это основная суть атомарного дизайна.
Атомарный дизайн — это методология создания дизайн-систем. В атомарном дизайне есть пять различных уровней:
Атомы — Молекулы — Организмы — Шаблоны — Страницы
И напоследок хочу процитировать автора в области разработки ПО Роберта Мартина и его характеристики чистого кода (уж очень они мне нравятся):
Читайте также: «Профессионала от новичка отличает качество разработки»: 7 принципов чистого и читаемого кода на JavaScript
В благословенные офисные времена, когда не было большой войны и коронавируса, люди гораздо больше общались…
Вот две истории из собственного опыта, с тех пор, когда только начинал делать свою карьеру…
«Ты же программист». За свою жизнь я много раз слышал эту фразу. От всех. Кто…
Отличные новости! Если вы пропустили, GitHub Copilot — это уже не отдельный продукт, а набор…
Несколько месяцев назад мы с командой Promodo (агентство инвестировало в продукт более $100 000) запустили…
Пару дней назад прочитал сообщение о том, что хорошие курсы могут стать альтернативой классическому образованию.…