У 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 с ограниченной областью действия, пространство имен и т. д. Но я обнаружил, что самый простой способ — отсортировать импорт.
В этой статье мы можем изучить два способа сортировки импорта:
- красивее
- Эслинт
Я использую 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 }
Импорт будет в следующем порядке:
- реагировать, реагировать-дом, реагировать-маршрутизатор
- antd (библиотека пользовательского интерфейса)
- пакет/сторонний импорт, например lodash.
- импорт псевдонима проекта
- относительный импорт
Действие этих правил будет таким:
При сохранении файл будет автоматически использовать более красивое форматирование, поэтому импорт будет автоматически отсортирован.
Сортировка импорта с помощью 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 | ЛинкедИн | "Новостная рассылка"
🚀👉 Размещение таких разработчиков, как вы, в топовых стартапах и технологических компаниях