​​Контроль импортов с помощью import/no-restricted-paths

Когда мы задумываемся о структуре проекта — то мы подразумеваем некоторое разделение на области/модули, где каждый модуль имеет свою зону ответственности. Помимо этого, зачастую, один модуль не должен ничего знать о другом, иными словами, ему запрещается импортировать что-либо из другого модуля.

Пример 1️⃣ Допустим у нас есть:

• ui-kit — папка с базовыми компонентами
• rest-api — папка с сервисами для коммуникации с сервером Очевидно, что содержимое rest-api не должно ничего знать о компонентах.

Пример 2️⃣ Теперь представим, что у нас есть 2 папки:

• components — базовые компоненты, кнопки, инпуты, …
• domains — реализация фичей, например форма логина В этом случае содержимое domains может использовать любые компоненты из components, но не наоборот. Если мы хотим использовать компонент из domains в components, правильнее будет перенести его также в components.

Решение ✅ Eslint предоставляет мощное правило import/no-restricted-paths, которое поможет описать зависимости между папками/модулями и запретить нежелательные импорты, описанные в примерах.

Если вы используете CRA вам достаточно добавить следующий код в package.json в поле eslintConfig. В примере ниже мы запрещаем любые импорты из папки domains в папку components из примера 2.

"rules": {
  "import/no-restricted-paths": [
    "error",
    {
      "zones": [
        {
          "target": "./src/components",
          "from": "./src/domains"
        }
      ]
    }
  ]
},
"settings": {
  "import/resolver": {
    "node": {
      "extensions": [
        ".js",
        ".jsx"
      ]
    }
  }
} 

Если вы используете TypeScript, дополнительно нужно установить пакет eslint-import-resolver-typescript и изменить поле settings следующим образом:

"settings": {
    "import/resolver": {
      "typescript": {
        "project": "./tsconfig.json"
      }
    }
  } 

Подробнее можено почитать в статье Как правила линтинга влияют на архитектуру приложения