Подготовка нашего репозитория

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

В этом посте мы используем pnpm для создания нашего файла package.json, установим prettier и настроим husky и lint-staged для форматирования всех измененных файлов с помощью prettier при их фиксации. Мы также создадим минимальный файл .gitignore.

Создание package.json

Чтобы создать файл package.json, я запустил pnpm init в каталоге нашего проекта. Это создало файл package.json с несколькими значениями по умолчанию:

{
  "name": "discord-server-info",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
Войти в полноэкранный режим Выйти из полноэкранного режима

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

{
  "name": "discord-server-info",
  "private": true,
  "license": "MIT",
  "description": "Explore Discord server data and statistics",
  "keywords": [
    "discord",
    "discord.js",
    "next.js",
    "prisma"
  ],
  "repository": "https://github.com/developer-dao/discord-server-info",
  "readme": "https://github.com/Developer-DAO/discord-server-info#readme",
  "bugs": "https://github.com/Developer-DAO/discord-server-info/issues",
  "scripts": {},
  "dependencies": {}
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Давайте посмотрим на некоторые изменения, которые я сделал:

  • удалил version
    • поскольку я уже знаю, что этот package.json в конечном итоге будет служить корнем для нашего monorepo, он не будет иметь version
  • добавлены description, keywords, repository, readme, bugs.
    • они предоставляют дополнительный контекст о нашем пакете
  • создал пустые dependencies
    • поскольку это корневой package.json, мы будем использовать только dependencies (потому что различие между dependencies и devDependencies не существует в корне)

Создайте .gitignore.

Этот файл в конечном итоге будет содержать множество файлов и папок, которые мы не хотим фиксировать в нашем репо, но пока мы просто добавим node_modules:

node_modules/
Вход в полноэкранный режим Выход из полноэкранного режима

Создайте .prettierrc.

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

{
  "proseWrap": "always",
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all"
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Установка prettier

Чтобы установить prettier, я запустил pnpm i -D prettier.

Это добавляет prettier в наши devDependencies. Как упоминалось выше, мы не будем использовать devDependencies, но prettier должен быть в этом списке, чтобы следующий шаг работал.

Мы исправим это позже.

Настройка husky и lint-staged

Чтобы установить и настроить husky и lint-staged, я запустил pnpm dlx mrm@2 lint-staged.

Эта утилита обнаруживает в нашем репозитории ряд инструментов, которые поддерживает lint-staged, и автоматически устанавливает + настраивает необходимые нам зависимости для них.

В данном случае она:

  • обнаружил prettier и установил husky и lint-staged
  • добавил скрипт prepare, который запускает husky install, чтобы husky был автоматически установлен в локальном окружении каждого контрибьютора
  • установил husky в мое локальное окружение (каталог .husky)
  • добавил блок конфигурации lint-staged в package.json:

    "lint-staged": {
      "*.{js,css,md}": "prettier --write"
    }
    

Поскольку я заранее знаю, какие типы файлов мы будем использовать в этом проекте, я обновил конфигурацию lint-staged, чтобы нацелить ее на них:

"lint-staged": {
  "*.{js,ts,tsx,md,json,yml}": "prettier --write"
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Переименуйте devDependencies в dependencies.

Наш последний шаг — изменить devDependencies на dependencies в нашем файле package.json:

"dependencies": {
  "husky": "^8.0.1",
  "lint-staged": "^12.4.2",
  "prettier": "^2.6.2"
}
Вход в полноэкранный режим Выход из полноэкранного режима

Нам также нужно запустить pnpm i, чтобы обновление вступило в силу.


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

Вы можете просмотреть PR для этих изменений здесь: https://github.com/Developer-DAO/discord-server-info/pull/9

Оцените статью
Procodings.ru
Добавить комментарий