Я работаю над React и React-Native последние два года, и это было своего рода радостное путешествие. Здесь я собрал список расширений в алфавитном порядке, без которых я не могу жить. Если я пропустил один или если вы считаете, что есть лучший вариант того, которым я поделился здесь. Не стесняйтесь комментировать ниже или связаться со мной. Чего ждать? Давай 🔥-
1. Автоматическое переименование тега
Это расширение помогает автоматически переименовывать парные теги, что будет очень полезно, когда открывающий тег находится в строке 1, а закрывающий тег — в строке, которую вы не можете найти в своем коде 😂.
2. Проверка правописания кода
Устали перепечатывать или подвергать сомнению свои грамматические навыки, не ждите больше. Представляем средство проверки орфографии Code, которое помогает выявлять распространенные орфографические ошибки, снижая количество ложных срабатываний. Он хорошо работает с кодом camelCase.
3. Время кода
Когда-нибудь задумывались, сколько времени вы тратите на написание кода, какой язык программирования и сколько нажатий клавиш вы сделали, не смотрите дальше, Code Time поможет вам узнать все о статистике. Я использовал это расширение только для продуктивного использования.
4. Цветовое выделение
Если вы веб-программист, вы знаете, что такое #000000 (если нет, то это шестнадцатеричный код черного цвета), но вы можете не знать, что такое #EB606B, и тут вам поможет Color Highlight. Он выделит все шестнадцатеричные коды, которые у вас есть в вашем коде, чтобы упростить вам задачу. Вам не нужно заходить в Google, чтобы искать, какой цвет вы используете в своем коде.
5. Отладчик для Chrome
При разработке веб-сайта вам необходимо отлаживать то, что вы пишете. Отладчик для Chrome поможет вам отлаживать JavaScript в Chrome или любых других браузерах на базе Chrome, которые поддерживают протокол Chrome DevTools.
6. Фрагменты ES7 React/Redux/GraphQL/React-Native
Это расширение представляет собой набор всех фрагментов, используемых в React, Redux, GraphQL и React-Native. Этот платный поможет меньше печатать и иметь больше кода. Это может или не может сократить ваше время на написание кода (это зависит исключительно от вас).
7. ЭСЛинт
Если вы не знаете, что такое линтер — Что такое линтер?.
Теперь вы знаете, что такое ворс, давайте продолжим блог. ESLint — это инструмент линтинга для JavaScript, и для интеграции этого инструмента в ваш код вам нужно расширение, и именно здесь приходит на помощь ESLint. Он поможет вам найти проблемы и исправить их.
8. файлы-иконки
Если вам надоело, как ваши значки папок и файлов выглядят в коде VS, не смотрите дальше, значки файлов дадут новую жизнь значкам по умолчанию в коде VS. Это не поможет вам получить код без ошибок, но поможет вам четче взглянуть на свое рабочее пространство.
9. Поддержка языка Flow
Если у вас есть опыт создания нового проекта в React-Native, вы могли видеть файл в корневой папке, который называется — .flowconfig, и вам могло быть интересно, что этот файл делает в чистом проекте React-Native. Flow — это статическая проверка типов для JavaScript. Он разработан Facebook. С помощью этого инструмента Facebook гарантирует, что вам не нужно использовать TypeScript.
10. GitLens — Git с наддувом
Он переносит все функции Git в VS Code. Наиболее часто используемой функцией является авторство кода, это означает, что вы можете видеть, кто написал код с ошибками, который вам нужно исправить сейчас. На боковой панели этого расширения есть много других функций, таких как просмотр репо, просмотр истории файлов и так далее.
11. Путь Intellisense
Если вам когда-либо приходилось открывать несколько веток папок в vs code или проводнике, чтобы увидеть, где находится вспомогательный класс или где находится редко используемый ресурс в вашем проекте, это расширение облегчит ваш файл. Он будет автоматически заполнять имена файлов и уменьшит дорогостоящие отвлекающие факторы.
12. Prettier — форматировщик кода
Никто, я имею в виду, НИКТО не любит беспорядочный код, который вы не можете прочитать. Prettier — это расширение, которое помогает вам форматировать код так же, как вы сохраняете код (вам нужно настроить параметр, чтобы сохранить его, нажав CTRL + S). Интеграция ESLint + Prettier — это как арбуз и сахар. Вы можете настроить в соответствии с рабочей областью, какое форматирование вы хотите.
12. Visual Studio IntelliCode
Это расширение, созданное нашей собственной компанией Microsoft, предоставляет функции разработки с помощью ИИ для разработчиков Python, JS/TS и Java с пониманием контекста кода с использованием машинного обучения. Проще говоря, он знает, что вы собираетесь набирать, и рекомендует вам выполнять задания с помощью машинного обучения.
13. Рефакторинг VSCode React
Это расширение предоставляет возможности рефакторинга для разработчиков React. Как заявляют разработчики расширения: «Это расширение сделает за вас грязную работу, не нарушая ваш код». Я все еще нахожусь в процессе обучения (установил его несколько дней назад) о том, как использовать это расширение. Он работает с Hooks API и поддерживает TypeScript.
Заключительные замечания ✔
Надеюсь, вам понравилось читать этот блог. Вы можете или не можете установить эти расширения в свой VS Code. Я настоятельно рекомендую вам попробовать их и дайте мне знать в комментариях ниже о том, как это помогло вам. Если вы обнаружите какие-либо ошибки в блоге, пожалуйста, свяжитесь со мной, и я постараюсь их исправить. Если появятся какие-либо новые расширения, которые могут помочь другим разработчикам, я обновлю этот список или, возможно, создам новый, например расширения VSCode, которые вы должны установить в 2021 году 🤣.
Если вы хотите быть в курсе моего контента, не стесняйтесь нажимать кнопку «Подписаться» или, может быть, вы можете быть на шаг впереди всех, подписавшись на мою рассылку (это было бы здорово)
Первоначально опубликовано на https://blog.joelcs.dev.
