Сообщество JavaScript, Web и Node благословлены в эти дни, имея простое в использовании (и не очень простых в использовании) инструментов в наших пальцах, наряду с документацией для них, написанные специальными членами сообщества.
Этот пост о создании простейшего быстрого и легкого трубопровода с некоторыми известными инструментами, такими как Красивее Для качества кода/удочние удовольствия, а Хаски Для автоматического применения этих правил в нашей кодовой базе.
В некоторых последующих постах мы добавим шаги постройки, тестирование и некоторые технологии, специфичные технологии, такие как React и Teadercript. Тем не менее, сегодня мы держим его простым и чистым только отличным и хаски.
Кроме того, имейте в виду, что многие существующие инструменты и рамки, такие как создание приложения RACT, GATSBY, и так далее, уже предоставляют некоторые из упомянутых здесь инструментов. Тем не менее, мы начинаем с нуля, потому что наша цель в основном учится о инструментах и понимает, почему они используются.
Как только мы понимаем, насколько легко настроить эти инструменты качества кода, это еще одно препятствие, чтобы перейти при попытке использовать их в своем собственном проекте.
Но Сэмми, почему?
«То, что не может быть автоматизировано, не может быть применено». -Бриан Холт, @holtbt.
Высокое качество, знакомый, последовательный код легче читать и понимать. Кроме того, код, похожий на ваш собственный, легче для вас понять.
Как мне начать?
Хорошо, Step # 1 прост: создайте новый проект NPM, создайте файл JS, и напишите уродливый, самые популярные, самые нечитаемые (но работающие) код, который вы написали. Игнорируйте правила стиля, лучшие практики и игнорируют то, что означает, что люди говорят в Twitter. Вытащите это из вашей системы.
Теперь, когда вы получили нечестивый беспорядок перед вами, наш первый из двух инструментов входит в игру:
Красивее
Потому что иногда нам нельзя доверять.
Мы используем красивую версию 1.16.4 Отказ
Crettier — это код код — это означает, что он будет схватить ваш код и применить его собственный соответствующий стиль правил на нем. Он имеет некоторую гибкость, но в целом разработчики используют правила по умолчанию для хранения стиля в соответствии с проектами.
Reettier превратит этот непоследовательный беспорядок один вкладыш:
export function funkyFilteredNames(names = [...defaultNames]) { return names.filter((name) => name.toLocaleLowerCase()[0] == "a").map(name => name.toLocaleUpperCase()); }
В этот читаемый фрагмент:
export function funkyFilteredNames(names = [...defaultNames]) {
return names
.filter(name => name.toLocaleLowerCase()[0] == "a")
.map(name => name.toLocaleUpperCase());
}
Как Это зависит от вас. Вы можете использовать красивее как инструмент CLI или вы можете позволить вашему текстовому редактору выбора обрабатывать его. Чтобы сохранить это просто (и позвольте вам использовать все, что вы хотите) Мы собираемся использовать красивее CLI.
Если вы хотите увидеть, как установить красивее на свою IDE, проверить их документы по этому вопросу Отказ
Первые вещи в первую очередь — установите красивее: NPM I -D красивее Отказ
Теперь сделайте мне услугу: откройте файл, в котором находится ваш грязный код, и откройте командную строку в том же каталоге, что и ваш файл. При взгляде на ваш код введите следующую команду:
npx prettier *.js --write
И бум, больше не беспорядок!
Поздравляем, у вас есть правила стиля кода в вашей кодовой базе! Чтобы сделать это проще, мы сделаем вышеупомянутый фрагмент Script NPM с несколькими изменениями, чтобы найти все файлы JavaScript:
// package.json:
{
// ...
"scripts": {
// other scripts
"pretty": "prettier \"**/*.js\" --write"
}
}
Теперь вам нужно только бежать NPM беги красиво Из в пределах вашего проекта для форматирования всех файлов JS в нем!
Поздравляем, вы сделали это легко! ✨
Вы также можете сделать красивее проверить код вместо того, чтобы форматировать его, и ошибка консоли, когда код не отформатирован:
"pretty-check": "prettier \"**/*.js\" --list-different"
Но как насчет того, чтобы напомнить себе запустить формует? Вы полностью уверены, что вы будете запускать более красивее каждый раз? Вот где наш второй инструмент на сегодня приходит: хаски!
Хаски
Потому что мы так легко забыли
Мы используем версию Husky 1.3.1
🐕 Husky облегчает нам писать Git Hooks — команды, которые работают, когда мы называем определенные действия Git. Мы будем использовать его, чтобы убедиться, что красивее проверяет код при попытке совершения репозитория.
Шаги для хаски просты, начиная с файла конфигурации, который определяет наши крючки!
Создайте файл под названием .huskyrc В корне вашего проекта и напишите в следующем тексте, чтобы определить крюк это будет работать Довольно-чек перед каждым совершить :
{
"hooks": {
"pre-commit": "npm run pretty-check"
}
}
Затем мы устанавливаем хаски: NPM I -D. хаски
Примечание: важно, чтобы вы установили хаски после Определение .huskyrc файл. Во всяком случае, вы всегда можете переустановить пакет. Кроме того, вы должны удалить папку .git/Cooks, если хаски все еще не работают, а затем переустановите пакет. Вы можете прочитать немного больше об этом В этом выпуске GitHub
Теперь перейдите к одному из ваших файлов и напишите немного уродливого кода. Нет необходимости делать беспорядок, как в прошлый раз, будет достаточно одной цитируемой нитой!
Сохранить и попытаться совершить файл, и вы увидите это в конце ответа:
Хаски отклонил коммит, потому что красивее проверил код, и обнаружил, что код не соответствует более привлекательным стандартам!
Если вы хотите, вы можете изменить предварительный коммитский крюк для форматирования кода вместо того, чтобы просто проверить его, изменив содержимое ` «Предварительный коммит» выполнять Красивая вместо Довольно-чек Отказ
Поздравляем, вы сделали его автоматическим! ✨
В наши дни настроив свое рабочее пространство с помощью Fixtatter не сложно, и он проходит большие длины для читаемости вашего кода.
Reettier — это один из сегодняшних самых используемых JavaScript Fixatter с почти 3,5 миллионами загрузки еженедельно, и разработчики сделали отличную работу, чтобы облегчить использование и понять.
Husky позволяет нам писать GIT Commits Hooks без особых накладных расходов или усилий. В сочетании с красивее, это действительно трудно совершить код, который несовместимо с более красивым руководством стиля.
Я настроил этот небольшой проект для вас, чтобы проверить шаги, которые я описал в статье:
Sammyisra/JseasyPipipeline.
Пример проекта JS с трубопроводом и инструментами качества кода 📝
Сопровождающий проект к моим статьям на dev.to О внедрении инструментов трубопровода JS/Workspace
Репо будет иметь примеры о том, как реализовать различные инструменты, такие как красивее, хаски, эслинт, TRAVESCI, TESKSCRES и аналогичные инструменты в этом стиле.
Этот проект показывает, как реализовать инструменты проекта для проектов JavaScript. Статьи, где я объясняю инструменты здесь:
Проверьте ветку Part1.Prettierandhusky Для кода конкретно для этой статьи.
❤️. Спасибо всем за чтение! Больше части этой серии придет позже. Я надеюсь использовать Eslint, Travisci и мои собственные личные инструменты в будущих статьях.
Оригинал: «https://dev.to/sammyisa/js-project-setup-code-quality-is-simple-when-you-dont-have-to-do-anything-523e»