Как стать Front-end разработчиком? #7 Инструменты разработчика

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

О чем пойдет речь

• Линтеры (Linters)
• Форматирование кода
• Сборщики проектов (Webpack, Parcel)
• Отладка frontend кода различными способами

Линтеры

Использование линтеров поможет вам избежать множества ошибок на этапе написания кода. Если говорить простыми словами, линтер - это инструмент, который подсветит ваш код, если вы совершили ошибку или опечатались. Также линтеры применяются для того чтобы писать код в стиле лучших практик (best practices) того языка программирования, на котором вы пишете.

Линтеры имеют гибкую конфигурацию. Я советую использовать распространенные конфигурации от крупных компаний (вроде Facebook и AirBnb) с небольшими изменениями под свои нужды.

ESLint

Для языка программирования JavaScript (EcmaScript) рекомендую использовать ESLint в сочетании с плагином для VSCode ESLint. Такая связка обладает гибкой конфигурацией, может быть использована как с чистым JS, так и с фреймворками.

TSLint

Если вы используете язык TypeScript (о нем в следующих статьях), то рекомендую использовать TSLint и расширение для VS Code TSLint. Связка такая же, как и в случае с ESLint, только для TS.

Форматирование кода

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

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

Форматировщик кода делает так, чтобы код Junior разработчика был неотличим от кода Senior разработчика с точки зрения чистоты и лучших практик.

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

Prettier

После такой горячей вступительной речи я представляю вам Prettier - популярный форматировщик, который сделает вашу программистскую жизнь гораздо приятнее. Также есть плагин для VS Code Prettier.

Линтеры (ESLint и TSLint) хорошо работают в связке с Prettier. Форматировщик подключается через файл конфигурации линтера. Таким образом, ваш код будет спасен от ошибок, плохих практик и отталкивающего вида! И все это нужно не потому, что программисты - перфекционисты, и все должно быть написано идеально, а для того, чтобы код был хорошо читаемым, поддерживаемым и легко расширяемым!

Обязательно внедряйте линтер (ESLint/TSLint) и форматировщик (Prettier) в каждый из ваших проектов!

Сборщики проектов

Это инструменты, позволяющие скомпилировать код из множества файлов в один.

Смысл в том, что вы пишете модульный код удобным для вас способом в разных файлах, с возможным использованием дополнительных надстроек вроде SCSS для стилей и TypeScript для JS, а затем это все компилируется в один огромный, абсолютно нечитабельный для человека, но зато очень приятный для браузеров файл. Этот файл отправляется в браузер, и, в свою очередь, браузер все это обрабатывает и отображает ваше приложение.

С помощью сборщика проектов (project bundler) и транспайлера babel у вас есть возможность использовать новые фичи языка EcmaScript, благодаря чему весь код будет скомпилирован в чистый, поддерживаемый браузерами код.

Webpack

Представляю вам один из самых популярных и многофункциональных сборщиков - Webpack.

Неплохая статья для ознакомления с Webpack на русском языке для начинающих.

Самые популярные фронт енд фреймворки вроде React, Vue, Angular используют webpack в качестве своего сборщика (при рекомендуемом способе установки).

Parcel

Еще один набирающий популярность сборщик. Он позиционируется как инструмент, который не требует сложной конфигурации и большого количества кода для правильной работы. Достаточно только указать точку вхождения, и все будет работать как и должно. Также заявлено, что этот сборщик работает гораздо быстрее своих конкурентов, поэтому стоит обратить на него внимание. Вы можете узнать больше о Parcel на официальном сайте и странице Parcel GitHub.

Отладка

О дебаге кода у меня на сайте есть отдельный пост “Как правильно дебажить Front-end код?” . Ознакомившись с данной статьей, вы узнаете, какие существуют способы отладки клиентского кода, узнаете как вам действовать и с чего начать, а также сможете выбрать для себя оптимальный способ дебага и применять его в работе над своими проектами!

Итоги

1. Линтеры позволяют избежать ошибок в коде и принуждают к следованию хорошим практикам написания кода.
2. Форматировщики следят за опрятностью и последовательностью кода.
3. Сборщики проектов позволяют писать модульный (разбитый на различные файлы) код. В комбинации с babel можно использовать фичи, которые не поддерживаются браузером, а также использовать различные надстройки для стилей (SCSS и т.п.), TypeScript и прочего. Еще одна из полезных фич сборщика вроде Webpack - он включает в себя возможность запускать лайв сервер с горячей перезагрузкой.
4. Отладка кода очень важна, потому что не существует человека, способного написать идеальный и работающий код сразу. Нужно правильно дебажить код, отлавливать ошибки и учиться на них.

Послесловие

Поздравляю! Теперь вы имеете представление о том, как обезопасить себя от ошибок при написании кода, для чего необходимо использовать форматировщик, а также понимаете важность сборщиков проектов. Все эти инструменты расширят ваши взгляды на написание кода и займут достойное место в вашем списке навыков Front end разработчика!