ESLint, TS, Prettier, Husky, VSCode

Туториал по базовой настройке окружения для React-проекта на TypeScript. Данную сборку можно расширять дополнительными правилами и плагинами по желанию.

Настройка для VS Code

Чтобы всё работало в интерфейсе текстового редактора, необходимо установить расширения Prettier и ESLint, а также в настройках редактора активировать форматирование кода после сохранения. Иногда получается, что после установки плагины начинают работать не сразу, поэтому лучше сразу перезапустить рабочее окружение при помощи F1 + >Reload Window.

Если Prettier не захочет "причесывать" { .ts, .tsx } файлы, то необходимо будет в настройках редактора (settings.json) дописать доп. правила форматирования:

"[html]": {
   "editor.defaultFormatter": "vscode.html-language-features"
 },
 "[javascript]": {
   "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "[scss]": {
   "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "[css]": {
   "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 "[typescript]": { 
   "editor.defaultFormatter": "esbenp.prettier-vscode" 
 },
 "[typescriptreact]": { 
   "editor.defaultFormatter": "esbenp.prettier-vscode" 
 },

Установка в проект Prettier

Prettier - инструмент для форматирования кода, его основная цель - поддерживать чистоту и структурированность кода, делая его более читаемым и поддерживаемым. Подробнее про него писал тут. Задача установить, добавить в корень проекта два файла - один с настройками (prettierrc.json), другой с игнорируемыми директориями и файлами (prettierignore). Команда для установки prettier ниже:

yarn add --dev --exact prettier

Установка в проект ESLint

ESLint - инструмент статического анализа кода для выявления проблемных шаблонов, обнаруженных в коде JavaScript (TypeScript). Он указывает на потенциально опасные конструкции и ошибки в коде, а также может сообщить об устаревших участках кода и неиспользованных переменных.

ESLint: настраиваемый линтер для проверки кода на предмет проблем и использования при его написании плохих практик. Prettier: настраиваемый форматировщик кода, позволяющий вам и вашей команде следовать единым правилам оформления кода.

Настройка ESLint будет более интересной, так как если его правильно не связать с prettier, то они будут перетирать правила друг друга и конфликтовать. Так что установим eslint, а затем запустим инициализацию его конфига, по итогу тоже получим 2 файла .eslintignore и .eslintrc.json:

 yarn add --dev eslint 
 npx eslint --init

 Далее выбираем ответы на вопросы: 
 - To check syntax and find problems
 - JavaScript modules (import/export)
 - React
 - Does your project use TypeScript? ‣  Yes
 - Browser
 - JSON
 На вопрос про установки других пакетов отвечаем "Yes"
 Would you like to install them now? ‣  Yes

Установка и подключение дополнительных плагинов ESLint

Установим дополнительно два плагина для линтера. Первый убирает ошибку импорта React в начале файла, второй для поддержки хуков React:

  yarn add --dev eslint-plugin-react eslint-plugin-react-hooks

Установим плагины для привязки Prettier и Eslint:

   yarn add --dev eslint-config-prettier eslint-plugin-prettier

Основные пакеты

@typescript-eslint/parser - анализатор ESLint, который позволяет анализировать исходный код TS
eslint-plugin-react - обширный список правил для работы с React, свои нужно прописывать в rules
eslint-plugin-react-hooks - правила для работы с хуками
eslint-config-prettier - отключает правила, которые могут конфликтовать с prettier
eslint-plugin-prettier - отображает ошибки связанные с правилами prettier

После установки плагинов нужно добавить в файл настроек .eslintrc.json установленные расширения. В итоге файл конфига ESLint`a выглядит так (у нас проект на TS ):

{
  "env": {
  "browser": true,
  "es2021": true
 },
"extends": [
  "eslint:recommended",
  "plugin:@typescript-eslint/recommended",
  "plugin:react/recommended",
  "plugin:react/jsx-runtime",
  "plugin:react-hooks/recommended",
  "plugin:prettier/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
},
"settings": {
  "react": {
    "version": "detect"
  }
},
"plugins": ["@typescript-eslint", "react"],
"rules": {
    "no-var": "error",
    "no-console": "warn",
    "max-len": ["warn", 100],
    "prefer-const": "warn",
    "react/prop-types": "off",
    "react/react-in-jsx-scope": "off"
  }
}

Добавляем Husky + Lint-stages

Husky - инструмент, который позволяет работать с хуками Git.

Git хуки - позволяют запускать кастомные скрипты перед вызовом git команд. Это сценарии, которые можно настроить для запуска при определенных событиях жизненного цикла Git. В нашем случае мы будем использовать Husky для запуска ESlint и Prettier перед фиксацией изменений, чтобы никто не смог выполнить коммит, если его код не соответствует нашим правилам. В этом поможет инструмент под названием lint-staged.

Установка Husky и lint-staged:

yarn add --dev husky lint-staged
инсталируем хаски
npx husky init
node --eval "fs.writeFileSync('.husky/pre-commit','npx lint-staged\n')"

Важно! последнюю команду нужно выполнять один раз при установке проекта локально на новую машину. Теперь перед каждым коммитом будет вызываться утилита lint-staged (pre-commit) и запускать сценарии, которые нужно описать в файле package.json:

"scripts": {
    "start": "vite --open",
    "build": "env-cmd -f .env.development vite build",
    "lint": "eslint ./src --ext js,jsx,ts,tsx --report-unused-disable-directives --max-warnings 0",
    "lint:fix": "eslint ./src --ext js,jsx,ts,tsx --fix",
    "prettier": "prettier --write './**/*.{js,jsx,ts,tsx,scss,css,md,json}' --config ./.prettierrc",
    "prepare": "husky init"
},
"lint-staged": {
    "**/*": "prettier --write --ignore-unknown",
    "*.{js,jsx,ts,tsx}": [
        "prettier --write",
        "eslint --no-ignore --max-warnings=0 --fix"
    ]
},

Ссылки на сборки

Без Typescript: Мой гитхаб - github.com
C TypeScript: Гитлаб - github.com

Михаил Непомнящий - youtube.com

Easy IT - youtube.com

Программируем лучше с ESLint, Prettier и TypeScript - tproger.ru

Настройка в React/TypeScript приложении ESLint, Prettier и Husky - ostart.github.io

Prettier, ESLint, Husky, Lint-Staged - habr.com

Подготовка окружения - tproger.ru

#react #vscode