Меню ×
Как интегрировать Husky, ESLint, Prettier в проект менее чем за 15 минут? Пошаговое руководство

Как интегрировать Husky, ESLint, Prettier в проект менее чем за 15 минут? Пошаговое руководство

Использование средств форматирования кода повышает удобство читаемости кода и помогает сохранить единый стиль во всем проекте. В этой статье мы рассмотрим один из самых популярных линтеров ESLint, который предназначен для Javascript и Typescript. Затем мы установим библиотеку для форматирования кода Prettier. Когда мы добавим к ним хуки Husky после этого, мы сможем обеспечить одинаковый стиль кода для каждого члена команды или участника нашего проекта.

1. Добавьте расширения в VSCode

На первом этапе добавьте расширение в редактор VSCode ( Ctrl + Shift + X )

Добавьте расширения в VSCode ESLint

Добавьте расширения в VSCode Prettier

2. Установка Prettier и pretty-quick

Установите пакеты с помощью npm:

	
npm install --save-dev prettier pretty-quick
	

2.1 Конфигурация Prettier

Создайте 2 файла в корне Вашего проекта там же, где у вас есть package.json

.prettierignore.json

	
package.json
package-lock.json
yarn.lock
dist
node_modules
	

.prettierrc

	
{
  "bracketSpacing": true,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "none",
  "printWidth": 80,
  "tabWidth": 2
}
	

Структура должна выглядеть примерно следующим образом:

ESLint и Prettier структура проекта

Если Вы задавались вопросом и спрашивали зачем он нужен? Теперь мы можем начать его использовать. Вы можете запустить форматирование для всех файлов (или только поэтапно и т. д.) С помощью одной команды.

	
npx pretty-quick 
	

ESLint и Prettier структура проекта

Позже мы интегрируем этот инструмент вместе с husky hooks.

Если Вы используете Windows Powershell и у вас возникли проблемы с запуском команды npx, вам необходимо изменить политику выполнения.

	
set-executionpolicy remotesigned
	

3. Установите ESLint.

Для установки пакета на своем проекте используйте команду:

	
npm install eslint 
	

Для глобальной установки:

	
npm install -g eslint
	

Для создания файла конфигурации для ESLint .eslintrc.json Вы можете выбрать один из двух вариантов:

3.1. Используйте палитру команд VSCode

Откройте палитру команд в VSCode (Ctrl + Shift + P). Запустите ESLint: Create ESLInt configuration. Он напрямую откроет терминал и запустит процесс настройки.

3.2. Используйте npm

Если Вы установили пакет ESLint глобально для генерации использования файла:

	
npm eslint --init
	

Если вы установили свой пакет ESLint в рамках проекта, Вам следует использовать немного другую команду для (Windows):

	
 .\node_modules\.bin\eslint --init 
	

для Linux и Mac:

	
./node_modules/.bin/eslint --init
	

Оба подхода сводятся к одному и тому же процессу настройки, где Вам нужно ответить на некоторые вопросы о настройках линтера.

Инициализация ESLint

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

Пример .eslintrc.json, если у вас те же ответы, что и на предыдущем рисунке, должен выглядеть примерно так:

	
{
  "root": true,
  "ignorePatterns": ["projects/**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "parserOptions": {
        "project": ["tsconfig.json"],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app",
            "style": "kebab-case"
          }
        ]
      }
    },
    {
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended"],
      "rules": {}
    }
  ]
}
	

5. Хаски

У Git есть способ, как запускать пользовательские скрипты, когда происходит какое-либо действие, например, фиксация или отправка. Вы можете использовать его для линтинга Ваших коммитов, запуска тестов, lint кода и т. д. При фиксации или отправке. Husky поддерживает все хуки Git.

	
npm install --save-dev husky
	

5.1 Добавьте хуки хаски в package.json

	
"husky": {
    "hooks": {
      "pre-commit": "npx pretty-quick --staged ng lint ng test",
      "pre-push": "ng build --aot true"
    }
	

5.2 Добавьте сценарий подготовки в package.json

	
"prepare": "cd .. && husky install client/.husky"
	

ВНИМАНИЕ!!! Вам необходимо установить хаски из корневого каталога, в котором инициализирован репозиторий git!

5.3 запустить сценарий подготовки

	
npm run prepare
	

5.4 Создайте hook для pre-commit

	
npx husky add ./client/.husky/pre-commit "npx pretty-quick --staged ng lint ng test"
	

Он будет запускаться каждый раз после запуска git commit.

5.5 Результат

ESLint Prettier

Если Вам понравилась эта статья, не стесняйтесь делиться ею.


Похожие материалы

Для начала работ по дизайну и созданию сайтов будет заключен договор между Интернет агентством ProWeb и Вашей компанией. Договор описывает основные механизмы взаимодействия сторон, схему оплаты, сроки и этапы работ по созданию интернет-представительств. Неотъемлемой частью Договора являются Приложения, описывающие техническое задание, требование к функциональности интернет-представительства и бюджет работ.

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

Итак, что же такое термины DRY, DIE, KISS, SOLID, YAGNI и в чем заключаются эти подходы в программировании – рассмотрим их по порядку.

наверх