Меню ×
Как интегрировать 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

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

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

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

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

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

наверх