Visual studio code расширения для php. Золотой фонд веб-разработчика. Самые полезные плагины для Atom и VS Code. Расширения для Visual Studio Code

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 применяет шаблон регулярного выражения к любому открытому текстовому файлу, выделяя все совпадения. Прямо как

Для быстрой вставки случайных данных при помощи библиотеки 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-кода. Проверяет отвечает ли написаный код стандартам программирования.

Основной редактор которым я пользуюсь для написания кода стал Visual Studio Code (сокращённо VSCode). До этого я работал в редакторе Sublime Text, который полностью удалил через две недели после того как начал юзать VSCode, просто потому что VSCode гораздо круче и быстрее.

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

В VSCode реализованы поиск и установка расширений прямо из редактора - достаточно открыть панель расширений и в поиске расширений в Marketplace ввести название расширения или ключевое слово (тег), и редактор тут же сделает поиск и предложит вам варианты доступные по вашему поисковому запросу.

По умолчанию в VSCode уже установлен плагин Emmet, а вот какие расширения стоит установить, чтобы сделать вашу работу быстрее и комфортнее, читайте дальше.

Расширения для Visual Studio Code

Project Manager - Менеджер проектов

Это то расширение которое стоит установить в редактор VSCode первым делом. Автор данного расширения Alessandro Fragnani - опытный разработчик, в копилке которого больше десятка расширений для VSCode.

Расширение поможет вам легко получать доступ к вашим проектам, независимо от того где они находятся. Вы можете определить свои собственные избранные проекты или выбрать для автоматического обнаружения проектов VSCode, Git, Mercurial и SVN-репозиториев или любой папки.

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

Я лично сделал свой вклад в разработку расширения Project Manager - сделал его мультиязычным и добавил русский язык, так что теперь оно доступно на русском языке.

Bookmarks - Закладки

Ещё одно расширение для VSCode от Alessandro Fragnani .

Расширение позволяет вам делать закладки на строки файла, о чём сигнализирует метка на полях.

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

Для удобства, чтобы легче ориентироваться в закладках, я часто ставлю закладку на комментарий. Ниже на скрине пример - закладка стоит на строке с комментарием Кнопки и в проводнике закладок она обозначена Кнопки. Думаю так удобно:

Так же как и для Project Manager, я сделал свой вклад в разработку и этого расширения - сделал мультиязычным и добавил в него русский язык.

Расширение добавляет возможность быстро открывать в браузере файлы html.

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

Если файл открыт в редакторе и находится в активном состоянии - достаточно нажать комбинацию клавиш Alt + B и файл откроется в браузере по умолчанию.

Если нажать комбинацию клавиш Shift + Alt + B - то в командной строке редактора появится список браузеров где можно выбрать в каком конкретно браузере нужно открыть файл.

Запоминать упомянутые выше комбинации клавиш вам не нужно - достаточно нажать правую кнопку мыши и в контекстном меню есть соответствующие пункты, чтобы открыть файл в браузере по умолчанию или выбрать браузер из списка. При чём можно открывать не только активные файлы (открытые в редакторе), но и файлы из панели проводника.

Path Intellisense

Path Intellisense - данный плагин для Visual Studio Code, который автоматически заполняет имена файлов.

Аналогичное расширение Path Autocomplete.

Выполняет тот же функционал что и Path Intellisense , добавляя путь и имена файлов.

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

file-size

Это расширение показывает в статус баре редактора размер активного файла.

Я искал настройку в параметрах VSCode, чтобы отображать размер файла, но не нашёл. Зато данная небольшая утилита решает эту проблему и выводит в статус-баре редактора информацию о размере файла.

htmltagwrap

Это расширение делает обёртку выделенного фрагмента тэгами HTML.

Всё просто - выделяем фрагмент или строку и команда сочетанием клавиш Alt + W

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

Active File In Status Bar

Выводит в статус-баре редактора путь к файлу. При клике - копирует путь к файлу в буфер обмена.

Bracket Pair Colorizer

Данный плагин позволяет задать цвет для каждой пары скобок, что позволяет визуально контролировать вложенность или правила условий в коде. Работает для круглых (), фигурных {} и квадратных скобок .

До установки этого плагина у меня были проблемы с закрытием скобок, теперь я по цвету вижу вложенность скобок.

Иконки файлов и папок

VSCode simpler Icons with Angular

Это коллекция иконок для файлов. Я много пересмотрел иконок, но остановился на данной сборке, т.к. здесь стилизованы папки только для node_modules и bower. В других же сборках разные папки (например: images, js, css и т.д.) имеют свои красивые иконки, но при этом трудно быстро отличить папку от файла, а здесь всё просто - в дереве папок и файлов я чётко вижу где открытая папка, а где закрытая.

Подобных наборов очень много на Marketplace, так что можете сами посмотреть и подобрать подходящие для вас стили иконок. Можно поставить сразу много коллекций. Изменить иконки легко - настройка для смены иконок находится в меню на шестерёнке расположенной внизу в тулбаре:

Выбираете пункт Тема значков файлов и в командной строке редактора появятся установленные у вас темы значков файлов. Три темы дефолтных от VSCode и то что вы добавите. В списке просто стрелками вверх-вниз листайте темы и иконки тут же будут применяться и отображается в проводнике на файлах. Так быстро подберёте ту тему которая вам нравится.

Повторюсь, что мне понравилась тема VSCode simpler Icons with Angular

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

Для этого в статус баре редактора расположена кнопка для запуска. После клика по ней - открывает файл в браузере и следит за изменениями в файлах. При изменении файлов автоматически перезагружает страницу в браузере.

Лично я предпочитаю работать с Browsersync через Gulp, который шустрее, функциональней и создаёт меньше нагрузок, но так как не всегда и не в каждый проект устанавливается Gulp, то находится работа и для расширения Live Server.

Профилированные расширения для VSCode

А теперь предложу список расширений для VSCode для специфических направлений.

Работа с Git и Github

Помимо того что VSCode по умолчанию работает с гитом, на Marketplace есть очень много расширений на самый любой вкус для работы с Git и Github. Я меня стоят такие:

Git History, GitLens, Git Merger, GitHub Pull Requests

RemoteFS

Это расширение позволяет подключаться к серверу по FTP и SFTP протоколам.

Всё что нужно для того чтобы открыть сайт или проект находящийся на сервере - это в файле settings.json добавить следующую настройку:

"remotefs.remote": { "первый сайт": { "scheme": "ftp", "host": "Хост", "port": 21, "username": "FTP логин", "password": "Пароль", "rootPath": "/", "connectTimeout": 10000 }, "второй сайт": { "scheme": "ftp", "host": "Хост", "port": 21, "username": "пользователь FTP", "password": "Пароль", "rootPath": "/", "connectTimeout": 10000 } }

Данные для подключения можно получить на вашем хостинге в разделе Пользователи FTP . Я специально показал макет подключение для двух сайтов - по такой схеме можно подключать сколько угодно сайтов по разным протоколам (FTP или SFTP).

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

Так же, как и большинство IDE, VSCode имеет свой магазин расширений, содержащий тысячи плагинов различного качества. Чтобы помочь вам выбрать те, которые стоит скачать, мы сделали эту коллекцию расширений, которые мы нашли наиболее полезными и интиресными.

VSCode не предлагает встроенный интерфейс для открытия файлов непосредственно в браузере. Это расширение добавляет элемент контекстного меню «Открыть в браузере» в контекстное меню, а также команды для открытия в выбранном клиенте (Firefox, Chrome, IE).

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

Быстро вставляйте данные заполнителя с помощью популярной библиотеки JavaScript Faker. Вы можете создавать случайные имена, адреса, изображения, номера телефонов или просто параграфы классического Lorem Ipsum. Каждая категория имеет различные подкатегории, поэтому вы можете сделать данные подходящими для ваших нужд.

Используя это расширение, вы можете отслеживать определения классов CSS и идентификаторов в своих таблицах стилей. Когда вы щелкните правой кнопкой мыши на селекторе в своих HTML-файлах, выберите опции «Перейти к определению», а определение «Peek» отправит вам код CSS, в котором вы их создали.

Расширение HTML-шаблона избавит вас от необходимости вручную записывать теги head и body нового HTML-документа. Просто введите html в пустой файл, нажмите клавишу Tab, и будет создана чистая структура документа.

Prettier является самым популярным форматором кода среди веб-разработчиков. Он позволяет коду вашей команды выглядеть одинаково, независимо от того, кто его написал. Это расширение позволяет автоматически применять Prettier и быстро форматировать все документы JS и CSS . Если вы также хотите использовать ESLint , есть Prettier — Eslint .

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

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

Крошечные сниппеты для включения шрифтов значков в вашем проекте (из CDN), а затем добавления самих значков. Расширение поддерживает более 20 популярных наборов иконок, включая шрифты Awesome , Ionicons , Glyphicons и Material Design Icons .

Расширение для минимизации кода. Он предлагает тонну настроек настройки и возможность автоматического минимизации при сохранении и экспорте в файл.min. Minify работает с JavaScript, CSS и HTML через uglify-js, clean-css и html-minifier соответственно.

VSCode имеет ограниченные возможности для преобразования текста. Из коробки он может делать только строчные и прописные преобразования. Этот плагин добавляет намного больше команд для модификации строк, включая camelCase, kebab-case, snake_case, CONST_CASE и другие.

Полезный инструмент для тестирования ваших регулярных выражений. Он работает, применяя шаблон регулярного выражения над любым текстовым файлом, открытым в редакторе, выделяя все совпадения. Как будто RegExr , но прямо внутри вашего редактора!