Это небольшой блог о настройке проекта с помощью NextJS, EsLint, prettier и husky.
-
Next.js — это фреймворк React, который предоставляет вам строительные блоки для создания веб-приложений.
-
EsLint — это подключаемый и настраиваемый инструмент для выявления паттернов в JavaScript и создания отчетов о них. Поддерживайте качество кода с легкостью.
-
Prettier — это формирователь кода, который поддерживает множество различных языков программирования, таких как JavaScript. JSON. JSX.
-
Husky улучшает ваши git-коммиты и многое другое 🐶 woof!
01 Настройка Nextjs с помощью typescript
npx create-next-app [project-name] --typescript
это настроит проект nextjs для вас
02 Настройка Eslint в проекте
eslint поставляется предварительно настроенным через npx create-next-app
нам не нужно устанавливать eslint просто выполните следующую команду в терминале
npm init @eslint/config
которая проведет вас через ряд настроек конфигурации
a. Как вы хотите использовать ESLint?
- Только для проверки синтаксиса
- Для проверки синтаксиса и поиска проблем
- Для проверки синтаксиса, поиска проблем и соблюдения стиля кода
Для проверки синтаксиса, поиска проблем и соблюдения стиля кода
поскольку мы не только хотим найти проблемы в нашем коде, мы хотим применить общий стиль кода (Airbnb)
b. Какой тип модулей используется в вашем проекте?
- Модули JavaScript (импорт/экспорт)
- CommonJS (require/exports)
- Ничего из перечисленного
Модули JavaScript (импорт/экспорт)
-
Обратите внимание на модули JavaScript (импорт/экспорт): Формат модулей ES является официальным стандартным форматом для упаковки кода JavaScript для повторного использования, и большинство современных веб-браузеров нативно поддерживают модули.
-
Примечание Node.js, однако, по умолчанию поддерживает формат модулей CommonJS. Модули CommonJS загружаются с помощью require(), а переменные и функции экспортируются из модуля CommonJS с помощью module.exports.
c. Какой фреймворк используется в вашем проекте?
- React
- Vue.js
- Ни один из них
React
d. Использует ли ваш проект TypeScript?
- да/нет
да
e. Где выполняется ваш код?
- Браузер
- Узел
Браузер
f. Как бы вы хотели определить стиль для своего проекта?
- Использовать популярное руководство по стилю
- Ответить на вопросы о своем стиле
Использовать популярное руководство по стилю
Airbnb: https://github.com/airbnb/javascript
Поскольку Airbnb является самым популярным руководством по стилю и отраслевым стандартом в большинстве компаний.
g. В каком формате вы хотите видеть ваш файл конфигурации?
- JavaScript
- YAML
- JSON
JSON
Мы выберем JSON, поскольку он предпочтительнее других форматов файлов
h. Хотите ли вы установить их сейчас?
- Нет / Да
Да
i. Какой менеджер пакетов вы хотите использовать?
- npm
- yarn
- pnpm
npm
03 Теперь давайте установим prettier
Сначала установим необходимые пакеты для настройки prettier в нашем проекте
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev
Затем перейдите в файл .eslintrc.json
и добавьте следующие конфигурации в свойства "extends"
и "plugins"
.
ПРИМЕЧАНИЕ Значение свойства extends — это либо строка, определяющая конфигурацию (путь к файлу конфигурации, имя разделяемой конфигурации, eslint: recommended или eslint: all), либо массив строк, где каждая дополнительная конфигурация расширяет предыдущие конфигурации.
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:react/recommended",
"next/core-web-vitals",
"airbnb",
"plugin:prettier/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": ["react", "@typescript-eslint", "prettier"],
"rules": {}
}
- Теперь давайте создадим локальный файл конфигурации более красивого вида
touch .prettierrc
- А затем добавим следующую конфигурацию в файл
.prettierrc
.
{
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": false,
"trailingComma": "es5",
"printWidth": 80
}
Установите prettier в ваш локальный редактор кода, в моем случае я использую vscode.
Затем перейдите в настройки vscode и найдитеDefault Formatter
измените его наPrettier-Code formatter
.После этого убедитесь, что
format on save
включен в настройках vscode, это отформатирует ваш код каждый раз, когда вы сохраняете файл.
04. Теперь давайте настроим правила eslint по своему вкусу
Сначала установим пакет для конфигурации скриптов Airbnb
npm install eslint-config-airbnb-typescript --save-dev
- Затем добавим конфигурации в файл
.eslintrc.json
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:react/recommended",
"next/core-web-vitals",
"airbnb",
"airbnb-typescript",
"plugin:prettier/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module",
"project": "./tsconfig.json"
},
"plugins": ["react", "@typescript-eslint", "prettier"],
"rules": {
// suppress errors for missing 'import React' in files
"react/react-in-jsx-scope": ["off"],
// gives warning if spread props getting passed to component ex. (...props)
"react/jsx-props-no-spreading": ["warn"],
// suppress errors for Function component is not a function declaration turning off allows us to use arrow functions
"react/function-component-definition": ["off"]
}
}
- Теперь добавьте скрипты в наш файл
package.json
{
"name": "final",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"check-format": "prettier --check .",
"check-lint": "eslint . --ext ts --ext tsx --ext js",
"check-types": "tsc --pretty --noEmit",
"format": "prettier --write ."
},
"dependencies": {
"next": "12.1.6",
"react": "18.1.0",
"react-dom": "18.1.0"
},
"devDependencies": {
"@types/node": "17.0.40",
"@types/react": "18.0.12",
"@types/react-dom": "18.0.5",
"@typescript-eslint/eslint-plugin": "^5.27.0",
"@typescript-eslint/parser": "^5.27.0",
"eslint": "^8.17.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-config-next": "12.1.6",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.30.0",
"eslint-plugin-react-hooks": "^4.5.0",
"prettier": "^2.6.2",
"typescript": "4.7.3"
}
}
- Теперь добавим файл
.eslintignore
и.prettierignore
в корень нашего проекта
touch .eslintignore .prettierignore
- Затем игнорируем следующие файлы и папки в обоих файлах
/node_modules
next.config.js
.next
- Теперь запустите скрипты, чтобы проверить, не вылетает ли какая-нибудь ошибка
npm run format
npm run check-format && npm run check-lint
Если все прошло нормально, то ошибки не должно быть.
05. Теперь давайте установим husky в наш проект.
Сначала выполните следующую команду в терминале
npx husky-init && npm install
Это должно настроить хаски в нашем проекте
- Теперь добавьте некоторые настройки в наш файл
pre-commit
в папке.husky
.
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
echo '🏗️👷 Styling, testing and building your project before committing'
# Check Prettier standards
npm run check-format ||
(
echo '🤢🤮🤢🤮
Yaaaaaccccccckkkkkkkkkk 🤢🤮🤢🤮
Prettier Check Failed. Please Run npm run format, add changes and try commit again.';
false;
)
# Check ESLint Standards
npm run check-lint ||
(
echo '😤🏀👋😤 Bla Bla Bla Bla 😤🏀👋😤
ESLint Check Failed. Make the required changes listed above, add changes and try to commit again.'
false;
)
# Check tsconfig standards
npm run check-types ||
(
echo '🤡😂❌🤡 Failed to check the types. 🤡😂❌🤡
Please Make the changes required above.'
false;
)
# If everything passes... Now we can commit
echo '🤔🤔🤔🤔... Alright.... Code looks good to me... Trying to build now. 🤔🤔🤔🤔'
npm run build ||
(
echo '❌👷🔨❌ Send Help Build has failed ❌👷🔨❌
Next build failed: View the errors above to see why.
'
false;
)
# If everything passes... Now we can commit
echo '✅✅✅✅ Yo you got this... I am committing this now. ✅✅✅✅'
- Теперь попробуйте выполнить фиксацию, при этом в нашем проекте должны автоматически выполняться следующие проверки перед фиксацией
git add .
git commit -m 'test'
Если все прошло хорошо, вы должны быть в состоянии зафиксировать изменения в вашем файле