Самые полезные расширения для visual studio code
В виду того, что мне срезали подписку на Medium решил поддерживать отечественные IT ресурсы. Попробую кидать интересные статьи с переводом на русском, а правообладатели пусть сами разбираются, я честно платил за подписку.
На текущий момент VS Code остается средой разработки, которая доступна в период санкций, когда JetBrains отказался продавать лицензии, про Visual Studio даже не узнавал. Сам использую VS Code много лет в разных стеках. VS Code предоставляет возможности разработки практически во всех направлениях: веб-разработка, мобильные приложения, часто встречаются приложения для встраиваемых систем. Ниже перечислены наиболее популярные расширения, которые облегчают разработку приложений.
При всем изобилии тем в VS Code тема Atome One Dark наиболее популярная, потому-что имеет наиболее удачный контраст и прекрасно выглядит.
Тама в магазине VS Code Пример React приложения
Установка ext install akamud.vscode-theme-onedark
Популярное расширение для иконок. Кому как красивее и удобнее решайте сами.
Установка ext install emmanuelbeziat.vscode-great-icons
Очень простое, но очень полезное расширение. Помогает при удалении нескольких пустых строк. Позволяет удалить все пустые строки клавишами Ctrl-Backspace для Windows, Linux и Alt+Backspace для Mac . Чтобы удалить строки снизу служит комбинация клавиш Ctrl+] . Поддерживает удаление в режиме мультикурсор.
Удаление нескольких строк комбинацией клавиш Ctrl-Backspase
Функция Smart Backspace позволяет выравнивать код при нажатии клавиши Backspace.
Функция Smart Backspace
ext install jasonlhy.hungry-delete
Простое и удобное расширение для веб-разработки. Позволяет запускать статические веб-страницы в режиме локального сервера. Поддерживается перезагрузка страниц при изменении исходных файлов.
Перезагрузка страницы при изменении исходных файлов Кнопка быстрого доступа в строке состояния
Поддерживает команды контекстного меню в Проводнике и в редакторе кода.
ext install ritwickdey.LiveServer
Расширение, похожее на Hungry Delete, но в отличии от него запускается через меню команд.
ext install albert.TabOut
Сниппеты
Если вы никогда не использовали сниппеты, стоит о них подумать, они делают нашу жизнь легче и упрощают работу с часто используемыми блоками.
Сниппеты - небольшие преднастроенные строки, которые позволяют заполнять большие куски кода. Удобно использовать в React компонентах, где большое количество повторяемого шаблонного кода.
Сниппеты для React
Установка React сниппетов ext install runningcoder.react-snippets
Список расширений, который может заинтересовать
Vim - эмулятор Vim редактора в VS Code.
Auto Close Tag - автоматически добавляет закрывающие теги для HTML/XML.
Git Graph - визуальное представление для веток Git репозитория. Проще один раз увидеть.
Представляем вашему вниманию подборку 15 расширений для Visual Studio Code (VSCode), которые пригодятся программисту любого уровня.
Для тех, кто не в курсе, Visual Studio Code – это бесплатный и кроссплатформенный текстовый редактор, созданный компанией Microsoft. Он достаточно быстро стал «народным любимцем», ввиду его высокой производительности и обильного функционала.
Как и большинство современных IDE, VSCode имеет перманентно развивающийся рынок устанавливаемых дополнений, расширяющих исходные возможности редактора. Для того, чтобы разобраться, на какие именно плагины стоит обратить внимания, ресурс «Библиотека программиста» представляет вашему вниманию подборку 15 плагинов для Visual Studio Code, которые будут полезны любому программисту.
По умолчанию, Visual Studio Code не предусматривает возможности открывать файл в любом выбранном браузере. Данное расширение не только добавляет функцию Открыть в браузере по умолчанию, но также позволяет открывать файлы в любом имеющемся у вас браузере (Firefox, Chrome, IE).
[video width="768" height="372" mp4="https://media.proglib.io/wp-uploads/2017/07/open-in-browser.mp4"][/video]
Quokka – это утилита, дающая вам возможность предварительного просмотра результата выполнения того или иного куска кода. Она выдает вам результаты выполнения функций и посчитанные значения переменных. Расширение легко настроить, и оно запускается из того же ящика, что и JSX или Typescript проекты.
[video width="768" height="348" mp4="https://media.proglib.io/wp-uploads/2017/07/quokka.mp4"][/video]
Быстро вставляйте случайные данные при помощи знаменитой библиотеки Javascript Faker. Вы можете вставлять произвольные имена, адреса, изображения, телефонные номера и даже отрывки известных литературных произведений. Каждая категория имеет свои подкатегории, что позволяет вам выбрать наиболее подходящий вариант.
[video width="768" height="388" mp4="https://media.proglib.io/wp-uploads/2017/07/faker.mp4"][/video]
С этим плагином вы можете отслеживать определения CSS классов и id таблиц стилей. Для этого просто достаточно кликнуть правой кнопкой мыши на селектор в вашем HTML файле и воспользоваться функцией Перейти к определению или Подсмотреть определение.
[video width="768" height="322" mp4="https://media.proglib.io/wp-uploads/2017/07/css-peek.mp4"][/video]
Это расширение упрощает работу с HTML файлами, избавляя вас от необходимости прописывать теги head и body вручную. Просто наберите в пустом файле html, нажмите на Tab, и VS Code сам сгенерирует шаблон вашего документа.
[video width="768" height="422" mp4="https://media.proglib.io/wp-uploads/2017/07/html-boilerplate.mp4"][/video]
На сегодняшний день, Prettier – самый популярный редактор кода в мире веб-разработки. Он позволяет приводить код, написанный несколькими людьми, к единообразному виду. В настройках Prettier можно установить автоматический запуск, что позволяет моментально форматировать JS и CSS документы.
[video width="1300" height="796" mp4="https://media.proglib.io/wp-uploads/2017/07/prettier.mp4"][/video]
Небольшой плагин, который даёт вам возможность получать краткую справку об используемых в CSS цветах. Наведя курсор на название цвета, вы можете увидеть, как этот цвет выглядит, а также получить всю информацию о трансляции данного цвета в разные форматы (hex, rgb, hsl и cmyk).
[video width="768" height="366" mp4="https://media.proglib.io/wp-uploads/2017/07/color-info.mp4"][/video]
Это расширение привносит в VS Code возможность работать с SVG файлами. С помощью SVG Viewer, вы можете редактировать SVG файлы, конвертировать их в PNG и создавать data URL схемы.
[video width="768" height="390" mp4="https://media.proglib.io/wp-uploads/2017/07/svgviewer.mp4"][/video]
[video width="768" height="378" mp4="https://media.proglib.io/wp-uploads/2017/07/todo-highlight.mp4"][/video]
Небольшое дополнение, добавляющее в VS Code поддержку около 20 популярных шрифтов, в частности, Font Awesome, Ionicons, Glyphicons, and Material Design.
[video width="768" height="348" mp4="https://media.proglib.io/wp-uploads/2017/07/icon-fonts.mp4"][/video]
Minify является утилитой, предлагающей массу возможностей по оптимизации и сжатию размеров кода. Minify работает с HTML, JS и CSS файлами и также отлично сочетается с такими плагинами, как uglify-js, clean-css и html-minifier.
[video width="768" height="370" mp4="https://media.proglib.io/wp-uploads/2017/07/minify.mp4"][/video]
Так, пришло время немного расслабиться. Если все рассматриваемые до этого расширения были ориентированы на какое-то практическое применение, то эта утилита позволяет немного побаловаться с регистрами. По умолчанию, VS Code имеет только функции приведения к верхнему и нижнему регистру, но, установив себе Change Case, вы получите доступ к довольно обширному количеству регистров, к примеру, змеиный регистр, верблюжий регистр и прочее.
[video width="768" height="328" mp4="https://media.proglib.io/wp-uploads/2017/07/change-case.mp4"][/video]
Очень полезный инструмент, который позволяет вам работать с регулярными выражениями прямо в текстовом редакторе. Он принимает на вход два регулярных выражения и выдаёт результаты сравнения. Принцип работы чем-то похож на RegExr.
[video width="768" height="364" mp4="https://media.proglib.io/wp-uploads/2017/07/regex-previewer.mp4"][/video]
VS Code поддерживает большое количество языков и Фреймворков, но далеко не все. Если по каким-то причинам, используемая вами технология не попала в этот список, то вы всегда можете скачать нужное вам расширение с поддержкой таких приятных фич, как автозаполнение, правильные отступы и тому подобное.
Вот и дошли до самого вкусного. Ведь вы собираетесь много работать в VS Code, так почему бы для начала не сделать его красивым? Есть тонны отличных тем, но мы отобрали 4 фаворита:
Думаете, что уже установили на свой VS Code все, что нужно? Вы просто еще не видели эти расширения! Срочно смотрите и устанавливайте!
Visual Studio Code (известный также как VS Code) – легкий, но мощный кроссплатформенный редактор исходного кода. Великолепно подходит для веб-разработки. У него есть множество встроенных плюшек вроде поддержки TypeScript и дебаггера Chrome. А кроме того – триллионы плагинов, с которыми любая сфера программирования станет намного проще.
Представляем топ-лист расширений для JavaScript разработчика!
1. Project Snippets
Великолепный плагин Project Snippets основан на встроенной в VSCode фиче user snippets. Эта удобная возможность позволяет сохранять фрагменты кода, а затем повторно их использовать – в текущем или новом проекте.
Как опытный JavaScript разработчик вы непременно обнаруживали, что набираете один и тот же код не в первый раз. Например, что-то подобное для React-проекта на TypeScript:
Этот кусок можно просто поместить в набор пользовательских сниппетов. Тогда вместо того, чтобы в следующий раз писать его с нуля (или копировать из другого проекта и вставлять в новый), вы просто введете кастомный префикс этого фрагмента.
Пройдите по цепочке File > Preferences > User Snippets > New Global Snippets File . Редактор предложит вам ввести имя нового сниппета – typescriptreact.json . Сразу после ввода откроется новый json-файл, который вы можете использовать для React-приложений на TypeScript.
Сниппет будет выглядеть вот так:
Теперь воспользуемся им в деле. Создайте новый TypeScript файл с расширением .tsx , напечатайте в нем префикс, соответствующий только что созданному фрагменту – rsr . Умный редактор сразу же предложит вам сгенерировать сниппет. Для его вывода вы можете воспользоваться выпадающим меню или нажать клавишу tab .
Проблема в том, что этот фрагмент будет сохранен для всех ваших проектов. Иногда это очень здорово (для каких-нибудь базовых шаблонов). Но зачастую проекты по-разному сконфигурированы и для них требуются разные сниппеты.
Ваш глобальный файл настройки typescriptreact.json может выглядеть вот так:
Это становится проблемой, когда необходимо различать разные варианты. Если вы работаете над проектом с другой файловой структурой, в котором компонент Link лежит по пути components/Link , созданный сниппет уже не подойдет.
Обратите внимание, что в трех шаблонах border test значения свойства обернуто в одинарные кавычки: border: '1px solid red' . В JavaScript это абсолютно правильно, но что если в своем проекте вы используете styled-components? Такой синтаксис вам не подойдет, ведь styled-components работают с обычным CSS.
Вот здесь и восходит звезда расширения project snippets для VSCode. Оно дает вам возможность создавать фрагменты не только на глобальном уровне, но и на уровне проекта/рабочей области, чтобы они не мешали друг другу.
2. Better Comments
Вероятно вы придерживаетесь лучших практик программирования и пишете полезные комментарии к своему коду. Наверняка бывали моменты, когда спустя долгое время и несколько итераций разработки вы не могли найти старые заметки.
Сделайте ваши комментарии заметнее и понятнее с помощью плагина Better Comments, который раскрасит их в соответствии со значением:
Теперь вы легко можете оставить своей команде предупреждение или задать вопрос с помощью символов ! и ? – они точно будут замечены.
3. Bracket Pair Colorizer
Этот плагин вам совершенно необходим! Bracket Pair Colorizer всего лишь раскрашивает разные пары скобок разными цветами – но эта мелочь потрясающе влияет на вашу продуктивность!
Программирование на JavaScript должно быть приятным, а не раздражающим.
4. VSCode Material Theme
Material Theme – легендарная тема оформления, доступная и для вашего VSCode.
Вполне возможно, что это лучшая из всех когда-либо существовавших тем – установите ее прямо сейчас!
5. @typescript-eslint/parser
Если вы активно используете TypeScript в разработке, то пора задуматься о переносе конфигураций TSLint в ESLint + TypeScript, ведь очень скоро поддержка этого инструмента будет прекращена.
Проекты постепенно готовятся к принятию @typescript-eslint/parser и связанных с ним модулей.
С новыми настройками вы по-прежнему можете использовать большинство правил ESLint. Сохраняется совместимость с Prettier.
6. Stylelint
Если вы еще не используете расширение stylelint для VSCode – какие у вас могут быть оправдания? Срочно установите, ведь оно:
- помогает избежать ошибок в CSS;
- контролирует соблюдение соглашений о стиле;
- работает с Prettier;
- понимает ванильный CSS, а также препроцессоры SCSS/Sass/Less;
- поддерживает различные плагины, созданные сообществом.
7. Markdownlint + docsify
Многие разработчики любят делать заметки в markdown-файлах: это простой и понятный формат, его легко и писать, и читать.
Существует множество инструментов, которые делают процесс работы с markdown-разметкой еще приятнее. В их числе markdownlint, который следит за форматированием файлов.
А для генерирования документации используйте плагин docsify, который поддерживает Markdown.
8. TODO Highlight
9. Import Cost
Плагин Import Cost сообщает вам, сколько весит модуль, который вы собираетесь импортировать в проект.
Этот инструмент особенно полезен в первый период использования. Некоторое время (и много написанного кода) спустя, вы уже запоминаете размер основных пакетов. Тем не менее, попробуйте, это может оказаться хорошим опытом.
10. Highlight Matching Tag
Признавайтесь, часто теряетесь в веренице тегов? Highlight Matching Tag будет искать потерянный закрывающий дескриптор за вас.
11. vscode-spotify
Многие программисты предпочитают работать под музыку и часто используют для прослушивания композиций сервис Spotify. Когда нужно переключить песню, приходится отвлекаться от редактора (иногда даже сворачивать его), а потом бывает сложно вновь вернуться в прерванный на секунду рабочий процесс.
Плагин vscode-spotify позволяет использовать Spotify прямо внутри вашего VSCode! Теперь вы можете управлять своим плеером, не покидая редактора.
12. GraphQL for VS Code
GraphQL стремительно набирает популярность, и мы всё активнее используем его в JavaScript-проектах. Пора бы уже подумать об установке GraphQL for VSCode в ваш редактор.
Плагин умеет подсвечивать синтаксис, проверять и автоматически дополнять код.
13. Indent-Rainbow
Плагин Indent-Rainbow структурирует ваш код, выделяя отступы разными цветами. Теперь здесь намного проще ориентироваться:
14. Color Highlight
Очень удобный плагин, который находит внутри кода обозначения цветов в разном формате и соответственно подсвечивает их.
15. Color Picker
Это расширение для VS Code предлагает вам графический интерфейс для выбора нужного цвета.
16. REST Client
Возможно, плагин REST Client не покажется вам супер полезным на первый взгляд по сравнению, например, с привычным Postman. Однако, поиграв с ним немного, JavaScript разработчик уже не сможет жить по-прежнему.
Это замечательный инструмент для тестирования API. Вы можете просто создать новый файл и написать в нем:
Вы даже можете передать GET-параметры или тело POST-запроса, добавив всего пару строк кода:
Этот фрагмент соответствует POST-запросу с параметрами .
Это лишь крошечная часть возможностей REST Client. Вы можете узнать о нем больше, если интересно.
17. Settings Sync
Терпеть не можете вручную прописывать настройки ваших плагинов? На помощь вам спешит – вот неожиданность! – еще один плагин – Settings Sync.
Все, что нужно, это аккаунт на gist/GitHub. Каждый раз, когда вы хотите сохранить свои настройки – включая горячие клавиши, сниппеты, расширения – просто нажмите SHIFT+ALT+U , и они будут загружены в вашу учетную запись. При следующем входе в систему или переносе на другой компьютер, вы можете вновь загрузить их комбинацией SHIFT+ALT+D .
18.Todo Tree
Расширение Todo Tree для VS Code соберет по вашей команде все задачи, разбросанные по приложению, в одно дерево в левой части рабочей области редактора.
19. Toggle Quotes
Toggle Quotes – забавная утилита, позволяющая переключаться между разными типами кавычек. Это особенно удобно при использовании строковых интерполяций.
20. Better Align
Вы можете выровнять ваш код без предварительного выделения с помощью плагина Better Align. Просто поместите курсор в нужное место, откройте палитру команд ( CTRL+SHIFT+P ) и вызовите команду Align .
21. Auto Close Tag
Эта небольшая полезная утилита закрывает за вами теги – ей не трудно.
22. Sort Lines
Специально для перфекционистов, которые не смогут уснуть, если массивы строк в их программе не отсортированы по алфавиту! Плагин Sort lines для VS Code сделает вашу жизнь проще.
23. VS Code Google Translate
Совершенно незаменимая вещь для программиста! Если вы не знаете, как правильно назвать переменную или работаете в проекте с поддержкой нескольких языков, обязательно установите VS Code Google Translate. Теперь вы можете переводить, не уходя из редактора.
24. Prettier
Все знают Prettier – это замечательный парикмахер для вашего JavaScript/TypeScript/и т. д. кода.
25. VS Code Material Icon Theme
Очень крутая тема, которая устанавливает разные иконки для разных типов файлов. Особенно хорошо сочетается с темной темой редактора.
26. IntelliSense for CSS Class Names in HTML
Плагин IntelliSense for CSS class names in HTML обеспечит умное автозавершение для CSS-классов в HTML-коде. Нам этого действительно не хватало!
27. Path Intellisense
Одно из самых полезных расширений VS Code. Path Intellisense умеет автоматически завершать имена файлов, которые вы набираете.
Все, что вам нужно для быстрой работы – от интеграции 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 здорово расширяет его возможности:
- горячие клавиши для инлайновых стилей (полужирный шрифт, курсив, подчеркивание);
- автоматическое создание оглавления из заголовков;
- форматирование математических формул;
- автодополнение;
- поддержка улучшенного варианта разметки Github Flavoured Markdown.
Лучшая фича плагина – компиляция 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.
Все от опытных разработчиков до начинающих джунов хотят упростить себе жизнь. Правильные инструменты могут помочь с этим.
Если в качестве среды разработки вы используете Visual Studio Code, вам повезло. Вы можете установить кучу плагинов и облегчить себе жизнь по максимуму.
Плагины очень влияют на продуктивность и подход к работе. Именно это мы обсудим ниже.
Все плагины бесплатны и доступны на Visual Studio Marketplace.
Visual Studio Intellicode
Это самый часто скачиваемый плагин для Visual Studio (более 3 200 000 скачиваний). И, на мой взгляд, самый полезный.
Этот плагин создан, чтобы помогать разработчикам писать код. Он поддерживает огромное количество языков программирования. Visual Studio Intellicode использует методы машинного обучения. Он ищет и анализирует шаблоны, используемые в многочисленных проектах GitHub с открытым исходным кодом, и предлагает их вам, когда вы пишите код.
Статья переведена при поддержке компании EDISON Software, которая разрабатывает приложения и сайты, а также инвестирует в стартапы.
Git Blame
Время от времени вам нужно знать, кто написал определенный кусок кода. Git Blame вам в помощь. Git Blame сообщает вам, когда и кем редактировалась каждая строка файла в последний раз.
Это полезная информация, особенно когда вы работаете с ветвями функций. Так как Git Blame сообщает вам, в каком коммите (то есть в какой ветке) была изменена строка кода, вы знаете, какой тикет вызвал это изменение. Это поможет вам лучше понять причины изменений.
Prettier
Prettier — один из лучших плагинов для разработчиков, которым необходимо следовать четко сформулированному набору правил при разработке. Это замечательный плагин, который позволяет вам использовать пакет Prettier. Prettier — отличный инструмент для структурирования кода.
Prettier совместим с JavaScript, TypeScript, HTML, CSS, Markdown, GraphQL и другими современными инструментами и позволяет правильно форматировать код.
JavaScript (ES6) Code Snippets
Каждый разработчик, который хоть немного старается быть в теме, вероятно, работал с одним из стеков JavaScript. Неважно какой фреймворк вы предпочитаете. Общий код в разных проектах должен упростить вам жизнь.
The JavaScript (ES6) code snippets — удобный плагин, который предоставляет некоторые очень полезные фрагменты кода JavaScript для ленивого разработчика. Он связывает стандартные вызовы функций с горячими клавишами. Как только вы с этим разберетесь, ваша продуктивность увеличиться в разы.
Как вы, наверное, уже догадались, этот плагин помогает разработчикам, которые работают с таблицами стилей. Как только вы начнете создавать таблицы стилей для своего приложения, вы определенно захотите использовать этот плагин. Sass поддерживает подсветку синтаксиса, автозаполнение и форматирование.
Path Intellisense
Path Intellisense — верный способ увеличить вашу продуктивность во время написания кода. Если вы работаете над многими проектами одновременно и используете слишком много разных технологий, вам наверняка понадобится удобный инструмент, который сможет запомнить для вас имена путей файла. Этот плагин сэкономит вам кучу времени, которое в противном случае было бы потрачено впустую на поиск нужного каталога.
Path Intellisence задумывался как простое расширение для автозаполнения имен файлов. Но с тех пор он стал ценным помощником в наборе инструментов большинства разработчиков.
Debugger for Chrome
Необязательно уходить из Visual Studio Code, если нужно дебажить JavaScript. Debugger for Chrome, выпущенный Microsoft, позволяет отлаживать исходные файлы непосредственно в Visual Studio Code
ESLint
Плагин ESLint встраивает ESLint в Visual Studio Code. ESLint это инструмент, который статически анализирует ваш код, чтобы быстро находить проблемы.
Большинство проблем, обнаруженных ESLint, могут быть исправлены автоматически. Исправления ESLint учитывают синтаксис, и поэтому вы не столкнетесь с ошибками, вызванными традиционными алгоритмами поиска и замены. Кроме того, ESLint гибко настраиваемый.
SVG Viewer
Расширение SVG Viewer добавляет ряд утилит для работы с SVG в Visual Studio Code. Этот плагин позволяет отображать файлы SVG и просматривать их внешний вид, не выходя из редактора. Кроме того, этот плагин позволяет конвертировать файлы в PNG и создавать URI схемы данных.
Themes
Темы — последние в списке, но не по значимости. Поскольку вы будете смотреть на свой редактор каждый день, почему бы не сделать его максимально красивым? Существует множество плагинов для настройки, которые меняют цветовую схему и значки на боковой панели. Некоторые популярные темы доступны бесплатно: One Monokai, One Dark Pro и Material Icon.
Читайте также: