Простые фрагменты реакции
Простое расширение, которое помогает вам быстрее набирать React, автоматически генерируя шаблонный код для распространенных применений.
Импортировать React и импортировать компонент React
После установки расширения и перезапуска VSCode, когда вы вводите этот ярлык в текстовый редактор:
imr
Вы должны увидеть раскрывающийся список, который будет автоматически генерировать import React из «реакции»; Нажмите кнопку возврата, и код появится в вашем редакторе.
Мы также можем использовать это сокращение для генерации import React, {Component} из «реакции»;
imrc
Мой любимый ярлык генерирует код для компонента класса, включая объект состояния, метод рендеринга, возврат и экспорт. Это также позволяет вам указать имя вашего компонента при одновременном объявлении класса и его экспорте.
cc
setState();
ss
Это лишь небольшая часть горячих клавиш, которые я использую чаще всего, и есть много других, перечисленных в документации.
Prettier — форматировщик кода
Prettier — это еще одно расширение Visual Studio Code, которое форматирует ваш код при сохранении документа. Он автоматически применит к вашим файлам правильные отступы, интервалы и точки с запятой.
Просто установите расширение и перезапустите VSCode, чтобы увидеть его в действии:
Используйте расширения файлов .jsx вместо .js
При написании JSX разработчики могут выбирать между расширениями файлов .jsx или .js. Оба работают для этой цели, и их основная польза заключается в том, чтобы донести до себя и других разработчиков, какие файлы содержат JSX.
Однако я нашел еще одно преимущество, которое делает это расширение файла более полезным. Подобно ярлыкам Simple React Snippets, упомянутым в этой статье, Emmet — аналогичный плагин, который используется для автоматической генерации HTML-разметки. Хотя Emmet в основном используется в файлах .html или .css, его также можно использовать в файлах .jsx.
Я написал еще одну запись в блоге, подробно описывающую, как начать использовать Emmet, но вот короткая демонстрация, показывающая, как быстро можно генерировать html-элементы:
