Tools to help you write Clean Code

Взгляд на Prettier, ESLint, Husky, Lint-Staged и EditorConfig.

Вы хотите научиться писать чистый код но не знаете с чего начать… Изучая руководства по стилю, такие как Airbnb’s Javascript Style Guide … Пытаясь написать код с лучшими инструкциями…

Удаление мертвого кода? Поиск неиспользуемых переменных в базе кода? Пытаетесь найти проблемные шаблоны в коде? Работает returnили нет?

Что-нибудь из этого звучит знакомо?

Нужно столькому научиться и столько сделать но это так изнурительно.

Вы руководитель команды? У вас есть новые разработчики в команде? Вы беспокоитесь, что они напишут код, не соответствующий стандартам? Весь ваш день состоит из обзоров кода, где обзор больше посвящен стандартам кода, а не составляющей?

Когда-то я это и делал, могу сказать, что это просто утомительно и беспокойно.

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

Если вы вдруг застрянете на протяжении всего данного урока, вот репозиторий кода . Запросы приветствуются, если у вас есть предложения по улучшению.

Этот учебник больше ориентирован на приложения React, но то же самое может быть применено к любому веб-проекту.

Кроме того, редактор, который я использую для этого урока это VS Code от Microsoft. Я уже на протяжении долгих лет влюблен в эту компанию (хотя были времена, когда наоборот недолюбливал).

На повестке дня:

• Prettier
• ESLint
• Automate Format and Lint on Save
• Husky
• Lint-staged
• Объединенные Husky и Lint-staged
• EditorConfig

Let’s start with Prettier

Начнем с Preettier

What is Prettier?

Что такое Prettier: Это своеобразный преобразователь кода. Он форматирует код для вас определенным образом.

Этот GIF в значительной степени объясняет это:

Prettier форматирует код

Why do we need it?

Зачем она нам:

• Очищает существующую базу кода: в одной командной строке. Представьте себе очистку базы кода с более чем 20 000 строк кода.
• Легко привыкнуть: Prettier использует наименее спорный стиль кодирования при форматировании кода. он в открытом доступе, многие люди работали над несколькими его итерациями в исправлении некоторых крайних случаев.
• Написание кода: люди не понимают, что они тратят много времени на форматирование кода и тратят свою умственную энергию на это. Пусть Prettier справиться с этим, в то время как вы сосредоточиться на основной бизнес-проекте. В личном плане, Prettier увеличил мою эффективность на 10%.
• Помощь начинающим разработчикам: если вы новый разработчик, работающий бок о бок с великими инженерами, и вы хотите выглядеть круто писать чистый код, будьте умны! Используйте Preetier.

How do I set it up?

Как его настроить: Создайте папку с именем appи внутри этого типа папки в командной строке:

Это создаст package.jsonфайл для вас внутри appпапки.

Теперь я собираюсь использовать yarnна протяжении всего этого урока, но вы npmтакже можете использовать.

Давайте установим нашу первую зависимость:

Это установит зависимость dev в вашемpackage.json, которая будет выглядеть следующим образом:

Добавление preetier из devDependencies

Я расскажу через секунду, что это “prettier”: “prettier — write src/**/*.js”делает, но сначала давайте создадим src/папку внутри нашей appпапки. А внутри src/папки создадим файл под названием index.js- Вы можете называть его как угодно.

В index.jsфайл вставьте этот код, как он есть:

Я знаю, что это уродливо! Супер некрасиво. Но среди хаоса есть здравый смысл.

До сих пор у нас есть src/app/index.jsфайл с каким-то уродливым кодом, написанным в нем.

Есть 3 вещи, которые мы можем сделать с этим:

• Отступить и форматировать этот код
• Использовать автоматизированный инструмент
• Пусть все так и будет, двигаемся дальше (пожалуйста, не выбирайте этот вариант)

Я собираюсь использовать второй вариант. Итак, теперь у нас есть установленная зависимость и более красивый сценарий, написанный в нашем package.json.

Давайте создадим prettier.config.jsфайл в нашей корневой appпапке и добавим в него несколько более красивых правил:

printWidth убедитесь, что код не превышает 100 символов.

singleQuote конвертирует все ваши двойные кавычки в одинарные.
Подробнее читайте в руководстве по стилю JavaScript Airbnb здесь . Это руководство - мой учебник для написания хорошего кода и способ создания впечатления у моих коллег.

trailingComma гарантирует наличие висящей запятой в конце свойства last object. Ник Граф объясняет это таким классным способом здесь .

bracketSpacing печать пробелов между литералами объектов:

jsxBracketSameLine поставит >многострочный элемент JSX на последнюю строку:

tabWidth указывает количество пробелов на уровень отступа.

semi if true выведет ;в конце инструкции.

Вот список всех вариантов, которые вы можете дать Preetier.

Теперь, когда мы настроили конфигурацию, давайте поговорим об этом скрипте:

В сценарии выше, я запускаю prettierи говорю ему найти все .jsфайлы в моей src/папке. --writeФлаг говоритprettier, чтобы сохранить отформатированные файлы, как он проходит через каждый файл и находит любую аномалию в формировании кода.

Давайте запустим этот скрипт в вашем терминале:

Вот что происходит с моим кодом при его запуске:

Круто, правда?

Если вы застряли, не стесняйтесь взглянуть на хранилище для этого.

Это в значительной степени завершает нашу более красивую дискуссию. Давайте поговорим о linters.

ESLint

What is a code linter?

Что такое линтер кода:

Линтинг кода-это тип статического анализа, который часто используется для поиска проблемных шаблонов или кода, который не придерживается определенных правил стиля. Для большинства языков программирования существуют линтеры кода, и компиляторы иногда включают линтинг в процесс компиляции. — ESLint

Why do we need one for JavaScript?

Зачем он нужен для JavaScript: Так как JavaScript является динамическим и слабо типизированным языком, он подвержен ошибкам разработчиков. Без пользы процесса компиляции, .jsфайлы обычно выполняются для того, чтобы найти синтаксис или другие ошибки.

Инструменты линтинга, такие как ESLint , позволяют разработчикам находить проблемы с их JavaScript-кодом без его выполнения.

What makes ESLint so special?

Что делает ESLint таким особенным: Хороший вопрос! В ESLint все подключаемо. Каждое правило линтинга, которое вы добавляете, является автономным, любое правило может быть включено или выключено. Для каждого правила может быть установлено предупреждение или ошибка. Ваш выбор.

Используя ESLint, вы получаете полную настройку того, как вы хотите, чтобы ваше руководство по стилю выглядело.

Есть 2 популярных гида стиля на данный момент:

• Google JavaScript Руководство По Стилю
• Руководство По Стилю JavaScript Airbnb

Я лично использовал руководство по стилю Airbnb. Это было рекомендовано мне моим руководителем инженерного отдела в моей последней фирме, когда я начинал свою профессиональную карьеру, и это было самым ценным активом в моем распоряжении.

Это руководство по стилю активно поддерживается-проверьте сами GitHub repo. Я буду использовать наборы правил, предпочитаемые руководством по стилю Airbnb в этом уроке. Итак, начнем.

Давайте сначала обновим наш package.jsonфайл:

Прежде чем приступить к настройке, я твердо верю, что люди должны знать, что входит в их зависимости. Поэтому давайте поговорим о том, что делает каждый из этих пакетов, а затем мы можем двигаться вперед с конфигурациями.

babel-eslint: этот пакет позволяет вам использовать линтинг на всем Babel с легкостью. Вам не обязательно нужен этот плагин, если вы не используете Flow или экспериментальные функции, которые еще не поддерживаются ESLint.

eslint: это основной инструмент, необходимый для линтинга кода.

eslint-config-airbnb: этот пакет предоставляет всю конфигурацию ESLint Airbnb как расширяемую общую конфигурацию, которую можно изменить.

eslint-plugin-babel: eslintПлагин companion to babel-eslint.
babel-eslintделает большую работу по адаптации eslintдля использования с Babel.

eslint-plugin-import: Этот плагин предназначен для поддержки линтинга ES2015+ (ES6+) import/export syntax,и предотвращения проблем с неправильным написанием путей к файлам и имен импорта. Подробнее .

eslint-plugin-jsx-a11y: установлены правила линтинга для правил доступности элементов JSX. Потому что доступность важна!

eslint-plugin-prettier: Это помогает ESLint работать гладко с preetier. Поэтому, когда preetier форматирует код, он делает это, имея в виду наши правила ESLint.

eslint-plugin-react: React-специфические правила линтинга для ESLint.

Это пособие не говорит много о модульном тестировании для
Jest / Enzyme . Но если вы используете его, давайте добавим правила линтинга для них, а также:

eslint-config-jest-enzyme: Это помогает с React - и Enzyme-специфическими переменными которые глобализированы. Эта конфигурация lint позволяет ESLint знать об этих глобалах и не предупреждать о них — как и утверждения itи describe.

eslint-plugin-jest: ESLint плагин для Jest.

husky: Подробнее об этом позже в разделе автоматизация.

lint-staged: Подробнее об этом позже в разделе автоматизация.

Теперь, когда у нас есть основное понимание, давайте начнем;

Создание .eslintrc.jsфайла в корневой app/папке:

Также добавьте .eslintignoreфайл в корневой app/каталог:

Давайте начнем с обсуждения того, что .eslintrc.jsделает.

Давайте сломаем его:

• env: Среда определяет предопределенные глобальные переменные. Доступные среды-в нашем случае это es6browserи nodeесть .
  es6 включает все функции ECMAScript 6, за исключением модулей (для ecmaVersionпараметра parser автоматически устанавливается значение 6).
  browser добавит все глобальные переменные браузера, такие как Windows.
  node добавит глобальные переменные узла и область действия узла, например global. Подробнее об указании сред.
• extends: Массив строк-каждая дополнительная конфигурация расширяет предыдущие конфигурации.
  Прямо сейчас мы используем правила линтингаairbnb, которые расширяются jestи затем расширяются jest-enzyme.
• plugins: плагины в основном линтинг правила, которых мы хотим использовать.
• Прямо сейчас мы используемbabel, import, jsx-a11y, react, prettier, все из которых я объяснил выше.
• parser: По умолчанию ESLint использует Espree , но так как мы используемbabel, нам нужно использовать Babel-ESLint .
• parserOptions: Когда мы меняем синтаксический анализатор по умолчанию на Espreetobabel-eslint, нам нужно указатьparserOptions-это обязательно.
  В опциях я сообщаю ESLint, что ecmaVersionсобирается линтировать 6. Так как мы пишем наш код в EcmaScriptmodule, а не ascript, мы указываем sourceTypeкак module.
  Так как мы используем React, который приносит в JSX, в ecmaFeaturesЯ указал поменялjsxна true.
• rules: Это часть, которую я люблю больше всего в ESLint, настройки.
  Все правила, которые мы расширили и добавили с нашими плагинами, мы можем изменить или переопределить. rulesэто место, где вы это делаете. Я уже поместил комментарии против каждого правила для вашего понимания.
• Теперь, когда все прояснилось, давайте поговорим о .eslintignore
• .eslintignore принимает список путей, которые мы хотим, чтобы ESLint не линтировал. Здесь я указываю только три:
• /.git Я не хочу, чтобы мои файлы, связанные с Git, были линтованы.
• /.vscode Так как я использую VS Code, этот редактор поставляется с собственной конфигурацией, которую вы можете установить для каждого проекта. Я не хочу, чтобы мои конфигурации были линтованы. Я использую VS-код, потому что он легкий и с открытым исходным кодом.
• node_modules Я не хочу, чтобы мои зависимости были привязаны. Поэтому я добавил Это в список.

Теперь, когда мы закончили с этим, давайте поговорим о новых добавленных скриптах к нашим package.json

• $ yarn lint запуск этой команды, он будет проходить через все ваши файлы в src/и даст вам подробный журнал в каждом файле, где он находит ошибки, которые затем можно войти вручную и исправить.

выполняется yarn lint | npm run lint

• $ yarn lint:write запуск команды, он будет делать то же самое, что и команда выше. Единственное дополнение заключается в том, что если он может исправить какую-либо ошибку, которую он видит, он ее исправит и попытаться удалить столько следов кода, сколько он может.

Если вы застряли, не стесняйтесь взглянуть на хранилище для этого.

Это было немного суматошно, и если вы следовали до сих пор:

Профессор Снейп гордится вами. Хорошая работа.

Let’s Automate A Bit More

Давайте автоматизируем немного больше: На данный момент у нас есть prettierи eslint, но каждый раз приходится запускать скрипт. Давайте что-то с этим делать.

• Форматирование и Линт кода при попадании ctrl+sв ваш редактор.
• Каждый раз при фиксации кода автоматически выполняется предварительная команда, которая создает линты и форматирует код.

Format and Lint Code On Save

Формат и Lint кода при сохранении: Для этого нужно использовать редактор типа VS Code:

• Установите плагин ESLint extension.
  Скачайте здесь или нажмите ctrl+shift+xв редакторе кода VS. Откроется модуль расширений. Там, тип поиска eslint. Появится список плагинов. Установите тот, что создан Dirk Baeumer. После установки нажмите reloadкнопку, чтобы перезапустить редактор.

Как только вы установили этот плагин, в вашей корневой app/папке создайте папку под названием.vscode/-точка в названии важна.

• Внутри папки создайте settings.jsonфайл, как показано ниже:

