> For the complete documentation index, see [llms.txt](https://safronman.gitbook.io/rtk-1-nsdfzx/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://safronman.gitbook.io/rtk-1-nsdfzx/nastroiki.md).

# Настройки

### ⚡**1)  Prettier**

{% hint style="info" %}
[**Prettier** ](https://prettier.io/)- это инструмент автоматического форматирования кода. Он широко используется в разработке программного обеспечения для обеспечения согласованности и единообразия стиля кодирования. Prettier может работать с различными языками программирования, включая JavaScript, TypeScript, CSS, HTML, JSON и другие.

Основная цель Prettier заключается в автоматическом приведении кода к определенному стилю форматирования, устанавливаемому по умолчанию или настраиваемому пользователем. Он автоматически применяет правила форматирования, такие как отступы, расстановка пробелов, размещение фигурных скобок, пунктуации и т.д., чтобы сделать код более читабельным и последовательным.

Prettier может использоваться независимо от редактора кода и может быть интегрирован в рабочий процесс разработчика через плагины или конфигурационные файлы. Это позволяет автоматически форматировать код при сохранении файла или вручную вызывать Prettier для форматирования всего проекта или отдельных файлов.

Использование Prettier помогает снизить споры о стиле кодирования в команде разработчиков и облегчает сотрудничество, так как все члены команды могут придерживаться одного стиля форматирования без необходимости ручного редактирования кода.
{% endhint %}

\
Внедрим Prettier в наше приложение

* устанавливаем пакет

```
yarn add --dev --exact prettier
```

* создаем .prettierrc.json

```
node --eval "fs.writeFileSync('.prettierrc','{}\n')"
```

* прописываем там свойства, которые хотим изменить. Мне нравиться printWidth 120, но это необязательное условие, можете установить 100. По умолчанию 80

{% code title=".prettierrc.json" overflow="wrap" lineNumbers="true" %}

```json
{
  "printWidth": 120
}
```

{% endcode %}

* сделаем настройку в Webstorm

<figure><img src="/files/BP5Mm0O987GMGGeSUvw7" alt=""><figcaption></figcaption></figure>

* если нам необходимо зарефакторить весь проект, то пишем следующее

```
yarn prettier . --write
```

###

### ⚡**2)**  Настройка импортов

\
Зайдите например в компонент **`Task.tsx`** и обратите внимание на путь

<figure><img src="/files/RL6gPKth60aSpmE5G2PW" alt=""><figcaption></figcaption></figure>

Чтобы импортировать компонент **`EditableSpan`** нам нужно выпрыгнуть на 4 уровня вложенности и потом найти нужный компонент. Ну значит все нормально тогда.

А если у нас будет большая вложенность, то путь будет примерно таким&#x20;

```typescript
import { useAppSelector} from '../../../../../../../../../../../../../app/hooks';
```

И это смотрится очень  плохо. А как иначе?  🤔\
\
Чтобы решить эту проблему, необходимо:

⚡1) добавить настройку в **tsconfig.json**&#x20;

<pre class="language-json" data-title="tsconfig.json" data-overflow="wrap" data-line-numbers><code class="lang-json">{
  "compilerOptions": {
<strong>    "baseUrl": "src",
</strong><strong>    "paths": {
</strong><strong>      "common/*": ["common/*"]
</strong><strong>    }
</strong>    "target": "es5",
   /...
  ]
}
</code></pre>

⚡2) добавить настройку импортов в Webstorm **\[Editor / Code Style / Typescript / imports]**

<figure><img src="/files/BUDmrQkrr29MhQ8J7sli" alt=""><figcaption></figcaption></figure>

После данной настройки Webstorm будет подсказывать какие пути можно сделать короче и делать их относительно папки src

<figure><img src="/files/Z21UtWGDp0FAEAfgX6dM" alt=""><figcaption></figcaption></figure>

По итогу получаем следующий результат 🚀

<figure><img src="/files/1aTqrT5rjBGeyY5eQDYT" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://safronman.gitbook.io/rtk-1-nsdfzx/nastroiki.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.