Введение
Это короткая статья обо всех расширениях Visual Studio Code, которые лично я считаю отличными инструментами. Это мои любимые, поэтому, если вы используете другие расширения, которые я не упомянул, не стесняйтесь, дайте мне знать в комментариях внизу.
1: Код времени
Code Time — это плагин с открытым исходным кодом, который предоставляет метрики программирования прямо в вашем редакторе кода.
После установки расширения вам будет предложено войти в их панель управления.
Прямо внутри вашего редактора кода вы можете нажать command + shift + P
Это откроет окно, где вы можете ввести Code Time, а затем вы можете выбрать между отображением данных прямо в вашем редакторе кода или в браузере.
Внутри браузера вся информация будет выглядеть так:
А внутри браузера ситуация будет немного красочнее:
Кодовое время действительно полезно, если вам интересно или вам нужно знать, сколько времени вы на самом деле тратите на программирование.
One Dark Pro — самая популярная тема Atom и одна из самых скачиваемых тем для Visual Studio Code.
Тема иконок One Dark Pro
Как вы можете видеть в этом примере, у нас есть значки для таких каталогов, как client и server, а также для таких файлов, как .eslintrc, .gitignore и package.json.
One Dark Pro полностью поддерживает React, Angular, Redux и множество различных фреймворков и библиотек, предоставляя различные значки каталогов для компонентов, утилит, стилей, а также для редьюсеров, действий. и хранить.
Это расширение позволяет идентифицировать совпадающие скобки по цветам.
Это чрезвычайно удобно, когда у вас есть глубоко вложенные объекты или функции, как показано здесь:
Раскрашивание пары скобок
Color Highlight показывает вам визуальное представление любого цветового кода.
Например, если вы введете RGB, RGBa, шестнадцатеричный код или любой другой цветовой код, вы сможете увидеть цвет визуально, как в этом примере:
Цветовое выделение
5: Интеллектуальное понимание пути
Path Intellisense — это подключаемый модуль Visual Studio Code, который автоматически дополняет имена файлов.
Это чрезвычайно удобно для импорта компонентов в React, так как вам не нужно вручную вводить путь к файлу, который вы ищете.
Путь Intellisense
6: Фрагменты ES7 React/Redux/GraphQL/React-Native.
Следующее расширение в списке — сниппеты ES7 React/Redux/GraphQL/React-Native. Довольно длинное имя, но поверьте мне, оно сэкономит вам много времени, особенно если вы используете его с React.
Это расширение предоставляет вам фрагменты JavaScript и React/Redux в ES7 с функциями плагина Babel для VS Code.
Прямо внутри вашего редактора кода вы можете нажать command + shift + P, а затем ES7 Snippet Search, и вас встретит длинный список коротких команд, которые вы можете запустить, чтобы получить гораздо более длинные фрагменты кода.
Фрагменты ES7 React/Redux/GraphQL/React-Native.
Вы также можете выполнить поиск здесь, чтобы легко найти команду, например, для фрагмента функционального компонента.
Вы запускаете команды, просто вводя их в редакторе и нажимая клавишу ввода. Все просто, работает как по волшебству.
GitLens расширяет возможности Git, встроенные в Visual Studio Code.
Это помогает вам визуализировать авторство кода с первого взгляда с помощью аннотаций вины Git и линзы кода, легко перемещаться и исследовать репозитории Git, получать ценную информацию с помощью мощных команд сравнения и многое другое.
Просто нажав на строку кода, вы можете увидеть, кто ее редактировал, когда редактировал и в каком коммите. Полезный материал!
GitLens — Git с наддувом
Вот и все!
Вы прошли весь путь до конца! Если вы нашли какое-либо из этих расширений полезным, и вам понравилась статья, не стесняйтесь нажать и удерживать кнопку хлопка! :)
