Настройка NextJS с помощью typescript, EsLint, prettier и husky

Это небольшой блог о настройке проекта с помощью 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'

Если все прошло хорошо, вы должны быть в состоянии зафиксировать изменения в вашем файле