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

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

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

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
}
	

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

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

	
npx pretty-quick 
	

Позже мы интегрируем этот инструмент вместе с 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
	

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

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

Пример .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 Результат

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