На каждой итерации нашей разработки одна из наших целей - сделать наш код последовательным, более быстрым и эффективным. Чем лучше мы напишем код, тем лучше мы сможем создавать программное обеспечение.
Большинство разработчиков, которых я знаю, особенно по веб-разработке, используют VSCode в качестве основных редакторов. И поэтому я подумал, может быть, было бы здорово, если бы мы могли создавать фрагменты кода, которые помогут нашим друзьям, товарищам по команде или коллегам писать лучший код. Может быть, мы можем. Возможно.
Фрагменты кода, которые мы будем создавать, предназначены для разработчиков JavaScript, использующих React. Мы постараемся добавить некоторые шрифты для разработчиков Flow и TypeScript в качестве дополнительных, чтобы вы могли выбрать то, что лучше всего для вас.
Если вы не знакомы с фрагментами кода на VSCode о том, что это такое и как создавать фрагменты, ознакомьтесь с этой документацией.
Если вы уже знакомы, отлично, присоединяйтесь ко мне, поскольку мы создаем фрагменты кода, чтобы помочь нашим друзьям! Давайте начнем.
💻 Фрагменты JavaScript
Журнал консоли (засорение)
Более легкое ведение журнала для переменных (при необходимости создайте еще один журнал)
Выражение функции (js # arrow-function)
Либо вы хотите создать функцию на основе имени файла, либо написать ее самостоятельно. Вы также можете заменить имя, чтобы фрагмент, который создает функцию на основе имени файла, был отделен от обычного фрагмента функции.
Объявление функции (функция js #)
Для этого уже есть фрагмент кода по умолчанию, но мы заменим его, чтобы добавить поддержку использования имени файла в качестве имени функции и добавления типов. Если вам не нравится создавать новый фрагмент и просто использовать фрагмент по умолчанию, не стесняйтесь его пропустить.
⚛️ Реагировать на фрагменты
useState (реакция # useState)
Упрощенное useState декларирование
useEffect (реакция # useEffect)
Упрощенное useEffect декларирование
useRef (реакция # useRef)
Упрощенное useRef декларирование
Функциональный компонент (React # component)
🚨Тестовые фрагменты
Опишите полный блок
Создайте блоки happy paths и exception paths, которые позволят вам разделить обычные варианты использования и крайние варианты.
Опишите блок
Создает блок describe, содержащий базовую структуру
Это блок
Создает блок it, содержащий этап подготовки к тесту и этап утверждения.
🎁 Бонус
Заполнитель изображения
Вы можете использовать этот фрагмент кода в фрагменте HTML или JavaScript.
🤖 Собираем все вместе
Фрагменты кода удобны для нашей разработки, так как позволяют сэкономить несколько секунд на простом вводе всего блока кода. Эти несколько секунд в совокупности сэкономят нам кучу времени в течение дня.
Фрагменты кода также дают нам возможность стандартизировать то, как мы создаем блоки кода. Сначала будет необычно, что вы собираетесь использовать сниппеты, но как только вы к этому привыкнете, вы сможете создавать блоки кода быстрее, как ветер.
Это пример того, как мы можем максимально использовать наши редакторы кода при разработке. Эти фрагменты кода могут вам не сильно помочь, но я уверен, что это откроет новые идеи для вас и вашего развития.
О, прежде чем я уйду, я поделюсь сайтом, который помог мне создать эти фрагменты. Проверьте это: https://snippet-generator.app/.
И я рад услышать, что вы собираетесь создать. Дайте мне знать в разделе комментариев, что вы сделали.
Спасибо за чтение. Надеюсь, это поможет вам в вашем путешествии! ❤️
