Добро пожаловать! Если вы ищете способы улучшить свой проект JavaScript/TypeScript и оптимизировать рабочий процесс, вы попали по адресу. Сегодня мы собираемся углубиться в мощную цепочку инструментов, которая не только сделает ваш код чище и согласованнее, но и автоматизирует важные части вашего процесса разработки.

С Eslint, Prettier, Husky и Lint-Staged вы сможете больше сосредоточиться на создании выдающихся приложений и меньше на исправлении надоедливых несоответствий стиля или синтаксических ошибок. Давайте начнем!

Каковы преимущества этой установки?

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

  1. Eslint. Этот инструмент поможет вам выявить и устранить проблемы в коде JavaScript/TypeScript. Он проверяет распространенные ошибки синтаксиса и стиля, делая ваш код более последовательным и простым для понимания.
  2. Красивее: это самоуверенный форматировщик кода. Он обеспечивает согласованный стиль, анализируя ваш код и перепечатывая его по своим собственным правилам. Это устраняет весь оригинальный стиль и гарантирует согласованность.
  3. Husky: этот инструмент улучшает ваши коммиты и многое другое. Он позволяет запускать скрипты (например, линтинг или тесты) перед фиксацией кода, гарантируя, что будет зафиксирован только качественный код.
  4. Lint-Staged. В сочетании с Husky он позволяет запускать линтеры только для поэтапных изменений, делая процесс быстрее и эффективнее.

Теперь, когда мы поняли «почему», давайте перейдем к «как».

Настройка вашего проекта

Убедитесь, что у вас установлен Node.js и что вы инициализировали новый проект перед началом.

Шаг 1: Установите необходимые пакеты

Начните с установки необходимых пакетов с помощью npm, менеджера пакетов Node.js. В терминале выполните следующие команды:

npm install --save-dev eslint prettier eslint-plugin-prettier eslint-config-prettier
npm install --save-dev husky lint-staged

Шаг 2: Настройте Eslint

Создайте файл .eslintrc.js в корневом каталоге вашего проекта со следующим содержимым:

module.exports = {
    root: true,
    parser: '@typescript-eslint/parser',
    plugins: ['@typescript-eslint'],
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
        'prettier',
    ],
};

Эта конфигурация устанавливает Eslint для использования синтаксического анализатора TypeScript и расширяет некоторые рекомендуемые конфигурации.

Шаг 3: Настройте красивее

Создайте файл .prettierrc в корневом каталоге вашего проекта со следующим содержимым:

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

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

Шаг 4: Настройте Хаски

Обновите файл package.json, добавив следующие сценарии и конфигурации:

{
  "scripts": {
    "lint": "eslint --quiet --fix",
    "prepare": "husky install"
  },
}

Сценарий prepare отвечает за настройку git-хуков Husky.

Шаг 5. Настройте хук Husky перед фиксацией

Запустите следующую команду в своем терминале, чтобы настроить хук перед фиксацией с помощью Husky:

npm run prepare
npx husky add .husky/pre-commit "npx lint-staged"

Эта команда создает файл pre-commit в каталоге .husky с указанным сценарием. Хук pre-commit запускает Lint-Staged всякий раз, когда вы делаете коммит.

Шаг 6. Настройте Lint-Staged

Добавьте следующую конфигурацию в файл package.json:

{
  "lint-staged": {
    "*.{js,ts}": ["npm run lint", "prettier --write"]
  }
}

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

Шаг 7. Проверьте свою конфигурацию

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

git add .

Затем попробуйте зафиксировать изменения:

git commit -m "Test commit"

Если ваша настройка верна, Husky запустит Eslint и Prettier для запуска ваших промежуточных файлов. Если есть какие-либо проблемы, Eslint попытается их исправить, а Prettier отформатирует ваш код в соответствии со своими правилами. Если все в порядке, ваша фиксация будет успешной.

Помните, что конфигурация этих инструментов находится в соответствующих файлах конфигурации (.eslintrc.js для Eslint, .prettierrc для Prettier, .husky/pre-commit для Husky и lint-staged в package.json).

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

Ваша среда разработки должна быть индивидуальной, а не универсальной.

И вуаля!

Вы доработали свой проект с помощью Eslint, Prettier, Husky и Lint-Staged. Эта настройка не только поможет вам поддерживать согласованный стиль кодирования, но также гарантирует, что любые проблемы будут обнаружены и устранены на ранней стадии. Это может показаться небольшой работой, но повышение вашей производительности и качества кода делает это стоящим вложением. За то, чтобы писать лучший код, раньше выявлять ошибки и эффективно сотрудничать с вашей командой.



Присоединяйтесь к Medium по моей реферальной ссылке — Leo G.
Прочитайте все истории от Leo G. (и тысяч других авторов на Medium). Ваш членский взнос напрямую поддерживает Leo G…medium.com



Вот несколько полезных ссылок на официальную документацию по каждому инструменту, а также некоторые дополнительные ресурсы, которые помогут вам настроить настройку:

  1. Eslint. Посетите Руководство пользователя Eslint, чтобы узнать больше о том, как настроить конфигурацию Eslint.
  2. Prettier: Документация Prettier — отличный ресурс для получения дополнительной информации о различных доступных вам вариантах.
  3. Husky: ознакомьтесь с документацией Husky, чтобы узнать больше о том, как работают git hooks и как их можно использовать для автоматизации рабочего процесса.
  4. Lint-Staged. В GitHub-репозитории Lint-Staged есть отличный файл README с подробными инструкциями и примерами.

Чтобы пойти еще дальше и сделать эту настройку действительно своей, вы также можете изучить создание общей конфигурации для Eslint или узнать больше о расширенной конфигурации Prettier.

Помните: чем больше вы знаете, тем лучше вы сможете адаптировать настройку к своим конкретным потребностям и рабочему процессу.