⏺️Настройки

⚡1) Prettier

Prettier - это инструмент автоматического форматирования кода. Он широко используется в разработке программного обеспечения для обеспечения согласованности и единообразия стиля кодирования. Prettier может работать с различными языками программирования, включая JavaScript, TypeScript, CSS, HTML, JSON и другие.

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

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

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

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

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

yarn add --dev --exact prettier

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

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

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

.prettierrc.json

{
  "printWidth": 120
}

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

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

yarn prettier . --write

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

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

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

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

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

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

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

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "common/*": ["common/*"]
    }
    "target": "es5",
   /...
  ]
}

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

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

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