лучшие расширения для visual studio code
10 расширений для VS Code, без которых я не могу программировать
VS Code — мой любимый редактор кода. Это — самый популярный из существующих редакторов, возможности которого можно расширять практически до бесконечности. И, что удивительно, разработала его компания Microsoft. Я полагаю, что ни один из других редакторов и ни одна из других IDE не может дать разработчику хотя бы половину того, что способен дать ему VS Code. Одна из сильных сторон VS Code — это система расширений. Она позволяет создавать расширения буквально на все случаи жизни. Хочу рассказать вам о моём топ-10 расширений для VS Code.
1. Beautify
Расширение Beautify позволяет форматировать html-, js-, css-, JSON- и sass-код. Параметрами форматирования можно управлять. Это расширение является надстройкой над стандартной системой js-beautify и позволяет разработчику форматировать код именно так, как ему нужно.
2. Better Comments
Расширение Better Comments позволяет расширить возможности по работе с комментариями. В частности, оно позволяет делить комментарии на категории. Это могут быть уведомления, запросы, списки дел, примечания.
Использование Better Comments
3. Bookmarks
Расширение Bookmarks — это настоящий спасательный круг для программистов. Особенно для тех, которые потерялись среди тысяч строк кода. Это расширение позволяет прикреплять к строкам кода закладки. Если у строки кода есть закладка — к этой строке можно легко перейти, воспользовавшись списком закладок.
4. Bracket Pair Colorizer 2
Расширение Bracket Pair Colorizer 2 позволяет раскрашивать скобки, что облегчает нахождение пар открывающих и закрывающих скобок. Это очень полезно в тех случаях, когда приходится работать с вложенными друг в друга программными конструкциями.
Пары скобок выделены цветами
5. Format in Context Menus
Расширение Format in Context Menus позволяет форматировать файлы, выделяя их в боковой панели и вызывая команду контекстного меню. Это особенно удобно в тех случаях, когда имеется множество файлов, которые нужно отформатировать, но при этом в имеющемся окружении нет поддержки средств для форматирования и линтинга кода.
Работа с Format in Context Menus
6. Git Graph
Расширение Git Graph позволяет просматривать структуру репозитория и, пользуясь этой структурой, выполнять различные операции. Это расширение поддаётся тонкой настройкой и обладает множеством возможностей. Вероятно, для того, чтобы как следует его описать, понадобится целая отдельная статья.
Работа с Git Graph
7. GitLens
Расширение GitLens помогает выяснять авторство кода с использованием аннотаций git blame и линз. Это расширение, кроме прочего, позволяет очень удобно просматривать содержимое репозиториев и узнавать полезные сведения о коде.
8. Indent Rainbow
Расширение Indent Rainbow позволяет раскрашивать отступы, выделяя разными цветами отступы разных уровней. Это особенно полезно при работе с глубоко вложенными конструкциями в языках наподобие Python.
9. Path Intellisense
Расширение Path Intellisense оснащает редактор возможностями по автозавершению путей к файлам. Хотя VS Code поддерживает автозавершение путей и без расширений, эта возможность ограничена только HTML-, CSS- и JavaScript-файлами. Благодаря данному расширению автозавершением путей можно пользоваться при работе с любыми файлами и любыми языками.
Работа с Path Intellisense
10. Total Lines
Расширение Total Lines — это маленький удобный инструмент, который выводит в статус-баре сведения о количестве строк в открытом файле. Это — приятное дополнение к моей коллекции расширений.
А какими расширениями для VS Code пользуетесь вы?
Напоминаем, что у нас продолжается конкурс прогнозов, в котором можно выиграть новенький iPhone. Еще есть время ворваться в него, и сделать максимально точный прогноз по злободневным величинам.
9 полезных плагинов VS Code для вёрстки
Visual Studio Code — один из самых популярных редакторов кода. Многие разработчики предпочитают его, так как он удобен в использовании и содержит множество полезных расширений, с помощью которых легко оптимизировать работу.
Полезные плагины помогают допускать меньше ошибок при написании кода, да и значительно сокращают время работы. Чтобы установить расширения, необходимо перейти во вкладку «Extensions» и с помощью поиска найти нужный плагин.
Сделали подборку популярных и полезных плагинов VS Code.
Emmet
Много разных фишек, с которыми можно разобраться и ускорить процесс работы. Поддержка emmet встроена прямо в редактор, устанавливать не нужно.
Material Theme
Приятная тема для редактора с разными акцентными цветами.
Live Server
Чтобы сразу увидеть результат работы. Нужно навести на строчку кода, нажать на правую кнопку мыши, выбрать «Open with Live Server» и в браузере отобразится страница, которая автоматически будет перезагружаться.
Это очень удобно, так как любые изменения будут отображаться без обновления страницы. Не забывайте отключать плагин с помощью «Stop Live Server»
CSS Peek
Показывает всплывающее окошко с CSS во время работы над HTML. Это упрощает работу и позволяет не искать нужное свойство среди множества классов в большом CSS-файле.
Bracket pair colorizer
Окрашивает открывающие и закрывающие скобки в определённые цвета, что минимизирует количество ошибок и позволяет быстрее разобраться в коде.
Prettier — code formatter
Приводит любой код в нормальный вид за считанные секунды. Комбинация Ctrl+Shift+P отформатирует документ и задаст структуру коду.
Auto rename tag
Удобен для переименования тегов в HTML. Если тег повторяется, при замене одного с помощью плагина, все другие будут переименованы автоматически.
Path autocomplete
Показывает возможный путь к файлу в кавычках. Не нужно искать папку вручную, путь будет предложен автоматически.
HTML CSS Support
Если вы используете много классов и тегов, могут возникнуть ошибки при их написании. Плагин автоматически дополняет название ID или HTML-атрибута для определений, найденных в рабочей области, на которые ссылается link.
Используйте эти плагины на курсе по вёрстке сайтов
Запишитесь на ближайший поток курса «HTML и CSS. Профессиональная вёрстка сайтов», чтобы попробовать всё на практике.
Нажатие на кнопку — согласие на обработку персональных данных
20 расширений VS Code, которые вам понравятся
Перевод статьи «20 VS Code Extensions You’ll Actually Use».
Я просмотрел несколько статей, посвященных расширениям VS Code. Должен сказать, не все эти расширения произвели на меня хорошее впечатление, однако я все же отобрал несколько и пополнил список используемых мной плагинов.
Я думаю, эти расширения будут полезны для любого фронтенд-разработчика, который хочет по максимуму использовать возможности Visual Studio Code. Некоторые из расширений в моем списке относятся к самым рекомендуемым, так что они наверняка у вас уже есть, но какие-то, возможно, будут для вас новостью.
Легкость чтения
Beautify – облегчает чтение HTML, CSS и JS путем де-минимизации и применения подходящих отступов в вашей ужасной разметке.
Better Comments – создание более дружественных к человеку комментариев в вашем коде. Я использую его все время. В нашей команде разработчиков это обязательное расширение.
Bookmarks – помогает перемещаться по вашему коду, легко и быстро передвигаясь между важными позициями. Я использую это расширение в связке с MetaGo, чтобы не задействовать мышь при написании кода.
MetaGo – для быстрого перемещения курсора и выделения при помощи клавиатуры. Это расширение навсегда изменило мой подход к использованию VS Code. Серьезно.
Guides – теперь вам не нужно закрывать и открывать заново все элементы для определения их вложенности. Этот инструмент особенно хорошо работает с уже упомянутым Beautify и Rainbow Brackets, о котором говорится ниже.
Rainbow Brackets – подсвечивает текущий набор скобок, в котором вы находитесь, а для лучшего определения местоположения еще и расцвечивает прочие скобки в другие цвета. Это прекрасное расширение VS Code для JS-разработчиков.
Image Preview – предоставляет возможность предпросмотра изображения при наведении курсора. Это позволяет легко проверить, на правильное ли изображение поставлена ссылка.
Более быстрое написание кода
CSS Peek – вдохновением для этого расширения послужила похожая фича Brackets – CSS Inline Editors. Теперь одна из моих любимых функций Brackets есть и в VS Code.
Stylelint – мы контролируем наш JS на соответствие стандартам, так почему же не делать того же с LESS/SASS/CSS? Отличный инструмент для быстрой чистки небрежно написанного CSS.
Live Sass Compiler – конечно, у вас есть Gulp, Webpack, NPM, Grunt, но иногда вам нужно компилировать/транспилировать ваши SASS/SCSS файлы в файлы CSS в режиме реального времени, с «живой» перезагрузкой браузера. Для этого и нужен Live Sass Compiler.
Live Server – лучший локальный сервер разработки с функцией живой перезагрузки для статических и динамических страниц (даже PHP!).
Version Lens – обновление зависимостей до последней версии для определенного package.json.
Красивые скриншоты
Polacode – подсвечивает код и делает действительно красивый снимок с цветами вашей темы. Отлично подходит для создания руководств или документации, где вы хотите приложить примеры кода.
Множественные экземпляры
Settings Sync – позволяет синхронизировать настройки, сниппеты, темы, иконки файлов, запуск, сочетания клавиш, рабочие окружения и расширения между несколькими экземплярами VS Code. Я использую это расширение для синхронизации всего вышеперечисленного на моем ноутбуке, рабочем и домашнем компьютерах. А делается все с помощью всего двух команд.
Надеюсь, эти расширения пригодятся вам в вашей ежедневной работе с VS Code! Если знаете и другие полезные плагины, поделитесь в комментариях.
10 лучших VS Code-расширений 2018 года для фронтенд-разработчиков
Visual Studio Code, вероятно, можно назвать лучшим современным редактором кода. Если вы пока с ним не работаете — то вам, по крайней мере, стоит на него взглянуть. Для VS Code написано великое множество расширений, которые размещают в каталоге Marketplace, удобный доступ к которому организован из самого редактора.
Существуют расширения для отладки и форматирования кода, расширения, облегчающие работу с различными платформами (вроде Heroku, GitHub, Docker, Azure) и технологиями. В Marketplace можно найти темы для редактора, линтеры, средства, облегчающие ввод повторяющихся фрагментов кода, и многое другое.
Автор материала, перевод которого мы публикуем сегодня, отобрал 10 лучших VS Code-расширений, предназначенных преимущественно для тех, кто занимается фронтенд-разработкой, то есть, работает с HTML, CSS, JavaScript и с различными веб-фреймворками.
Предварительные сведения
Если раньше вы не работали с VS Code, но хотите попробовать этот редактор — загрузить его можно здесь. А вот, если интересно, материал, в котором продемонстрированы его возможности.
После загрузки и установки VS Code откройте панель расширений.
Далее, воспользовавшись полем поиска, найдите интересующее вас расширение, изучите сведения о нём, и, если решите что оно вам нужно, установите его. Средства поиска расширений выглядят так, как показано на рисунке ниже.
Поиск расширений для VS Code в Marketplace
Теперь поговорим о расширениях.
Live Server
Расширение Live Server
Это замечательное расширение предназначено для создания локального сервера, используемого в ходе разработки для размещения на нём статических и динамических страниц. После установки этого расширения на панели задач появится кнопка Go Live, которая позволяет запускать сервер. Нажатие этой кнопки в ходе редактирования HTML-страницы приведёт к тому, что эта страница будет открыта в браузере. Сервер поддерживает интерактивную перезагрузку страниц, которая производится после внесения изменений в код и сохранения соответствующих файлов.
Live Sass Compiler
Расширение Live Sass Compiler
Это расширение, в интерактивном режиме, компилирует SCSS-файлы в CSS-файлы. Делается это очень быстро. Предварительный просмотр результатов применения скомпилированных стилей в браузере можно запустить кнопкой Watch my sass в панели задач. Это расширение, как и только что рассмотренное, поддерживает интерактивную перезагрузку материалов.
Javascript (ES6) Code Snippets
Расширение Javascript (ES6) Code Snippets
Это расширение примечательно тем, что у него имеется более 2 миллионов загрузок, и, судя по всему, популярность его со временем лишь растёт. Оно даёт в распоряжение разработчика программные конструкции (сниппеты), подходящие для использования в файлах следующих типов:
Это — официальное расширение Node Package Manager (npm) для VS Code. Оно всемерно облегчает работу с файлом package.json. В частности, оно выводит предупреждения об отражённых в файле, но не установленных зависимостях, равно как и о тех, которые установлены, но в package.json не зарегистрированы. Оно помогает выявлять пакеты, версии которых не соответствуют правилам, заданным в package.json, и предоставляет в распоряжении разработчика удобные средства для запуска команд npm.
ESLint
Prettier
Это весьма популярное расширение может похвастаться почти четырьмя миллионами загрузок. Оно помогает форматировать JavaScript-код, что позволяет поддерживать единообразие кодовой базы и улучшает читабельность программ. В Marketplace есть похожее расширение, Beautify, тоже довольно популярное.
CSS Peek
Расширение CSS Peek
Это полезное расширение пригодится при работе с разметкой страниц, идентифицируя и выводя, на основании имён классов и идентификаторов элементов, применённые к ним стили. Оно помогает экономить время, избавляя разработчика от необходимости постоянно переключаться между HTML и CSS-файлами. Конечно, подобные задачи можно решать, просматривая соответствующие файлы в режиме разделения экрана, но работать в таком стиле нравится далеко не всем.
Angular 6 snippets
Расширение Angular 6 snippets
Это — официальное расширение, предлагающее разработчикам сниппеты для Angular 6. Соответствующий код следует руководству по стилю Angular, использование этого расширения ускоряет процесс разработки Angular-проектов, в частности, за счёт автодополнения кода. Оно поддерживает TypeScript, синтаксис сервис-воркеров, RxJS, ngRx и даже Angular Material. Если вы разрабатываете в VS Code Angular-приложения и ещё не пользуетесь этим расширением, то вам, определённо, стоит на него взглянуть.
Vetur
Это — официальное Vue.js-расширение для VS Code с впечатляющим количеством загрузок, которых у него более 5 миллионов. Оно предназначено для облегчения разработки Vue.js-приложений. Vetur умеет проверять код на наличие ошибок, поддерживает автодополнение и сниппеты.
Debugger for Chrome
Расширение Debugger for Chrome
Это — официальное расширение для VS Code, предназначенное для отладки JS-кода средствами Google Chrome. В настоящее время оно является одним из наиболее широко используемых VS Code-расширений.
Итоги
Мы рассмотрели всего десяток расширений для VS Code, а на самом деле их существует очень и очень много. Вполне возможно, исследуя каталог Marketplace, вы найдёте там что-то такое, что покажется вам гораздо более полезным, чем те расширения, о которых шла речь. Однако большинство из них способно оказать огромную помощь любому фронтенд-разработчику. Надеемся, они пригодятся и вам.
Если тема расширений для VS Code вам интересна — вот ещё один наш материал о них, ориентированный на JS-разработчиков. Публикуя тот материал, мы задавали читателям вопрос о том, какими расширениями они пользуются. Тогда оказалось, что это — Code Outline, Todo Tree и GitHub. Сегодня, уважаемые читатели, мы хотим задать вам тот же вопрос. Какие расширения для VS Code вам нравятся?
ТОП-10 расширений Visual Studio Code для удобной разработки
Все, что вам нужно для быстрой работы – от интеграции Docker и Git до поддержки Markdown и XML. Что еще умеет Visual Studio Code?
VS Code – это не просто текстовый редактор. Благодаря встроенным возможностям и огромному количеству расширений он превратился в полноценную IDE для проектов различной сложности. Сохраняя гибкость и легкость, он позволяет настраивать все, что вам необходимо.
Поддержкой множества языков уже давно никого не удивишь – любой редактор это умеет. Самые ценные возможности инструмента не связаны непосредственно с любимым вами языком программирования. Это работа с репозиториями, различными форматами документов и данных, комфортный процесс разработки.
Среди бесчисленных плагинов для Visual Studio Code мы выбрали очередной ТОП-10. Возможно, вы еще не используете их.
Для визуализации разметки
HTML Preview
Иногда для комфортный работы требуются очень простые вещи. Например, плагин HTML Preview, который умеет показывать, как будет выглядеть HTML, который вы пишете.
Инструмент больше подходит для фрагментов кода, а не для целых страниц с подключенными таблицами стилей. Впрочем и с этой задачей он справится, если все внешние ресурсы доступны.
Предварительный просмотр веб-страницы при редактировании HTML-кода с плагином HTML Preview.
AsciiDoc
90% разработчиков терпеть не могут писать документацию к своим проектам. Чтобы сделать это важное занятие немного более приятным, используйте профессиональные инструменты, например, плагин AsciiDoc. Вы пишете и сразу видите результат в режиме реального времени с подсветкой синтаксиса, кучей сниппетов и поддержкой символов.
Все работает на JavaScript, но при желании можно перейти на Ruby-движок.
Редактирование файлов AsciiDoc с подсветкой синтаксиса и просмотр в режиме реального времени.
Markdown All in One
Markdown – это, пожалуй, лучший выбор для README-файлов и простой документации. Visual Studio Code поставляется с базовой поддержкой этого формата, но плагин Markdown All in One здорово расширяет его возможности:
Лучшая фича плагина – компиляция Markdown в достаточно чистый HTML-код.
Редактирование и предварительный просмотр формата Markdown с плагином Markdown All in One.
reStructuredText
Несмотря на то, что формат документации reStructuredText по существу является простым текстом с некоторыми стилистическими украшениями, было бы неплохо иметь интерактивный инструмент для работы с ним. Расширение reStructuredText от LeXtudio предоставляет сниппеты и подсветку синтаксиса для документов в этом формате, а также предварительный просмотр и линтинг.
Возможно потребуется установить другие пакеты Python, чтобы получить доступ к полному спектру функций.
Расширение reStructuredText обеспечивает подсветку синтаксиса и предварительный просмотр для популярного формата документации.
XML Tools
XML можно любить или ненавидеть (что более вероятно), но как формат данных он все еще живет и процветает. Расширение XML Tools делает работу с XML немного менее печальной и мучительной. Вы можете очистить или минимизировать уродливое форматирование, изучить отдельное древовидное представление документа, запустить запросы XPath и линтинг XQuery и выполнить код прямо в редакторе.
Расширение XML Tools обеспечивает иерархический просмотр дерева XML-документов и предоставляет множество инструментов для работы с этим форматом.
Для распределенных команд
GitLens
Сегодня сложно представить более-менее крупный проект, не использующий систему контроля версий. Чаще всего это Git, и в Visual Studio Code есть его минимальная поддержка прямо из коробки.
Если вы хотите большего, GitLens вам поможет. Плагин добавляет в редактор массу дополнительных возможностей:
Самая удобная фича GitLens доступна непосредственно в поле редактирования. Кликните на любую строчку – вы увидите, кто и когда изменял ее последним.
После недели использования этого плагина вы никогда не захотите расставаться с ним.
Функция line blame в GitLens показывает, кто и когда внес изменения в указанную строчку.
Microsoft Visual Studio Live Share
Для больших распределенных команд разработчиков очень важно правильно организовать совместную работу с кодом в реальном времени. Расширение Microsoft Visual Studio Live Share связывает ваш Visual Studio Code с редакторами ваших коллег. Таким образом в режиме реального времени каждый сотрудник может видеть, над чем работают другие члены команды. Live Share разделяет не только экраны, но и вывод запущенного кода.
К соединению можно подключить также терминалы или локальные веб-приложения.
Редактирование кода с другими членами команды в режиме реального времени с помощью расширения Microsoft Visual Studio Live Share. Обратите внимание на флаг курсора с именем сотрудника.
Для управления проектами
Docker
Docker упростил создание, управление, публикацию и обслуживание программного обеспечения как в облаке, так и on-premise. Расширение Docker для Visual Studio Code от Microsoft делает управление докеризованными проектами немного легче. Вы можете автоматически генерировать Dockerfile для проектов, запускать образы, управлять запущенными контейнерами, подключаться к реестрам и развертывать образы непосредственно в Службе приложений Azure.
Быстрый доступ к образам, реестрам, запущенным контейнерам и консоли в плагине Docker.
Project Manager
Visual Studio Code рассматривает открытую в нем папку как отдельный проект. Чтобы работать с несколькими такими проектами и переключаться между ними обычно нужно создавать несколько экземпляров редактора. Если для вас это неудобно, просто установите расширение Project Manager.
Плагин позволяет переключаться между разными проектами внутри одного экземпляра VS Code. Просто откройте боковую панель и выберите нужный.
Расширение Project Manager позволяет свободно переключаться между проектами в одном экземпляре редактора VS Code.
Для тех, кому мало Visual Studio Code
VSCodeVim
Vim – легендарный хардкорный редактор с огромными возможностями настройки и редактирования текстов. Преданные фанаты вряд ли променяют его на что-то другое, а вот новички, возможно, захотят попробовать Vim на вкус, избежав чрезмерных трудностей.
Расширение VSCodeVim эмулирует основные возможности – настройки и горячие клавиши – редактора Vim внутри Visual Studio Code.
Плагин не поддерживает Vimscript, поэтому любые дополнения, созданные с его помощью придется воссоздавать вручную.
Эмуляция Vim внутри VS Code с помощью плагина VSCodeVim.