Автор оригинала: FreeCodeCamp Community Member.
Чтобы стать лучшим разработчиком реагирования, вам не всегда нужно выучить совершенно новый сложный навык. Вы можете мгновенно улучшить свой код React Code через несколько минут, используя мощные функции, которые могут сделать ваши инструменты разработки.
Некоторые из самых больших улучшений вашей работы в качестве разработчика реагирования занимают наименьшее количество времени для изучения. Сегодня прилагайте усилия, чтобы применить эти советы, и я гарантирую, что вы сэкономите много часов утомительной работы в своем ежедневном кодировании, плюс вам понравится кодирование с реагированием намного больше.
Вот пять ярлыков, которые вы можете воспользоваться преимуществами прямо сейчас, чтобы стать более продуктивным радиоактивным кодесом.
1. Надоело писать закрывающие метки для каждого элемента JSX? Используйте Emmet.
Как разработчик реагирования, вы пишете много элементов JSX, большинство из которых состоят из открытия и закрытия тега.
Если у вас нет настройки Emmet с React, вы должны написать оба этих тега вручную для каждого элемента. Гораздо лучший подход – использовать инструмент под названием Эммет, который автоматически создает закрытие тега всякий раз, когда вы создаете открытие.
Для настройки EMMET с реагированием на VSCode:
- Перейти к Код (В верхней части экрана), то Предпочтения Тогда Настройки В VSCode.
- В вариантах слева выберите Расширения Тогда Emmet.
- Прокрутите до Включают языки Раздел, добавьте в ввод элемента, JavaScript и в введении значения, javascriptreaact и ударил Добавить элемент
И так же, как это, Emmet ускорил ваше кодирование на 100%:
2. Надоело форматировать свой код вручную? Используйте красивее.
Можете ли вы подсчитать количество раз, когда ваш код не был выровнен, вероятно, вы пытались отрегулировать расстояние? Я не хочу даже думать о том, сколько времени я потратил форматирование своего собственного кода!
Если вы все еще пытаетесь отформатировать свой код вручную, вам нужно Красивее .
Красивее удачно названо: он превращает ваш неправильный код в намного красивее, отформатированную версию.
Reettier доступно в качестве Devdependency для индивидуальных проектов JavaScript или вы можете использовать его во всех ваших проектах с более широким расширением VSCode. Преимущество использования расширения VSCode состоит в том, что вы можете автоматически отформатировать код JavaScript каждый раз, когда вы ударили сохранение.
Вот как настроить красивее для использования всех ваших проектов на VSCode:
- Перейти к Код Тогда Предпочтения Тогда Расширения
- Поиск Прекраснее в вводе поиска и нажмите Enter (это должно быть первым, кто подходит)
- Выберите расширение, затем нажмите Установить (и, возможно, перезагрузить применить расширение)
- Перейти к Код Тогда Предпочтения Тогда Настройки
- Поиск Формат на сохранении и выберите флажок рядом с опцией «Сохранить»
Теперь весь код, который вы пишете, будут отформатированы идеально, каждый раз, когда вы сохраняете:
3. Вы пишете каждый компонент, который вы делаете? Используйте React Snippets.
Создание многих вещей в реакции и в проектах JavaScript в целом требует много котельной. Каждый раз, когда вы пишете компонент, вы должны выбрать каждую его часть – Import React, создайте функцию и экспортируйте его из вашего файла.
Вы устали от того, чтобы сделать это? Мы все делаем. Вот почему фрагменты для реагирования существуют.
Чтобы избежать всей дополнительной работы написания одного и того же кода снова и снова, используйте React Snippets Отказ Фрагменты позволяют использовать ярлыки клавиатуры, чтобы мгновенно написать каждую часть вашего React Code вместо того, чтобы набрать его вручную.
Например, вместо написания Импорт реагирует от «Реагистрация»
Вы можете просто написать IMR
И нажмите клавишу Tab, чтобы мгновенно создать то же самое. Фрагменты – огромное время.
Вот как использовать фрагменты RACT на VSCode:
- Перейти к Код Тогда Настройки Тогда Расширения
- Поиск React Snippets Отказ Есть много хороших расширений фрагмента на выбор.
- Когда у вас установлено расширение фрагмента, посмотрите на ярлыки доступны и напишите лучшие из них.
- Когда вы вводите ярлык, дождитесь появления предложений в редакторе кода, а затем нажмите Вкладка (Вы можете стрелять через список, если вы хотите другой)
Вы будете шокированы, как быстро вы можете сделать ваши компоненты сейчас:
4. Вы импортируете все свои компоненты вручную? Вместо этого используйте автоматический импорт.
Одним из самых утомительных вещей, которые необходимо сделать в создании ACT-приложений, является импортирование пакетов и компонентов из других файлов.
Это очень повторяется и может принять значительное количество энергии для импорта каждой вещи вручную (плюс правильно, когда вы делаете опечатки).
Вместо того, чтобы помнить, найти и вручную импортировать свои компоненты и пакеты, пусть ваш код кода сделает это для вас. Вы можете Автопомтер Что бы вы ни понравились, выбрав то, что вы хотите импортировать, нажав клавишу Tab.
Вот как автоматически импортировать пакеты и компоненты на VSCode:
- Перейти к Код Тогда Предпочтения Тогда Настройки
- Поиск Автопомтер и убедитесь, что Включить автоматический импорт флажок выбран
- Вернитесь в свой проект, напишите имя того, что вы хотите импортировать, стрелка через параметры редактор предлагает, и нажмите Вкладка Чтобы мгновенно создать оператор импорта для него.
При использовании Auto Import он облегчает работу с проектами любого масштаба, потому что вы больше не тратите половину своего отказа от времени.
5. Вы вручную удалите свой неиспользуемый импорт? Используйте ярлык Enterize Imports.
Наряду с отличным для всех кода, которые мы пишем, VSCode дает нам ярлык под названием Организовать импорт Это только что. На самом деле, это делает две вещи:
- Он в алфавитном порядке организует наши отчетности в области импорта
- Он удаляет неиспользованные операторы импорта (мгновенно исправляет предупреждения льной о неиспользованном импорте)
И лучше всего, этот ярлык не требует установки. Вот как это использовать:
- Перейти к Вид Тогда Палитра команд.
- Поиск Организовать импорт и выберите его.
- Теперь ваш импорт должен быть организован, и любой неиспользуемый импорт удален.
Обратите внимание, что вы можете использовать ярлык клавиатуры Команда/Control + Shift + O
также.
Наслаждайтесь этим постом? Присоединяйтесь к React BootCamp
React Bootcamp Занимает все, что вы должны знать о изучении реагирования и связки в один комплексный пакет, включая видео, обманывать, плюс специальные бонусы.
Получить инсайдерскую информацию сотни разработчиков уже использовалось для освоения реагирования, находить работу своей мечты и контролировать свое будущее:
Нажмите здесь, чтобы быть уведомленным, когда он открывается