10 приемов работы с VSCode, которые помогут ускорить процесс разработки React

10 приемов работы с VSCode, которые помогут ускорить процесс разработки React

От автора: если вы пользователь VSCode и любите разрабатывать проекты React, то вы, вероятно, много раз имели дело с раздражающим повторяющимся кодом, таким как React.useState, React.useContext, React.useReducer(reducer, initialState), и так далее.

Эти отдельные клавиши разбросаны в разных направлениях на клавиатуре, и это может раздражать, когда наши бедные пальцы набирают эти символы снова и снова во всех проектах React. Если вы печатаете React.useState на клавиатуре, ваши кончики пальцев будут двигаться в следующих направлениях:

10 приемов работы с VSCode, которые помогут ускорить процесс разработки React

Возможно, я слишком живо воспринимаю эту простую проблему, но этот пост не о нажатиях клавиш. Это касается нажатия клавиш и многих других вещей, когда мы разрабатываем приложения React. Я понял, что мы должны максимально использовать все имеющиеся у нас возможности для смягчения ненужного стресса, потому что наше здоровье и время драгоценны.

С учетом вышесказанного, я хотел бы, чтобы этот пост помог таким разработчикам, как вы, и вы нашли способы сэкономить как можно больше времени и энергии. Поэтому я расскажу вам о полезных приемах, которые вы можете использовать для ускорения процесса разработки React!

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

1. Расширение: User Snippets

Я видел много замечательных вещей, которые случались с разработчиками React за всю историю его существования, и User Snippets — одна из них.

Это удобное расширение VSCode позволяет определять собственные сниппеты, которые вы можете использовать бесконечное количество раз в проектах, просто нажав пару букв.

Я работаю в компании, которая разрабатывает собственную платформу на React, и, к моему удивлению, некоторые разработчики даже не подозревают, что эта функция вообще существует.

Так что же она делает? Эта функция позволяет создавать любой пользовательский сниппет, который вы можете сгенерировать прямо над кодом, просто набрав пару букв (которые вы объявляете с собственным префиксом).

Например, когда мы создаем новый компонент, который будет использовать React.useReducerAPI, нам, вероятно, придется объявить начальное состояние, функцию редуктора и что-то вроде [state, dispatch] = React.useReducer(reducer, initialState) как минимум, чтобы произошло это:

Вы можете сэкономить драгоценное время и энергию, добавив их в свои сниппеты, как показано ниже:

Все, что вам нужно сделать, это нажать rsr, и этот код будет автоматически выписан для вас.

Вот некоторые распространенные сниппеты, которые я люблю использовать в проектах React.

Быстро протестируем элементы CSS, чтобы определить, правильно ли они выглядят, задав им временные границы:

У меня обычно в каждом проекте есть папка components с общими примитивными компонентами, такими как, Button, например:

Настройка / очистка чего-либо перед каждым тестом:

Некоторые простые блокировщики линии:

Импорт react:

Это не полный список сниппетов, которые я использую, но надеюсь, что это поможет вам понять, сколько времени и энергии вы можете сэкономить, используя преимущества пользовательских сниппетов.

Бонус: вы можете еще улучшить свой рабочий процесс с Project Snippets, который обеспечивает тот же функционал, плюс уровень рабочей области.

2. Расширение: Prettier

Если вы не используете Prettier, пожалуйста, я прошу вас — бросьте все и используйте его.

3. Расширение + пакет: TypeScript + ESLint

Примерно четыре года назад, когда промисы официально были введены в ECMAScript 2015 Specification, экосистема React пережила невиданный скачок технологий, которые изменили способ разработки веб-приложений.

TypeScript был среди них, поскольку он пробивался в экосистему React и постепенно стал широко распространен в сообществе — и на то есть веские причины!

TypeScript — это мощный инструмент, который позволяет сэкономить много времени и энергии, сводя к минимуму возможность возникновения потенциальных ошибок.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

В дополнение к функциям, которые он обычно предоставляет, TypeScript помогает документировать компоненты React, предотвращает будущие ошибки и учит вас многому о самом JavaScript, без необходимости тратиться на книги, чтобы изучить странные вещи этого языка.

Внедрение TypeScript с ESLint в проекты React поможет в ситуациях, когда вы не понимаете, как работает React:

10 приемов работы с VSCode, которые помогут ускорить процесс разработки React

4. Ярлык: двойная линия вверх / вниз

Ctrl + D сэкономит вам много времени.

5. Ярлык: найти все вхождения в текущем файле

Выделив в файле ключевое слово по вашему выбору и нажав Ctrl + Shift + L, вы выделите все вхождения этого ключевого слова.

