Visual studio code полезные расширения. ✨ Расширения для Visual Studio Code, которые поднимут процесс разработки на новый уровень

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

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

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

Плагин для проверки орфографии в коде.

GitLens перезагружает встроенные возможности Visual Studio Code Git. Это помогает вам сразу же визуализировать информацию о истории кода в Git, плавно перемещаться и исследовать историю файла или ветки, получать ценную информацию через плагин, сравнения кода и многое другое.

Плагины для Back-end разработчиков

PowerShell

Позволяет работать со скриптами PowerShell прямо в интерфейсе Visual Code.

Python

Расширение кода Visual Studio с поддержкой языка Python (включая Python 3.6) с включая следующие функции:

• Linting (Prospector, Pylint, pycodestyle, Flake8, pylama, pydocstyle, mypy)
• Intellisense
• Авто отступ, форматирование кода, рефакторинг
• Запуск и отладка юнит тестов (unittest, pytest, nose)
• Snippets

• Инструменты для разработки и отладки.NET Core.
• Большая поддержка редактирования C#, включая выделение синтаксиса, IntelliSense, переход к определению, поиск всех ссылок и т.д.
• Поддержка проектов project.json и csproj для Windows, MacOS и Linux.

Плагины для Front-end разработчиков

JSHint

JSHint — очень удобный инструмент для статического анализа JavaScript-кода. Проверяет отвечает ли написаный код стандартам программирования.

Code Time - это плагин с открытым исходным кодом, который предоставляет метрики прямо в редакторе кода.

После установки расширения будет предложено войти в панель управления. Если внутри редактора кода вы нажмете command + shift + P , откроется окно, в котором можно ввести Code Time , а затем выбрать между отображением данных в редакторе кода или в браузере.

Внутри браузера информация будет выглядеть так:

Внутри браузера красочнее:

Code Time полезен, если вам нужно точно знать или просто интересно, сколько времени вы тратите на написание кода.

One Dark Pro

One Dark Pro одна из самых популярных и часто загружаемых тем для Visual Studio Code.

В этом примере видно, что у нас есть значки для каталогов, таких как клиент и сервер, а также для файлов, таких как .eslintrc .gitignore и package.json .

One Dark Pro поддерживается в React, Angular, Redux и множестве различных фреймворков и библиотек, предоставляя различные значки каталогов для компонентов, утилит, стилей, а также для редюсеров (Reducers), действий (Actions) и хранилищ (Store).

Bracket Pair Colorizer

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

Color Highlight

Color Highlight показывает визуальное представление любого цветового кода. Например, если вы введете RGB, RGBa, шестнадцатеричный или любой другой цветовой код, можно увидеть цвет, как в этом примере:

Path Intellisense

Path Intellisense - это плагин, который автоматически завершает имена файлов.

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

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 , вы увидите длинный список коротких команд, которые можно запустить, чтобы получить более длинные фрагменты кода.

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

GitLens - Git supercharged

GitLens расширяет возможности Git, встроенные в Visual Studio Code. Помогает с первого взгляда определить автора кода с помощью аннотаций Git-blame и code lens, легко перемещаться и изучать репозитории Git, получать ценные сведения с помощью команд сравнения и многое другое. Нажав на строку кода, вы увидите, кто его редактировал, когда его редактировали и в каком коммите.

Visual Studio Code - бесплатный, кроссплатформенный текстовый редактор от Microsoft, ставший популярным благодаря легковесности, мощному и расширяемому функционалу и, конечно же, "халявности", в отличие от PHPStorm, Sublime и др.

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

Open-In-Browser

По умолчанию, в Visual Studio Code нет возможности открыть файл в браузере. Данное расширение не только добавляет функцию "Открыть в браузере", но и позволит открыть файлы в любом установленном на компьютере браузере.

Quokka

Quokka - утилита, дающая вам возможность предварительного просмотра результата выполнения того или иного куска кода, выдавая результаты выполнения функций и подсчитанные значения переменных. Расширение легко настраивается и работает из коробки с JSX или Typescript проектами.

Faker

Позволяет быстро вставлять случайные данные (произвольные имена, адреса, изображения, телефонные номера и др.) в код. У каждой категории есть свои подразделы, что позволяет более точно подстроиться под потребности программиста.

CSS Peek

С этим плагином вы можете отслеживать определения классов и id в CSS файле. Для этого нужно нажать правой кнопкой мыши на селекторе в вашем HTML файле и выбрать Go to Definition (Перейти к определению) или Peek definition (Подсмотреть определение).

HTML Boilerplate

HTML Boilerplate упрощает работу с HTML, избавляя от необходимости самому писать теги head и body . Наберите в пустом файле html , нажмите на на клавишу Tab и Visual Studio Code сгенерирует шаблон документа!

Prettier

Prettier – популярный у web-разработчиков редактор кода, позволяющий приводить код, написанный разными людьми, к единому виду. В настройках Prettier можно установить автозапуск, что позволит сразу форматировать код, написанный на JS и CSS.

Color Info

Небольшой плагин, который выдает краткую справку об используемых в CSS цветах. Наведя курсор на название цвета, вы можете увидеть, как он выглядит и как его написать в других цветовых форматах (hex , rgb , hsl и cmyk ).

SVG Viewer

Это расширение позволит работать с SVG файлами: вы cможете редактировать SVG файлы, конвертировать их в PNG формат и создавать data URL схемы.

TODO Highlight

Это дополнение позволяет вам проставлять метки в недоделанные места в коде, что упрощает над проектом. По умолчанию, заданы только метки TODO (доделать) и FIXME (исправить), но вы можете создавать и свои собственные типы меток.

Шрифты с иконками

Расширение, добавляющее в Visual Studio Code поддержку около 20 популярных иконочных шрифтов, в том числе Font Awesome , Ionicons , Glyphicons , Material Design ...

Minify

Утилита для оптимизации и сжатию кода. Minify работает с HTML , JS и CSS файлами и отлично сочетается с такими плагинами, как uglify-js , clean-css и html-minifier .

Change Case

VS Code позволяет приводить выделенное только к верхнему и нижнему регистрам. С помощью Change Case , вы получите доступ к большому количеству регистров (змеиный, верблюжий и др.).

Regex Previewer

Дополнение, позволяющее работать с регулярными выражениями. Regex Previewer применяет шаблон регулярного выражения к любому открытому текстовому файлу, выделяя все совпадения. Прямо как

Давайте поговорим о Code  - . Мои дорогие читатели попросили меня рассказать о тех расширения, которые я использую для разработки. Этим мы сейчас и займёмся.
Ссылка на загрузку VSC: https://code.visualstudio.com/ Наш VSC будет пятирогим лазеростреляющим единорогом -после того как мы снабдим его самыми полезными расширения, которыми я пользуюсь каждый день. О, а если вы еще не используете замечательный редактор VSC, под картинкой выше есть ссылка на официальный сайт, с которого его можно загрузить.
Material Theme

Material Theme

Самая эпичная тема для Visual Studio Code:
https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme

Auto Import

Автоматически находит, парсит и дополняет названия методов и событий для всех доступных файлов. Поддерживает Typescript и TSX.
https://marketplace.visualstudio.com/items?itemName=steoates.autoimport

Import Cost

Это расширение отобразит в редакторе размер импортируемого пакета в одной строчке с соответствующим методом. Расширение использует Webpack с babili-webpack-plugin для обнаружения импортируемого объекта и оценки его размера.
https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

Indent-Rainbow

Простое расширение, которое делает отступы более читабельными. https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

IntelliSense for CSS class names in HTML

Расширение VSCode, которое автоматически дополняет название CSS-класса для HTML-атрибута class на основе определений, найденных в вашей рабочей области или внешних файлов, на которые ссылается элемент link .
https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

SVG Viewer

Простой способ предпросмотра SVG.
https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer

Prettier - Code formatter

Не могу жить без него - пакет VSCode для форматирования JavaScript / TypeScript / CSS с использованием Prettier .
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

React Native Tools

Подсказки, отладка и встроенные команды для React Native.
https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native

Sublime Text Keymap and Settings Importer

https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings Это расширение позволяет в VSCode использовать горячие клавиши Sublime Text 3. Попробуйте потестировать его, открыв консоль сочетанием клавиш: cmd ⌘ + P - Mac ctrl + P - Windows
В этой консоли можно быстро перейти к файлам, а также, если добавить символ > перед поисковой строкой, можно искать действия, такие как переключение встроенного терминал, установку расширения и так далее. Очень удобная штука для тех из нас, кто привык к ST3. ?

npm Intellisense

Плагин VSCode, который автоматически дополняет имена модулей npm в операциях импорта.
https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

lit-html

Добавляет подсветку синтаксиса и поддержку разметки HTML внутри строк JavaScript и TypeScript, как это используется в lit-html и других фреймворках.
https://marketplace.visualstudio.com/items?itemName=bierner.lit-html

highlight-matching-tag

Это расширение предназначено для подсветки парных открывающих или закрывающих тегов - функциональности, отсутствующей в VSCode, но которая должна бы быть встроена в редактор из коробки.
https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag

GitLens - Git supercharged

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens Это расширение перезагружает встроенные возможности Visual Studio Code по работе с Git. Оно в наглядном виде предоставляет информацию об авторстве изменений в Git, а также облегчает перемещение по репозиториям и позволяет отслеживать историю изменений файлов или веток, использовать команды сравнения кода и многое другое.

Git Project Manager

Git Project Manager (GPM) - это расширение Microsoft VSCode, которое позволяет вам открыть новое окно на основе git-репозитория непосредственно из VSCode.
https://marketplace.visualstudio.com/items?itemName=felipecaputo.git-project-manager

Git History

Просмотр логов git и истории изменения файлов и сравнение веток или коммитов.
https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

File Utils

Удобный способ создания, дублирования, перемещения, переименования и удаления файлов и каталогов.
https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils

Bracket Pair Colorizer

Настраиваемое расширение для раскрашивания парных скобок. Крайне полезно при работе с большим количеством обратных вызовов.
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

Color Highlight

Это расширение подсвечивает CSS / веб-цвета, найденные в вашем документе.
https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

CSS Peek

Переход к CSS-свойствам идентификаторов (id) и классов непосредственно из файлов HTML. Поддерживает переключение и между файлами и быстрый переход из одного в другой.
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

Debugger for Chrome

Инструмент для отладки JavaScript-кода или любого другого кода в браузере Chrome.
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Quokka.js

Выполняет JavaScript-код в консоли параллельно с тем, как вы его пишете. (Полезно для быстрых демонстраций).
https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

Trailing Spaces

Мгновенно выделяет и удаляет конечные пробелы.
https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces#user-content-installation

TypeScript Hero

https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero Это расширение пригодится всем, кто пишет на TypeScript и хочет, чтобы VSC организовал импорты за него.

WakaTime

Метрики, инсайты и отслеживание времени, автоматически генерируемые на основании статистики вашей работы по программированию.
https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime

Vetur

Поддержка Vue для VSCode
https://marketplace.visualstudio.com/items?itemName=octref.vetur

Code Runner

Запустите фрагмент кода или целый файл сразу в нескольких языках.
Благодарю вас за то, что прочитали эту статью! Переходите по ссылке в твиттере, чтобы узнать о других расширениях VSCode. Знаете еще какие-то полезные плагины, которые не упомянуты здесь? Пожалуйста, пишите их в комментариях❤ https://twitter.com/wesbos/status/907347014823923714 Перевод статьи : “✨