Повысьте свою продуктивность с помощью React Native

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

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

Я использую различные расширения VS Code, но хочу поделиться теми, которые считаю особенно полезными.

Красивее — код отформатирован

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

Красивее в действии:

Выделить соответствующий тег

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

Выделите соответствующий тег в действии:

Автоматическое переименование тега

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

Тег автоматического переименования в действии:

Рефакторинг VSCode React

Иногда всем нам нужно провести рефакторинг всего кода, и хорошо иметь инструмент, который может в этом помочь. С этим расширением очень легко выделить строки кода, которые следует извлечь в новые компоненты, и все.

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

Рефакторинг VSCode React в действии:

Проверка правописания кода

Наличие опечатки или орфографической ошибки в комментарии или даже в имени переменной может не нарушить ваш код, но плохо отразится на вас. так почему бы не использовать расширение Visual Studio для проверки?

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

Проверка орфографии кода в действии:

Усилитель JavaScript

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

Он поддерживает несколько действий с кодом из условий рефакторинга, объявлений, функций, машинописного текста, промисов, JSX и многого другого.

Усилитель JavaScript в действии:

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