У Eslint и Prettier есть плагины для этого.

Предисловие

Недавно я столкнулся с очень странной ошибкой стиля. В проекте SPA, если сначала посетить страницу A, а затем страницу B, возникнет проблема со стилем страницы. Если вы посещаете страницу B напрямую, это работает хорошо. Исправление этой ошибки заняло у меня много времени, но причина ошибки очень проста. И страница A, и страница B импортируют одни и те же компоненты и переопределяют стиль, но их порядок различается, что приводит к перезаписи стилей. Есть демо-код:

// Page A
import "./styleA.css"; // override componentA and componentB style
import CompA from 'component/a';
import CompB from 'component/b';
// Page B
import CompA from 'component/a';
import CompB from 'component/b';
import "./styleB.css"; // override componentA and componentB style

Пользовательский стиль pageA имеет более высокий приоритет, чем пользовательский стиль pageB.

У них может быть много способов исправить ошибку, например, использовать css с ограниченной областью действия, пространство имен и т. д. Но я обнаружил, что самый простой способ — отсортировать импорт.

В этой статье мы можем изучить два способа сортировки импорта:

  1. красивее
  2. Эслинт

Я использую VS Code для разработки проекта реагирования. Я установил плагины prettier и eslint VS Code, которые не будут устанавливаться отдельно в проекте.

Сортировка импорта с Prettier

Prettier не поддерживает эту функцию, есть классный плагин, который можно использовать для сортировки импорта — GitHub — trivago/prettier-plugin-sort-imports.

Во-первых, давайте установим его:

npm install --save-dev @trivago/prettier-plugin-sort-imports
// or use yarn
yarn add --dev @trivago/prettier-plugin-sort-imports

Затем мы начинаем настраивать наши правила для этого плагина. Плагин очень гибкий и имеет несколько API, которые помогают нам настраивать порядок.

В моем проекте я использую importOrder для настройки порядка импорта и importOrderSeparation для разделения разных частей:

// .prettierrc.json
{
  "importOrder": ["^react(.*)", "antd/(.*)", "<THIRD_PARTY_MODULES>", "@/(.*)", "^[./]"],
  "importOrderSeparation": true
}

Импорт будет в следующем порядке:

  1. реагировать, реагировать-дом, реагировать-маршрутизатор
  2. antd (библиотека пользовательского интерфейса)
  3. пакет/сторонний импорт, например lodash.
  4. импорт псевдонима проекта
  5. относительный импорт

Действие этих правил будет таким:

При сохранении файл будет автоматически использовать более красивое форматирование, поэтому импорт будет автоматически отсортирован.

Сортировка импорта с помощью Eslint

В Eslint есть множество плагинов для импорта сортировки, например eslint-plugin-simple-import-sort, eslint-plugin-import, sort-imports. Я предпочитаю использовать eslint-plugin-simple-import-sort, который проще и является одним из вариантов настройки группы. В следующем содержании мы узнаем, как его использовать.

Во-первых, давайте установим иждивенца в проекте:

npm install --save-dev eslint-plugin-simple-import-sort
// or use yarn
yarn add eslint-plugin-simple-import-sort -D

Затем мы начинаем настраивать наши правила для этого плагина:

// .eslintrc.js
module.exports = {
  //...
  plugin: ["simple-import-sort"],
  rules: {
    "simple-import-sort/imports": "error",
    //if we want to group imports can use below.
    "simple-import-sort/imports": ["error", {
      groups: [
        ["^react"],
        ["^antd"],
        ["^@?\\w"],
        ["@/(.*)"],
        ["^[./]"]
      ]
    }] 
  }
}

Это сделает тот же эффект, что и красивее, за исключением пробела-разделителя между строками:

Заключение

В этой статье мы узнаем, как использовать prettier of eslint для сортировки импорта. Рекомендуется использовать более красивый способ, поскольку более красивый будет автоматически форматировать стиль кода, такой как полу, пробел и т. д. Оба эти способа могут помочь нам написать более чистый, читаемый и надежный код, особенно полезный для переопределения правил CSS.

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

Повышение уровня кодирования

Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:

  • 👏 Хлопайте за историю и подписывайтесь на автора 👉
  • 📰 Смотрите больше контента в публикации Level Up Coding
  • 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"

🚀👉 Размещение таких разработчиков, как вы, в топовых стартапах и технологических компаниях