Это полезно, когда вы хотите переименовать компонент, потому что, очевидно, у нас всегда будут по крайней мере три случая, когда у компонента есть дочерние элементы:

Если мы хотим переименовать App во что-то еще, нам нужно выбрать объявление компонента, а также два вхождения в блоке рендеринга Root.

6. Ярлык: нахождение файла в проекте

Необходимость все время использовать File Explorer, когда вы ищете определенный файл, может быть разочаровывающей. Это становится большой проблемой, когда вы хотите проанализировать файл в каталоге node_modules , поэтому VSCode делает это за вас:

10 приемов работы с VSCode, которые помогут ускорить процесс разработки React

Красная линия показывает, сколько контента еще нужно прокрутить, а синяя — размер полосы прокрутки, которая сжимается по мере увеличения содержимого. Это влияет на производительность.

Вы можете легко найти и открыть файл, который находится в любом месте проекта, выполнив поиск по его названию, не перемещая мышь ни на миллиметр. Просто нажмите Ctrl + T, введите имя файла, и все готово.

7. Расширение: пользовательское выделение TODO

Это расширение может показаться полезным для забавного использования, но со временем оно стало для меня мощным инструментом в серьезных ситуациях.

Прежде всего, невероятно важно записывать задачи где-то. Это может быть приложение Evernote, блокнот для записей, вырванный лист бумаги и так далее. Если вы используете выделение TODO, как я, вы размещаете задачи прямо поверх кода, который пишете в комментариях. Это невероятно полезно с одновременным использованием TODO Highlights, потому что они становятся цветовыми кодировками на экране, когда вы добавляете префикс строки TODO:, как показано ниже:

10 приемов работы с VSCode, которые помогут ускорить процесс разработки React

Но мощь TODO Highlights начинает проявлять себя еще больше, когда вы начинаете создавать собственные ключевые слова и цветовые эффекты для них:

10 приемов работы с VSCode, которые помогут ускорить процесс разработки React

Это стало ценной функцией, потому что я могу быстро сосредоточиться, а также понять, что происходит в каждом файле, независимо от того, с чем сейчас работаю.

Мое любимое ключевое слово todohighlight — BUG:, потому что оно красное. Обычно мы ассоциируем красный с ошибками или чем-то опасным, поэтому это легко привлекает мое внимание к критическим частям кода:

10 приемов работы с VSCode, которые помогут ускорить процесс разработки React

8. Расширение: (Любая крутая тема в Visual Studio Marketplace)

Разработка приложений React в сочетании с классной цветовой темой VSCode была очень важным фактором, позволяющим мне развлекаться и улучшать качество кода.

Невероятно важно использовать понравившуюся тему, потому что цветовые коды компонентов React имеют определенный «внешний вид» или «восприятие», что поможет вам легче разрабатывать приложения React, как мы видим ниже:

Не компоненты

10 приемов работы с VSCode, которые помогут ускорить процесс разработки React

Компоненты

10 приемов работы с VSCode, которые помогут ускорить процесс разработки React

9. Расширение: сниппеты ES7 React / Redux / GraphQL / React-Native

Это будет очень полезно для вас. Лично я больше не пользуюсь этим, потому что я использую собственные сниппеты. Но в прошлом это оказало огромное положительное влияние на мой рабочий процесс.

10. Функция: хлебные крошки

Мальчик, время точно летит быстро! Такое ощущение, что хлебные крошки в VScode были введены еще вчера.

Они по-прежнему облегчают мне разработку React, в то время, когда я меньше всего этого ожидаю.

Учитывая природу иерархии дочерних / родительских компонентов активного компонента, так и должно быть (если вы построили структуру каталогов в соответствии с иерархией), поскольку в основном это показывает, что файл компонента был получен из родительского каталога (у меня он в большинстве случаев является компонентом, который по умолчанию экспортируется из файла index.tsx):

10 приемов работы с VSCode, которые помогут ускорить процесс разработки React

Приведенные выше хлебные крошки показывают, что Add — это дочерний элемент элемента Birthdays, который является маршрутом в компоненте Admin.

Хлебные крошки включены по умолчанию. Но дело в том, чтобы не принимать функцию хлебных крошек как должное. Они становятся полезным неожиданным образом, поэтому уделите им больше внимания!

Бонус: несколько полезных советов и хитростей для интересующихся.

Заключение

На этом мы заканчиваем данный пост! Я надеюсь, что вы нашли его полезным!

Автор: jsmanifest

Источник: //dev.to

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

ReactJS: основы

Изучите основы ReactJS и создайте ваше первое приложение на ReactJS

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook: