меню

Использование средств форматирования кода повышает удобство читаемости кода и помогает сохранить единый стиль во всем проекте. В этой статье мы рассмотрим один из самых популярных линтеров 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

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


Возможно, вам будет интересно

У кого лучше заказать сайт?

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

Инструменты упрощающие разработку

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

Сайт визитка

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

Когда ждать Web 3.0 и его отличия от Web 2.0

О новой ступени развития интернета Web 3.0 начали говорить еще в начале двухтысячных, когда в полной мере удалось реализовать веб-пространство, которым мы пользуемся сейчас.

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту