Inter-Net.PRO

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

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


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

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


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


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

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

project manager

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

 

Страница на Marketplace - https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager


Bookmarks - Закладки

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

bookmarks

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

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

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

закладки в VSCode

 

Страница на Marketplace - https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks


open in browser

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

open in browser

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

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

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

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

Страница на Marketplace - https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser


Path Intellisense

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

Path Intellicence

Страница на Marketplace - https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

 

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

Path Autocomplete

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

Path Autocomplete

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

Страница на Marketplace - https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete


file-size

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

file size

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

размер файла

Страница на Marketplace - https://marketplace.visualstudio.com/items?itemName=zh9528.file-size


htmltagwrap

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

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

htmlwrap

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

Страница на Marketplace - https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap


Active File In Status Bar

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

путь к файлу

Страница на Marketplace - https://marketplace.visualstudio.com/items?itemName=RoscoP.ActiveFileInStatusBar


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

VSCode simpler Icons with Angular

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

vscode simpler icons

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

тема значков файлов

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

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

Страница на Marketplace - https://marketplace.visualstudio.com/items?itemName=davidbabel.vscode-simpler-icons


Live Server

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

live server

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

Страница на Marketplace - https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer


Live Sass Compiler

  Расширение VSCode, которое поможет вам скомпилировать / передать файлы SASS / SCSS в файлы CSS в реальном времени с перезагрузкой браузера в реальном времени.

live sass compiler

  В расширении доступен автопрефиксер, sourcemap и компрессор (нужно включить в настройках). Для работы должен быть установлен Live Server (предыдущее расширение).

Страница на Marketplace - https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass


Easy LESS

  Препроцессор компилирующий из LESS в CSS

Easy LESS

  Компилирует файл LESS в CSS без установки задачников (gulp, webpack). В настройках доступны автопрефиксер, sourcemap и компрессор сжимающий выходящий файл.

Страница на Marketplace - https://marketplace.visualstudio.com/items?itemName=mrcrowl.easy-less


 


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

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


Работа с Git и Github

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

Git History, GitLens, Git Merger, GitHub Pull Requests

 


RemoteFS

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

remote FS

  Всё что нужно для того чтобы открыть проект находящийся на сервере - это в файле 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).

 

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

Страница на Marketplace - https://marketplace.visualstudio.com/items?itemName=liximomo.remotefs


Для командной разработки

  В редакторе VSCode можно вести совместную разработку. Для этого есть расширение VS Live Share

VS Live Share

 

  Можно расширить функционал совместной разработки и дополнительно накатить звуковой чат и Slack. Для этого Microsoft специально сделал сборку VS Live Share Extension Pack, который установит VS Live Share и все необходимые пакеты

VS Live Share Extension Pack

Страница на Marketplace - https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack


cdnjs

  Это расширение осуществляет поиск и подключение javascript-библиотек на сайте cdnjs.com из командной строки редактора VSCode.

cdnjs

Страница на Marketplace - https://marketplace.visualstudio.com/items?itemName=JakeWilson.vscode-cdnjs


Работа с PDF

vscode-pdf

Просмотр файлов PDF в редакторе VSCode

Страница на Marketplace VisualStudio - https://marketplace.visualstudio.com/items?itemName=tomoki1207.pdf

 

Markdown PDF

Это расширение преобразует файл Markdown в файл pdf, html, png или jpeg.

markdown PDF

  Я всё чаще пишу именно на markdown, так как это самый простой и удобный формат. Потом конвертирую в нужный мне формат через gulp или вот нашёл это расширение для VSCode.

Страница на Marketplace - https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf


 

  Это далеко не все расширения которые которыми я пользуюсь и хотел бы порекомендовать. При появлении времени я обязательно буду дополнять данный список расширений для Visual Studio Code. Если вы тоже знаете какие крутые расширения для VSCode, поделитесь пожалуйста в комментариях. Желательно по возможности и ссылку на него. Всё таки поиск достойных расширений отнимает много времени и можно легко пропустить что то интересное.

Авторизация

Войти через соцсети: