> For the complete documentation index, see [llms.txt](https://gpeterhand.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gpeterhand.gitbook.io/react/instrumenty/prettier.md).

# Prettier

Форматирование кода

**Источники**

* [Автоматическое форматирование кода (JavaScript) с помощью Prettier и ESLint](https://anvilabs.co/blog/auto-formatting-javascript-with-prettier-and-eslint/) \[13 февраля 2017]

Prettier может работать как самостоятельно, так и в связке с ESLint. Мы используем второй вариант.

Устанавливаем [Prettier](https://github.com/prettier/prettier) , конфигурацию и плагин для ESLint

> yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

Вносим изменения в файл **.eslintrc**

***Примечание:***

* *singleQuote - использовать одинарные кавычки*
* *semi - не нужны точки с запятой в конце строк (повторяет настройку ESLint)*

```javascript
{
  "plugins": [
    ...
    "prettier"
  ],
  "rules": {
    ...
    "prettier/prettier": [2, {
      "singleQuote": true,
      "semi": false
    }]
  },
  "extends": [
    ...
    "plugin:prettier/recommended"
  ]
}
```

Запускаем компиляцию сборки:

> yarn dev

Весь код автоматически отформатируется

***Примечание:***

*Можно настроить запуск Prettier различными способами, например запускать только при коммите в Git*