меню

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

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


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

Более 350 бесплатных инструментов для разработчиков

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

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

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

Угрозы информационной безопасности и методы защиты

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

Что такое «движок» и почему его еще называют «CMS»?

Это система управления сайтом. Его программное обеспечение, включающее в себя разные программы и модули. Движок обеспечивает удобный доступ, внесение изменений и даже разработку сайта или, например, автоматизацию его работы. Некоторые сайты являются еще и удобными сервисами – так вот такими их делает мощный движок. CMS – аббревиатура из слов «Content Management System», что переводится как «Система Управления Содержимым».

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

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

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

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

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

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

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