Качество и красота кода

20 марта 2021 г. • ☕️ 5 мин.

Код, который мы пишем, должен не только корректно решать задачу, но так же быть удобным для чтения и понимания.

Удобный для чтения код - это правильно отформатированный код, красиво расставленные пробелы, запятые и отступы, а так же консистентный стиль по всем проекту.

Понятный для чтения код - это код в котором минимальное количество неявных моментов.

Для улучшения этих параметров, можно использовать различные инструменты, которые помогают их частично автоматизировать.

eslint

Помогает найти и исправить проблемы в коде JavaScript.

husky

Автоматически запускает набор команд при git commit.

Как все это связать вместе?

Проект с React

Создадим проект с помощью create-react-app.

npx create-react-app --use-npm next-big-thing && cd next-big-thing

Установим необходимые зависимости.

npm i -D eslint-config-standard eslint-config-standard-react eslint-config-prettier prettier husky lint-staged

Добавим набор готовых eslint правил - standard и расширение для интеграции со стилем prettier. Для этого создадим файл с конфигурацией .eslintrc и удалим ключ eslintConfig из файла package.json.

{
  "root": true,
  "parser": "babel-eslint",
  "extends": [
    "react-app", // расширяем конфигурацию create-react-app
    "standard",  // добавляем конфигруацию standard
    "standard-react", // добавляем поддержку react для standard
    "prettier" // добавляем поддержку prettier
  ],
  "env": {
    "es2021": true,
    "browser": true,
    "jest": true
  },
  "rules": {
    "react/react-in-jsx-scope": "off"
  }
}

Добавим скрипты для запуска eslint и prettier в package.json.

{
  // ...
  "scripts": {
    // ...
    "lint": "eslint \"src/**/*.js\"",
    "format": "prettier --write \"src/**/*.{js,json,css,scss}\""
    // ...
  }
  // ...
}

Теперь при запуске npm run lint можно увидеть рекомендации от eslint по исправлению проблем, если они есть, а при запуске npm run format код будет автоматически отформатирован.

Для изменения конфигурации prettier, можно добавить файл .prettierrc.

{
  "semi": false,
  "trailingComma": "all"
}

Так же можно добавить файл .prettierignore, для указания файлов которые не нужно форматировать.

Следующий шаг, убедиться, что код автоматически форматируется prettier и проходит проверки eslint при использовании git commit.

Инициализируем husky.

npx husky init

Эта команда модифицирует файл package.json и создаст pre-commit hook для git в файле next-big-thing/.husky/_/pre-commit

На данный момент, eslint и prettier, обрабатывают все файлы. Мы можем сделать так, чтобы при git commit, обрабатывались только измененные файлы.

Создадим файл с конфигурацией .lintstagedrc.

{
  "*.js": [
    "prettier --write",
    "eslint",
    "npm test -- --watchAll=false --findRelatedTests"
  ],
  "*.{json,css,scss}": [
    "prettier --write"
  ]
}

Модифицируем git hook который был создан husky.

next-big-thing/.husky/_/pre-commit

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no lint-staged

Теперь при git commit обрабатываются только измененные файлы.

Проект Node.js

Создадим проект.

mkdir -p next-big-thing && cd next-big-thing

Инициализируем npm.

npm init -y

Установим необходимые зависимости.

npm i -D jest eslint babel-eslint eslint-config-standard eslint-config-prettier prettier husky lint-staged

Добавим набор готовых eslint правил - standard и расширение для интеграции со стилем prettier. Для этого создадим файл с конфигурацией .eslintrc.

{
  "root": true,
  "parser": "babel-eslint",
  "extends": [
    "standard",  // добавляем конфигруацию standard
    "prettier" // добавляем поддержку prettier
  ],
  "env": {
    "jest": true,
    "node": true
  }
}