• editor.formatOnSave Я установил значение falseздесь, потому что я не хочу, чтобы конфигурация редактора по умолчанию для формата файла конфликтовала с ESLint и Prettier.
• eslint.autoFixOnSave Я установил значение true здесь, потому что я хочу, чтобы установленный плагин работал каждый раз, когда я нажму save. Так как ESLint настроен с preetier конфигурациями, каждый раз, когда вы нажметеsave, он будет форматировать и линтировал ваш код.

Также важно отметить, что при запуске скрипта
yarn lint:writeтеперь он будет линтировать и приукрашивать ваш код на том же ходу.

Только представьте, если вам где передали кодовую базу из 20к строк кода для аудита и улучшения. Теперь представьте, что это делается вручную. Улучшение неизвестного кода. Теперь представьте, что это делается с помощью одной команды. Ручной подход может занять 30 дней…при этом автоматический подход займет у вас 30 секунд.

Таким образом, сценарии настраиваются, и каждый раз, когда вы нажмете save редактор будет делать магию для вас для этого конкретного файла. Но не все в вашей команде будут выбирать VS Code, и это нормально. Поэтому давайте автоматизируем немного больше.

Husky

Что такое husky: Хаски в основном дает вам git hook. Это означает, что вы можете выполнить некоторые определенные действия, когда вы собираетесь совершить или когда вы собираетесь отправить код в ветку.

Все, что вам нужно сделать, это установить Husky:

и в ваш package.jsonфайл добавит

Таким образом, каждый раз, когда вы фиксируете или нажимаете, он будет выполнять определенный сценарий или команду, как запустить тестовые случаи или форматировать код.

Подробнее о Хаски вы можете прочитать здесь .

Lint-staged

Что такое Lint-staged?

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

Почему Lint-staged?

Линтинг имеет больше смысла при запуске перед фиксацией кода. Таким образом, вы можете гарантировать, что никакие ошибки не попадут в репозиторий и не применят стиль кода. Но выполнение процесса Линта в целом по проекту происходит медленно, и результаты линтинга могут не иметь значения. В конечном итоге вы хотите только линтироать файлы, которые будут зафиксированы.

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

Все, что вам нужно, это установить Lint-staged:

затем package.jsonдобавьте это в файл:

Эта команда сначала выполняет lint:writeкоманду, а затем добавляет ее в промежуточную область. Эта команда будет запущена только для .js& .jsx, но вы можете сделать то же самое для других файлов, если хотите.

При совмещенные H uskyи Lint-staged

Каждый раз, когда вы фиксируете свой код, перед фиксацией кода, он будет запускать скрипт под названием lint-stagedкоторый запустит npm run lint:writeкоторый будет форматировать и линтировать ваш код-затем добавить его в область подготовки и затем зафиксировать. Круто, правда?!

Ваш окончательный package.json файл должен выглядеть следующим образом. Это тот же фрагмент, которым я поделился выше:

Теперь каждый раз, когда вы делаете это:

Он будет Линтировать и форматировать код на основе всех правил, помещенных в
.eslintrc.jsфайл. С помощью этого вы можете быть уверены, что ни один плохой код никогда не будет запущен в производство.

Теперь, когда этот раздел завершен, вы prettiereslinthuskyинтегрированы в базу кода.

Поговорим о EditorConfig

Сначала создайте .editorconfigфайл в корневой app/папке и вставьте в него код, приведенный ниже:

Так что такое EditorConfig?

Таким образом, не все будут использовать VS — код-и вы не обязаны его применять. Для того, чтобы держать всех на той же странице с точки зрения того, что по умолчанию, такие как tab spaceили line endingдолжны быть, мы используем
.editorconfig. Это действительно помогает применять некоторые определенные наборы правил.

Вот список всех редакторов, поддерживающих EditorConfig . Список редакторов включает web storm, App code, Atom, eclipse, emacs, bbedit и многое другое.

Вышеуказанная конфигурация будет делать следующее:

• обрезать пробелы в .md& .jsфайлах
• установить стиль отступа spaceвместо tab
• размер отступа к 2
• конец строки должен быть lfтаким, чтобы у всех, независимо от их ОС, был один и тот же конец строки. Подробнее здесь.
• в конце файла должна быть новая строка
• и максимальная длина линии должна быть 100

Со всей этой конфигурацией теперь вы готовы. Если вы хотите увидеть исходный код .

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

Если вам понравилась моя статья, вы также должны проверить мою другую статью: Как объединить Webpack 4 и Babel 7, чтобы создать фантастическое приложение React , в котором я говорю о настройке Webpack и Babel для React.

Clean Code

Translated: medium
Help us with your claps :)