Введение
В этой статье мы рассмотрим настройку ESLint и Prettier для автоматического форматирования кода в проекте на Nuxt 3.
ESLint — это инструмент для статического анализа кода, который помогает поддерживать его качество, следуя заданным стандартам. Он обнаруживает потенциальные проблемы, такие как неиспользуемые переменные, запрещенные глобальные объекты или неправильное обращение с ошибками в Promise.
Prettier — это форматер, который автоматически приводит код к единому стилю, регулируя длину строк, отступы, расстановку пробелов вокруг ключевых слов и другие аспекты форматирования.
Установка
# ESLint
pnpm add -D @nuxt/eslint eslint typescript
# Prettier
pnpm add -D eslint-plugin-prettier eslint-config-prettier prettier
#Дополнительные зависимости для pre-commit
pnpm add -D lint-staged husky typescriptНе забывайте флаг -D, который означает, что установка будет только в секцию devDependencies
Настройка
Необходимо добавить модуль @nuxt/eslint в nuxt.config.ts
// nuxt.config.ts
export default defineNuxtConfig({
devtools: { enabled: true },
modules: [
// ...
'@nuxt/eslint',
// ...
],
})Запустите pnpm run dev, чтобы сгенерировать начальный файл конфигурации ESLint (eslint.config.mjs), который будет выглядеть следующим образом:
// eslint.config.mjs
import withNuxt from './.nuxt/eslint.config.mjs'
export default withNuxt()Добавляем скрипты
Финально package.json будет выглядеть так:
{
...
"scripts": {
...
"lint": "pnpm lint:eslint && pnpm lint:prettier",
"lint:eslint": "eslint .",
"lint:prettier": "prettier . --check",
"fix": "eslint . --fix && prettier --write --list-different .",
"prepare": "husky",
"pre-commit": "pnpm lint"
},
"lint-staged": {
"*.{js,ts,vue,yaml}": [
"eslint --fix",
"prettier --write"
]
},
"devDependencies": {
"@nuxt/eslint": "^1.4.1",
"eslint": "^9.27.0",
"eslint-config-prettier": "^10.1.5",
"eslint-plugin-prettier": "^5.4.1",
"husky": "^9.1.7",
"lint-staged": "^16.1.0",
"prettier": "^3.5.3",
"typescript": "^5.8.3"
}
}Husky — это инструмент, который позволяет запускать определенные скрипты (например, линтинг или тесты) прямо во время Git-хуков, таких как pre-commit или pre-push. Это помогает гарантировать, что в репозиторий не попадет код с ошибками или несоответствующий стилю.
Первоначально запустите pnpm husky - данная команда настроит pre-commit для гита.
lint-staged — это утилита, которая запускает линтинг и форматирование только для измененных файлов (тех, что попали в git add). Это ускоряет проверку кода, особенно в больших проектах, где нет смысла прогонять ESLint или Prettier на всей кодовой базе при каждом коммите.
Как вы видите, мы добавили условия
"lint-staged": {
"*.{js,ts,vue,yaml}": [
"eslint --fix",
"prettier --write"
]
}Использование
После всех манипуляций, при запуске git commit .. у вас начнется проверка pnpm lint:eslint && pnpm lint:prettier
Если у вас произойдут ошибки, то достаточно выполнить команду pnpm fix, она изменит все файлы по настроенным конфигурациям.
Если вам надо запускать проверку не на всем проекте, то достаточно выполнить pnpm lint-staged
