Автоматическое форматирование кода с помощью prettier и jsbeautify в git pre commit hook

Всем привет!!! В этой статье мы узнаем, как выполнять автоматическое форматирование кода для файлов HTML, CSS, Sass, Scss, JavaScript, TypeScript, JSON и т. д. с помощью prettier и js-beautify на хуке git pre-commit с помощью husky и lint-staged.

Мы можем выполнять это автоматическое форматирование кода для любых проектов/приложений, основанных на NPM (менеджере пакетов Node). Просто это означает, что мы можем интегрировать это в любой проект, содержащий файл package.json 😃!!! Независимо от того, основан ли проект на Angular, VueJs, ReactJs или любых других фреймворках.

Мы получим этот вывод в конце этой истории.

Мы будем использовать

• красивее для форматирования кода для типов файлов, таких как TypeScript(ts), JavaScript(js), CSS, Sass(Scss), Less, JSON, JSX, GraphQL, YAML, и т. д., кроме HTML-файла, так как на момент создания этой статьи он находится в пробной фазе.
• js-beautify для форматирования кода для типов файлов HTML.
• lint-staged для форматирования кода только для подготовленных файлов git и не позволяйте проникнуть во всю базу кода!
• husky для запуска нашего автоматического форматирования кода на хуке git pre-commit, чтобы при каждой фиксации мы гарантировали, что весь зафиксированный код будет отформатирован в соответствии с нашими определенными пользовательскими правилами форматирования >независимо от того, установили разработчики эти плагины форматирования (prettier, js-beautify) на свою машину или нет!

Зачем нам это нужно?

Для больших проектов с несколькими разработчиками разные разработчики предпочитают разные форматы кода или имеют свои собственные настройки форматирования кода в своих инструментах IDE или CLI (помните, вкладки вместо пробела). Поэтому мы часто сталкиваемся с такими проблемами, как

• При фиксации кода наша IDE показывает нам много ненужных git diff пробелов, даже если мы изменили только одну строку. Иногда нам становится трудно понять, что на самом деле изменилось в коде.
• Рецензенты PR также сталкиваются с проблемами при рассмотрении PR. Он / она не мог сосредоточиться на фактической логике изменения кода. Таким образом, участники часто делают первую итерацию PR, исправляя проблемы, связанные со стилем.
• Единые глобальные общие правила форматирования центрального кода не поддерживаются.
• Мы не тратим свое время там, где это необходимо, из-за некоторых проблем, связанных со стилем, и это замедляет нашу скорость.

Преимущества

• Ваша кодовая база написана в едином едином стиле, независимо от того, сколько разработчиков сотрудничают с ней, и установили они плагины форматирования (prettier, js-beautify) на свою машину или нет!
• Половина вашего руководства по стилю кода больше не нужна. Зачем изучать табуляцию или пробелы, если они все равно будут автоматически переформатированы? Оставьте стиль кода robots. Вместо этого сосредоточьтесь на коде.
• Вы будете писать свой код быстрее. Помните те времена, когда вам приходилось ВВОДИТЬ новую строку каждый раз, когда вы хотели вызвать другой метод? Или вам приходилось 10 секунд задумываться о том, держать ли ваш массив в одну строку или в несколько строк? Забудь об этом сейчас. IDE сделает это за вас.
• При проверке кода вы можете сосредоточиться на коде, а не на его стиле. Избегайте редко эффективных и совершенно невеселых дискуссий, таких как «Я думаю, нам следует использовать здесь дополнительные скобки. Сейчас это слишком нечитаемо.». Получайте больше времени и энергии, а при просмотре PR сосредоточьтесь на самом важном в них: на представленном коде и его логике.
• В целом это улучшит вашу кодовую базу и поможет избежать ошибок. Потому что даже если это просто означает приведение в порядок ваших пространств, это также означает следующее: ваш код будет намного понятнее, и у вас будет больше времени, чтобы сосредоточиться на нем, а не на чем-то еще.

Не могу дождаться, чтобы сделать это ... Давайте начнем

• Установите prettier, js-beautify, lint-staged и huskyкак devDependencies, выполнив команду

npm i prettier js-beautify lint-staged husky --save-dev

• Создайте файл .prettierrc в корне вашего проекта. Определите свой собственный код, форматирующий пользовательские конфигурации в этом файле, например

{
    "printWidth": 80,
    "tabWidth": 2,
    "useTabs": false,
    "singleQuote": true,
    "trailingComma": "all",
    "bracketSpacing": true,
    "arrowParens": "always",
    "jsxBracketSameLine": false,
    "semi": true
}

Вы можете найти больше доступных вариантов конфигурации на https://prettier.io/docs/en/options.html

• Создайте файл .prettierignore в корне вашего проекта. Определите файлы и папки, которые вы не хотите форматировать как

node_modules/*
e2e/*
dist/*
src/assets/scss/bootstrap/*

• Создайте файл .jsbeautifyrc в корне вашего проекта. Определите свой собственный код HTML, форматирующий пользовательские конфигурации в этом файле, например

{
    "editorconfig": false,
    "indent_size": 2,
    "end_with_newline": true,
    "html": {
        "brace_style": "collapse",
        "indent_char": " ",
        "indent_scripts": "normal",
        "indent_inner_html": true,
        "indent_empty_lines": false,
        "wrap_line_length": 120,
        "wrap_attributes": "force-expand-multiline",
        "unformatted": [
            "sub",
            "sup",
            "b",
            "i",
            "u",
            "em",
            "strong"
        ],
        "preserve_newlines": true,
        "max_preserve_newlines": 2
    }
}

Вы можете найти больше доступных параметров конфигурации на https://github.com/HookyQR/VSCodeBeautify/blob/master/Settings.md

• Создайте сценарии npm и настройте husky, lint-staged в package.json, например

{
    ...,
    "scripts": {
        ...,
        "format": "npm run format:prettier && npm run format:html",
        "format:prettier": "prettier --config .prettierrc \"src/**/*.{ts,css,less,scss,js}\" --write",
        "format:html": "js-beautify --config .jsbeautifyrc --type 'html' --file 'src/**/*.html' --replace"
    },
    "dependencies": {
        ...
    },
    "devDependencies": {
        "husky": "^4.2.3",
        "js-beautify": "^1.10.3",
        "lint-staged": "^10.0.8",
        "prettier": "^1.19.1"
    },
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "lint-staged": {
        "*.{ts,css,less,scss,js}": [
            "prettier --config .prettierrc --write",
            "git add"
        ],
        "*.html": [
            "js-beautify --config .jsbeautifyrc --type 'html' --replace",
            "git add"
        ]
    }
}

• Все!!! Теперь код будет автоматически форматироваться перед каждой фиксацией, не беспокоясь, ИЛИ вы можете вручную запустить «формат запуска npm» в своем терминале. сделать форматирование для всех типов файлов.

Репозиторий GitHub

Ниже приведена ссылка на наш репозиторий GitHub, где вы можете скачать этот рабочий пример.

Спасибо!!! Вы нашли свое решение или узнали что-то новое? Если да, пожалуйста:

• хлопните в ладоши кнопку 👏 ниже️ столько раз, сколько сможете, и поделитесь этим постом с другими.
• Подпишитесь на нас на Medium, чтобы прочитать больше статей о Python, Angular, React, Vue, Node JS.
• Вы можете оставить свой отзыв/предложение в комментариях 💬 ниже.

Хотите ознакомиться с другими нашими статьями?