это руководство также включает мою предпочтительную настройку Lint/Formatting
В связи с растущим использованием NextJS в этой статье я хочу поделиться с вами тремя моими любимыми инструментами, которые сделают вашу кодовую базу чище и здоровее. Я также поделюсь своими предпочтительными настройками для каждого из этих инструментов.
Эслинт
в этом руководстве вы можете поменять местами yarn add --dev и npm install --save-dev
Eslint — самый популярный линтер для проектов JavaScript. Несмотря на свою популярность, eslint вызывает много ненависти из-за своей дурной славы при использовании в личном проекте. Несмотря на это, eslint действительно полезен для вашей кодовой базы в долгосрочной перспективе, особенно если вы изменяете конфигурацию в соответствии со своими потребностями.
Чтобы использовать eslint в nextjs, установите эти 2 зависимости:
yarn add --dev eslint yarn add --dev eslint-config-next
После установки зависимостей создайте .eslintrc.json в базовом каталоге и добавьте эту конфигурацию:
{
"extends": ["next/core-web-vitals", "eslint:recommended"],
// Using the unused imports package to autofix unused imports
"plugins": ["unused-imports"],
"globals": {
"JSX": "readonly"
}
}
массив расширяет — это набор предопределенных правил, которые уже были установлены nextjs/eslint. Подробнее о правилах можно прочитать здесь. Затем, чтобы запустить линтер, введите в терминале:
npx next lint --fix
Флаг исправления предназначен для автоматического исправления файлов с нарушениями. Какие-то нарушения можно исправить автоматически, какие-то приходится делать вручную. Чтобы упростить линтинг, добавьте это в свои package.json скрипты.
// package.json
{
...
"scripts" : {
...
"lint": "next lint --fix"
}
...
}
Затем попробуйте запустить yarn lint или npm run lint , вывод должен быть таким же.
Если есть ошибка, ваш вывод должен быть таким
В каждой ошибке вам будет предоставлен исходный файл этого нарушения, строки: столбец этой ошибки и правила, которые она нарушает, довольно аккуратно, верно? Правила, которые нарушает приведенное выше изображение, no-unused-vars, и может быть много правил, которые вы нарушаете, если вы впервые настраиваете. Если есть правила, которые вам не понравились в eslint, вы можете удалить эти правила, указав их в объекте rules в .eslintrc.json. Пример объекта правил в eslint:
{
...
"rules": {
"no-duplicate-case": "off", // this will turn off a rule
"no-unused-vars": "warn", // this will notify violation but not output error
"no-func-assign" : "error" // this will notify violation and outputs error
}
}
Подробнее о правилах можно прочитать здесь.
Мне также нравится добавлять eslint-plugin-unused-import, поскольку он помогает мне автоматически исправлять неиспользуемый импорт. Запустите yarn add --dev eslint-plugin-unused-imports, затем добавьте эту строку в .eslintrc.json:
// .eslintrc.json
{
...
"plugins": ["unused-imports"],
"rules": {
"unused-imports/no-unused-imports": "error"
}
...
}
Теперь, если вы снова запустите yarn lint, он автоматически исправит неиспользуемый импорт, о чем я часто забываю.
красивее
Prettier — это программа форматирования кода, которая помогает сделать ваш код чище, если есть коды, которые не соблюдают установленные вами правила. Prettier поставляется со своей собственной конфигурацией по умолчанию, но здесь я также поделюсь своей конфигурацией и почему я изменил некоторые из ее конфигураций по умолчанию.
Теперь вы можете спросить, в чем разница между prettier и eslint? Eslint поможет показать вам, где может быть ошибка, а красивее поможет отформатировать ваш код, чтобы он был чище. Так что, если есть ошибка, prettier не вызовет вас, а если ваш код грязный, eslint не вызовет вас (ну, некоторые правила могут, но давайте остановимся на этом).
Для начала добавьте красивее и в свой проект:
yarn add --dev prettier yarn add --dev eslint-config-prettier
Второй модуль — это более красивое соединение с eslint. А затем добавьте это в свои файлы конфигурации:
// package.json
{
...
"scripts": {
...
"format:all": "prettier --write ."
}
}
// .eslintrc.json
{
"extends": [... , "prettier"],
...
}
Затем попробуйте запустить yarn format:all. Он должен попытаться отформатировать все файлы в вашем каталоге. Вы можете указать, какой каталог вы хотите использовать, изменив флаг --write. В этом сценарии «.» означает все в этом каталоге (кроме скрытых файлов). Попробуйте изменить . на src/* и убедитесь, что форматируется только исходная папка.
Теперь, когда ваша кодовая база велика, форматирование всех файлов может оказаться не лучшим решением. Если вы используете macOS, ubuntu или аналогичную систему Unix, вы можете добавить это в скрипты, чтобы форматировать только те файлы, которые вы изменили в git staging:
"format:staged": "prettier --write $(git diff --staged --name-only --diff-filter d | xargs)"
Чтобы изменить более красивую конфигурацию по умолчанию, создайте файл .prettierrc в базовом каталоге и добавьте эту конфигурацию:
{
"trailingComma": "none",
"tabWidth": 2,
"semi": true,
"singleQuote": false,
"printWidth": 80
}
Хорошо, это моя личная конфигурация, вы можете изменить ее по своему усмотрению. Подробнее о красивой конфигурации можно посмотреть здесь.
Также, как и .gitignore, вы можете создать .prettierignore, чтобы игнорировать некоторые файлы. Мой .prettierignore выглядит так:
.prettierignore public/ .gitignore .husky/
Хаски
Husky поможет вам установить хуки перед фиксацией. Хуки перед фиксацией означают, что каждый раз, когда вы выполняете git commit, будут выполняться некоторые действия, которые гарантируют, что ваш код готов к коммиту. В сочетании с предыдущими знаниями добавление линтинга и форматирования к хукам перед фиксацией поможет нам линтинговать и форматировать каждый раз, когда мы хотим добавить изменения, и это поможет, потому что останавливает фиксацию, если есть нарушение, которое не может быть автоматически исправлено eslint. С другой стороны, хаски также можно использовать для различных целей, таких как тестирование перед фиксацией, ведение журнала, тестирование сборок и т. д.
Чтобы установить его, запустите:
yarn add --dev husky # create a prepare script that will be run # when you run `yarn install` npm set-script prepare "husky install" yarn prepare # create the pre-commit hook, change yarn format:staged # to yarn format:all if it's not working npx husky add .husky/pre-commit "yarn format:staged\nyarn lint"
Теперь каждый раз, когда вы вносите изменения, он будет форматировать ваши файлы! Если каким-то образом ваш предварительный коммит не работает, измените содержимое файла .husky/pre-commit на это:
... // configurations, might be different on different machine yarn format:staged yarn lint
Вот и все! Все сделано. Я надеюсь, что это поможет вам, если вы новичок в nextjs/программировании с помощью npm. Будем признательны за любые предложения по улучшению этой статьи. Спасибо за прочтение!