Убирайте этот беспорядок импорта каждый раз, когда вы сохраняете, за 3 простых шага с помощью бесплатного расширения TypeScript Import Sorter.
Вы когда-нибудь задумывались о том, что нет правильного или фиксированного порядка для использования операторов импорта в ваших файлах JavaScript?
Стоит ли прикреплять модуль CSS-in-JS import вверху, или это то, куда идет ваш импорт React? А как насчет внутренних зависимостей?
Я уже давно использую замечательное расширение Headwind для VS Code для сортировки моих имен классов Tailwind CSS, поэтому я был рад найти что-то подобное для обработки моих операторов импорта в разрастающихся проектах TypeScript.
Он называется (подождите) TypeScript Import Sorter и разработан великим Майклом, которого, как мне кажется, носит одно имя. Спасибо, Майк.
Расширение сортирует импорт TypeScript в соответствии с предоставленной конфигурацией. Настройки по умолчанию соответствуют правилу сортировки-импорта ESLint - Майкл
Честно говоря, это поэзия для меня, и я сразу же все отсортировал в большом проекте TypeScript, который я разрабатывал.
Больше всего мне нравится то, как легко добавить новый компонент, который я реорганизовал в новый файл. Я начинаю набирать import и сразу же получаю подсказку VS Code TypeScript для моего компонента @/components/Button.
Но благодаря расширению TS Import Sorter есть более простой способ, и все, что вам нужно сделать, чтобы его использовать, - это сохранить файлы в VS Code.
Полезно знать: порядок сортировки упрямый
Имейте в виду, что это расширение VS Code самоуверенное, как и удивительный модуль форматирования кода Prettier, который, надеюсь, вы уже используете.
Мнение означает, что правила порядка сортировки были определены для вас с минимальными параметрами конфигурации или без них.
Я вижу в этом преимущество, потому что нет мира, в котором я хотел бы нести ответственность за выбор «правильного» и «оптимального» порядка импорта.
Позвольте Майклу сделать это за нас. Спасибо, Майк!
В любом случае, начать работу можно менее чем за 2 минуты. Вот как.
Как отсортировать импорт TypeScript за 3 простых шага
Шаг 1 - Установите расширение
Вы можете установить расширение либо с сайта VS Code Marketplace, либо с помощью ярлыка VS Code Ctrl+Shift+X или ⌘+Shift+X.
Шаг 2. Создайте import-sorter.json
Предполагая, что вы уже используете Prettier, вам нужно создать файл с именем import-sorter.json в корневом каталоге вашего проекта.
Я бы порекомендовал вам не читать подробные примечания к конфигурации, но они доступны, если они вам понадобятся.
Вот настройки Prettier по умолчанию для файла import-sorter.json:
Еще одна строка, которую я бы порекомендовал вам добавить, - это удаление точек с запятой, потому что кому они нужны?
Мое мнение о точках с запятой: «Если они не обязательны, отключите их». Если вы согласны, вы хотите добавить еще одну строку в import-sorter.json:
Если вы предпочитаете точку с запятой и собираетесь написать для меня ответ об автоматической вставке точки с запятой в JavaScript… пожалуйста, не делайте этого. Спасибо. 😄
Шаг 3- "…"
Шаг 4 - Прибыль! (Нажмите кнопку сохранения)
Ладно, шучу, осталось еще кое-что. Вам нужно изменить Настройки VS Code, установив importSorter.generalConfiguration.sortOnBeforeSave на true, что будет запускать сортировку перед каждой операцией сохранения.
Затем вы можете автоматически отсортировать импортированные файлы, просто нажав «Сохранить» (Ctrl+S или ⌘+S), что я и делаю. Это здорово, и я рекомендую это.
Для сортировки вручную вам нужно открыть палитру команд (Ctrl+Shift+P или ⌘+Shift+P) и найти команду Sort Imports.
Эту команду также можно использовать с любой настраиваемой привязкой клавиш (по умолчанию Ctrl+Shift+O или ⌘+Shift+O). Но почему бы просто не отформатировать при сохранении?
Но подождите, есть еще кое-что - глубокая сортировка импорта каталогов через проводник внутри VS Code
Следует упомянуть еще одну интересную функцию - вы можете сортировать файлы с помощью проводника в VS Code (Ctrl+Shift+E или ⌘+Shift+E), щелкнув правой кнопкой мыши каталог, чтобы рекурсивно отсортировать все файлы в нем.
Просто имейте в виду, что эта глубокая операция (то есть рекурсивная) сортирует и перезапишет ваши исходные файлы без каких-либо запросов, поэтому обязательно сделайте резервную копию заранее с помощью быстрой фиксации Git.
Эта функция очень удобна для быстрой сортировки всех ваших файлов без необходимости вручную открывать каждый из них. Затем вы можете сделать одну фиксацию Git со всеми изменениями сразу.
Отсортированный импорт TS: примеры кода до и после
Итак, что происходит, когда вы фактически запускаете этот сортировщик импорта для файла TypeScript в VS Code? Взглянем.
Раньше я не сортировал файл. Неизбежно, мои недавно разработанные локальные компоненты оказывались внизу в произвольном порядке.
После нажатия кнопки сохранения мой импорт упорядочен по алфавиту с красивой пустой строкой между моими зависимостями npm и моей локальной библиотекой компонентов.
Вывод: вам следует сортировать свой импорт
Самое приятное в этом изменении, если вы работаете в команде - все добавляют импорт в одном порядке, так что ваши PR будут проще, чем когда-либо.
Но даже если вы этого не сделаете, я все равно рекомендую вам попробовать это (и Headwind, что является той же идеей для Tailwind CSS).
Это расширение избавило меня от навязчивой потребности расположить по алфавиту и объединить операторы импорта в верхней части моих .tsx файлов.
И последнее замечание: это расширение работает только с TypeScript, что может стать для вас препятствием. Эй, я понял.
Конечно, вы всегда можете создать проект TypeScript и использовать все файлы JavaScript, если вы включите флаг allowJS, но это не даст вам тех же преимуществ Intellisense, что и фактическое переключение на TypeScript.
Альтернативой для проектов JavaScript, которые вы не хотите преобразовывать в TypeScript, может быть правило сортировки-импорта ESLint.
Вы можете запустить это с помощью npx eslint --fix . и получить аналогичные преимущества сортировки, но это не так удобно, как расширение VS Code.
Вы также можете попробовать это альтернативное расширение сортировщика импорта, JS / TS Import / Export Sorter, созданное человеком с двумя именами: Zhao DAI.
Спасибо, Чжао. И спасибо, что прочитали.
Удачного кодирования! 👩💻🔤💻🌀📈
Больше контента на plainenglish.io
