Как сделать плагин для vs code

Добавил пользователь Евгений Кузнецов
Обновлено: 04.10.2024

Мы продолжаем знакомиться с возможностями редактора кода Visual Studio Code. Его функциональность можно сильно расширить за счет плагинов. Они устанавливаются через маркет, встроенный в редактор. После переоткрытия VS Code все возможности расширения можно использовать на ряду со стандартными. Плагины, которые мы рассмотрим, не специфичны для разных языков программирования. Здесь собраны общие расширения, которые смогут использовать программисты с разными языковыми предпочтениями.

Напомню, что в прошлый раз мы рассмотрели базовые возможности редактора VS Code и некоторые интересные способы для кастомизации своего рабочего пространства.

Итак, для каждого плагина мы ответим на три вопроса:

Что он делает?
В каких ситуациях можно использовать?
Как использовать?

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

1. VSCode Faker

Генерирует данные для разных категорий. Начиная от имен и гуидов, заканчивая адресами и изображениями.
Пригодится при создании тестовых данных. С одной стороны может показаться, что использовать плагин для придумывания имен будет только очень ленивый человек. С другой стороны, например генерирование номеров телефонов или других данных, соответствующих шаблону, будет происходить гораздо быстрее благодаря Faker.
Все команды плагина можно найти в Command Palette по префиксу ` Faker ` . Выберите тип фейковых данных, и они будут вставлены в код.

2. Bracket Pair Colorized

3. Change Case

Преобразовывает текст в разные регистры. Помимо простых нижнего и верхнего есть и более интересные варианты: Camel или Pascal Case, разделение строк точками или слешами и десяток других вариантов.
Быстро изменить регистр бывает нужно в разных ситуациях; такой инструмент прямо в редакторе очень кстати. Кроме того, он может пригодиться в ходе рефакторинга, например для приведения имен переменных к одинаковому виду.
Выделите текст и выберите нужный регистр через Command Palette. Все команды начинаются с ` Change Case ` .

4. Guides

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

5. Path Intellisense

Автодополнение для файлов и директорий.
Чтобы использовать относительный путь к файлу, не нужно заниматься копипастом и сравнивать расположение текущей папки с нужной. Также можно использовать абсолютные пути.
Просто начните вводить путь “./” и выбирайте нужные директории и файлы.

6. TODO Highlight

7. Bookmarks

Помечает строки кода, после чего можно быстро на них перемещаться.
Если в большом файле есть несколько мест, в которых вы активно ведете изменения, такая функциональность очень пригодится.
Для создания и перемещения по закладкам автоматически регистрируются комбинации горячих клавиш. Чтобы изучить команды плагина введите в Command Palette ` Bookmarks ` .

На этом первая группа закончилась. Теперь перейдем к более сложным плагинам, которые показывают, что VS Code уже не просто редактор кода.

1. Docker

Поддержка докера включает работу с образами, контейнерами, Dockerfile и многое другое.
Если вы используете контейнеризацию, то этот плагин для вас. Docker максимально интегрирован в редактор кода.
В Explorer добавляется новый блок с образами, контейнерами и реестрами. Все основные операции, связанные с ними, можно исполнить через Command Palette. Кроме того, в плагин включена поддержка Dockerfile и docker-compose, в которую входят подсветка синтаксиса, автодополнение и определение ошибок.

2. REST Client

3. Project Manager

Позволяет легко переключаться между проектами.
Без этого плагина чтобы открыть проект, нужно либо запустить VS Code в нужной директории, либо искать ее в самом редакторе. С Project Manager вы сможете перейти в проект, просто выбрав его из списка.
Сохраните ваши рабочие пространства и переключайтесь между ними через специальный блок в Explorer.

4. GitLens

Предоставляет более широкие возможности при работе с гитом, чем встроенный в VS Code вариант.
Если вы активно работаете с гитом, то советую установить этот плагин. Вы сможете просматривать историю, ветки, аннотации, теги и другие неотъемлемые части системы контроля версий, которые предоставляются стандартным набором VS Code в очень ограниченном формате.
Вся информация о репозитории появится в новом блоке Explorer’а после установки расширения.

5. WakaTime

6. VS Code Icons

Заменяет стандартные иконки для файлов в Explorer.
Плагин для ценителей красоты. Иконки более яркие и интересные, чем в дефолтном варианте, хотя для кого-то это и сомнительный плюс. Более важно то, что с ними проще отличать и узнавать разные типы файлов.
Для переключения между стандартными темами иконок и вариантом плагина, введите в Command Palette: ` Preferences: File Icon Theme ` .

7. Settings Sync

Синхронизирует настройки для VS Code через Github.
Как мы убедились, в Visual Studio Code можно многое настроить под себя. Этот плагин позволяет синхронизировать ваши пользовательские настройки, комбинации горячих клавиш, сниппеты и настройки для расширений.
Используйте команды, начинающиеся на ` Sync ` . В процессе синхронизации вам будет необходимо сгенерировать токен через Github и использовать его в редакторе.

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

Visual Studio Code – это один из наиболее популярных редакторов кода, разработанный корпорацией Microsoft. Он распространяется в бесплатном доступе и поддерживается всеми актуальными операционными системами. Интерфейс программы приведен на рисунке:

Настройка VS Code

Изменение настроек в VS Code осуществляется в соответствующем окне. Открыть его можно несколькими способами:

через комбинацию клавиш Ctrl+,;
через пункт меню File ⇒ Preferences ⇒ Settings;
нажать на значок шестерёнки в нижней части панели действий и выбрать в открывшемся меню пункт Settings.

editor:tabsize - число пробелов при табуляции (2);
editor:insertSpaces - вставлять ли пробелы при нажатии Tab;
editor:detectIndentation - нужно ли параметры "editor.tabsize" и "editor.insertSpaces" определять автоматически при открытии файла на основе его содержимого (убрать флажок);
editor:wordWrap - управляет тем, как следует переносить строки (ON);
editor:fontSize - размер шрифта в пикселях (15);
editor:mouseWheelZoom - нужно ли включать изменение размера шрифта в редакторе при нажатой клавише Ctrl и движении колесика мыши;
editor:minimap.enabled - включает или отключает отображение мини-карты;
editor:formatOnSave - выполнять ли автоматическое форматирование файла при его сохранении;
files:trimFinalNewlines - если этот параметр активен, то при сохранении файла будут удалены все пустые строки, идущие за последней в конце файла;
files:trimTrailingWhitespace - если этот параметр включен, то при сохранении файла будут удалены все пробельные символы на концах строк;
files:autoSave - для включения авто сохранения файлов;
telemetry:enableTelemetry - включает или отключает отправку сведений об использовании и ошибках в веб-службу Майкрософт (убрать флажок);
editor:hover:Enable -отключить подсказки при наведении курсора;

Список дополнительных расширений.

Open In Default Browser - открытие файлов напрямую в браузере.
Live Sass Compiler - для компиляции Sass кода. После установки расширения в строке состояния появляется кнопочка "Watch Sass". Вы просто пишите код на Sass/Scss, и автоматически происходит автоматическая компиляция Sass кода в готовые CSS файлы. При этом в строке состояния должна быть включена опция "Watch Sass". Этот плагин также устанавливает Live Server, который позволяет автоматически перезагружать страницу после внесения изменений в js, css, html код. Для настройки плагина надо перейти по Ctrl+Shift+P в файл настроек settings.json.
Bracket Pair Colorizer 2 - окрашивает скобки в разный цвет.
Indent-rainbow - разукрашивает отступы.

Better Comments - разукрашивает комментарии.

Highlight Matching Tag - подчеркивает соответствующий выделенному закрывающий или открывающий тег, находится ли он на той же строке или далеко внизу страницы.

Google Fonts - позволяет просматривать список шрифтов Google и вставлять их в HTML или CSS код.

SCSS BEM Support - это расширение добавляет область TextMate к элементу и модификатору BEM, которые могут быть полезны при подсветке синтаксиса.

Как подключить GitHub к Visual Studio code

Если вы ранее не работали с GIT, то для начала его нужно установить. В зависимости от системы нужно выбрать свой вариант. Загрузить Git для Windows можно здесь. Последняя версия Visual Studio Code. Затем конфигурируем Git. Для этого переходим Все программы ⇒ Git и запускаем Git Bash, в терминал вводим поочереди команды:

подставив ваши данные.

Затем регистрируемся на GitHub и создаем репозиторий. Репозиторий - это рабочая директория с вашим проектом. Это та же папка с HTML, CSS, JavaScript и прочими файлами, что хранится у вас на компьютере, но находится на сервере GitHub. Так вы можете работать с проектом удалённо на любой машине, не переживая, что какие-то из ваших файлов потеряются — все данные будут в репозитории при условии, что вы их туда отправите.

После описанных выше действий переходим в VS Code ⇒ Панель действий (Левая панель) ⇒ Source Control ⇒ Clone Repository, указываем ссылку на созданный репозиторий, указываем локальный каталог для проекта и жмем "Open". На этом этапе мы подключили репозиторий к VS Code.

Для примера работы с проектом создадим файл index.html в каталоге проекта. После этого на панели Source Control вы увидите, что рядом с именем вашего нового файла отображается буква U. Обозначение U (untracked) означает, что файл не отслеживается, то есть, что это новый или измененный файл, который еще не был добавлен в репозиторий. Открываем вкладку Source Control (Ctrl+Shift+G), тут показаны все изменения сделанные в проекте. Вы можете нажать значок плюс (+) рядом с файлом index.html, чтобы включить отслеживание файла в репозитории. После этого рядом с файлом появится буква A (added). A обозначает новый файл, который был добавлен в отслеживание.

Теперь внесем изменения в файл и сохраним его (Ctrl+S). На панели исходного кода вы увидите, что ваш файл изменился. Рядом с именем файла появится буква M (modified), означающая, что файл изменен. Перейдем на вкладку Source Control (Ctrl+Shift+G) и выберем файл index.html. Перед нами откроется окно разделенное на две части. Левая половина показывает файл до изменений, а правая-что изменилось.

Для добавления нового проекта в репозиторий необходимо открыть этот каталог проекта в VS Code, перейти во вкладку Source Control и выбрать "Publish to GitHub", выбрать репозиторий, выбрать файлы для добавления и нажать "OK".

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

WordPress VSCode Extension Pack

Коллекция расширений для работы с сайтами WordPress в VSCode в пакет расширений WordPress VSCode включены:

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

VS Code — мой любимый текстовый редактор, а учитывая, что у него обширное сообщество и многообразие доступных плагинов, то цены ему просто нет.

Вы готовы? Здесь и сейчас я расскажу вам о расширениях VS Code, которые не только помогут улучшить продуктивность, но и придадут соблазнительный вид вашему коду. ( ͡° ͜ʖ ͡°)

Статья состоит из 2 частей:

Расширения для улучшения продуктивности.
Расширения для улучшения стиля.

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

Кстати, пусть вас не смущает мой терминал, ведь я пользователь Windows ヽ(◕ヮ◕)ﾉ

Сколько времени уже работаю с кодом в этом текстовом редакторе, но каждый раз восхищаюсь им все больше! (͠≖ ͜ʖ͠≖) Но довольно отступлений — к делу!

Расширения VS Code для улучшения продуктивности

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

1. WakaTime

Это одно из моих любимых расширений, а будь оно бесплатным, стало бы самым любимым.

Что же оно делает?

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

Превосходно, не так ли?

Данный тайм-трекер предоставляет отличный отчет о всех ваших действиях с кодом, и выглядит он так:

2. Visual Studio IntelliCode

Представьте себе Intellisense при поддержке ИИ, который бы подсказывал, что писать в коде. Похоже, что ваши мечты начинают сбываться!

Расширение Visual Studio IntelliCode обеспечивает возможности разработки с помощью ИИ для программистов Python, TypeScript/JavaScript и Java в Visual Studio на основе аналитической обработки контекста кода в сочетании с машинным обучением.

Посмотрим, как это работает:

3. Terminal Here

Для тех программистов, кто не прочь посоревноваться, не использует IDE и предпочитает писать код в текстовом редакторе, я приготовил кое-что интересное!

Что касается меня, то я предпочитаю текстовый редактор VS Code. В основном пишу код на Java и люблю поддерживать правильную файловую структуру (каждому вопросу — свой каталог). Как вы уже догадались, чтобы запустить в терминале простую команду для выполнения файлов Java, мне приходится каждый раз менять директории и располагать свой код. Вот почему этот плагин стал для меня спасением!

Terminal Here открывает текущую рабочую директорию в терминале VS Code.

4. Live Server

Вы представить себе не можете, насколько важен этот плагин!

Открывайте страницы, используя Live Server, и у вас не будет хлопот с обновлением каждый раз, когда вы вносите какие-либо изменения. Кто же не любит горячей перезагрузки?

5. ReactJS Code Snippets

Если вы React разработчик и до сих пор не используете ReactJS Code Snippets, то вам явно не жаль своего времени! При помощи этого плагина можно хорошо его сэкономить и создавать компоненты, используя уже готовые сниппеты кода. ヽ(͡◕ ͜ʖ ͡◕)ﾉ

Еще один пример:

6. Python

Я и не надеюсь перечислить все возможности Python в формате статьи, но точно могу вас заверить, что это расширение позаботится обо всех ваших потребностях в этом языке! Вы можете:

выбирать интерпретатор Python нажатием на строку состояния;

настраивать отладчик с помощью панели Debug Activity;

настраивать тесты с помощью команды Configure Tests ;

7. Path Intellisense

Этот плагин — по-настоящему нужный инструмент для разработчика. Импортируем ли мы зависимости, включаем образы в HTML-документы, прикрепляем скрипты JS, делаем ссылки на документы CSS в HTML-файлах — во всех этих случаях нам не обойтись без указания пути к файлу.

Path Intellisense автоматически заполнит для вас путь, чтобы вы смогли сконцентрироваться на более важных делах. ( ͡^ ͜ʖ ͡^)

8. NPM Intellisense

Если вы по достоинству оценили предыдущий плагин, и к тому же вы разработчик Node, то это расширение также не оставит вас равнодушным. Кто же откажется от автозавершения или подсказок в процессе импорта библиотек npm?

9. Markdownlint

Откройте наугад несколько проектов с открытым ПО на GitHub, и вы заметите у них одну общую черту — плохое стилевое оформление README.md. ( ͡ಠ ʖ̯ ͡ಠ)

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

Markdownlint — расширение Visual Studio Code, которое содержит библиотеку правил для соблюдения стандартов и согласованности файлов Markdown.

Советую, как можно быстрее установить его и настроить ваш Markdown 🙂

10. Markdown Preview Enhanced

Если мы с вами на одной волне, то вы, как и я, давно отказались от Microsoft Word и других ПО для создания текстовых документов. Для этой цели у нас есть Markdown. Установите данный плагин и увидите, как изменится ваш Markdown.

11. Auto Close Tag

Если вы веб-разработчик, и при этом не пользуетесь Auto Close Tag для написания тегов, то как вы вообще справляетесь? Лично мне надоедает закрывать теги вручную, и, к счастью, плагин автоматически делает всё это за меня.

12. Auto Rename Tag

Еще одно расширение в этом разделе — Auto Rename Tag, которое автоматически переименовывает закрывающиеся теги, если вам это необходимо. ( ͡~ ͜ʖ ͡°)

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

Расширения VS Code для улучшения стиля

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

1.Prettier — инструмент для форматирования кода

Сначала я хотел внести Prettier в список расширений для продуктивности, но так как он связан со стилем, расскажу о нем здесь.

До сих пор существует противостояние, известное как “табуляция против пробелов” (и я вообще не понимаю тех, кто использует 8 пробелов), и вам, возможно, приходится преобразовывать одно в другое, но данное расширение возьмет на себя задачу добавления/удаления пробелов в коде.

Или представим другую ситуацию: у вас есть фрагмент кода, который написал ваш друг, или вы просто взяли его из интернета. Что вы будете делать, если он не структурирован? Будете выстраивать вручную? Конечно же нет, для этого и существует плагин.

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

2. Rainbow Brackets

Не такое уж полезное расширение (к сожалению), но ведь скобки разных цветов выглядят бесподобно. ( ͡° ͜ʖ ͡°)

В вашем распоряжении все цвета радуги для круглых, квадратных и фигурных скобок. Rainbow Brackets может пригодится программистам Lisp, Clojure, JavaScript и многим другим.

3. Snazzy Operator

Вот он мой любимчик, хотя вы можете подумать, что это одна из тем VS Code.

Snazzy Operator требует предварительной установки шрифта Operator Mono.

4. vscode-styled-components

И наконец, последний в списке — vscode-styled-components, удивительный плагин для выделения синтаксиса и автозавершения.

Между прочим, вы заметили одну деталь в первом скриншоте статьи? Если нет, то повторю его еще раз:

Неужели не заметили? Тогда даю подсказку — посмотрите на терминал:

Если вы из числа пользователей Linux или Mac, то для вас это не ново, но для всех моих друзей, работающих в Windows, это стало открытием, не так ли?

Главным образом я использую тему “agnoster” фреймворка Oh-My-Zsh на WSL. Более подробную информацию о них вы можете найти в Google.

Visual Studio Code – популярный бесплатный редактор кода, созданный Microsoft’ом для программистов. VS Code никак не связан с Visual Studio. VS Code работает быстрее Атома, активно развивается и легко расширяется плагинами.

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

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

Для установки нового пакета зайдите во вкладку “Extensions” которая находится в выпадающем меню “View”, и введите название пакета в строке поиска, нажмите кнопку “Install”.

Babel и ES6

VS Code содержит понятие “сборки проекта”. Редактор можно настроить таким образом, чтобы сборка JavaScript-проекта заключалась в конвертации кода из ES6 в читаемый ES5 с Source Maps с помощью Babel.

Добавьте таск (задание) в файл tasks.json в директории .vscode в корне вашего проекта:

Теперь комбинация клавиш Shift+Ctrl+B (Windows/Linux) или Shift+CMD+B (macOS) запустит сборку.

Стандарты кодирования

Eslint – это утилита, проверяющая стандарты кодирования на JavaScript. Стандарт де-факто в мире JS.

Нужно сначала установить eslint в системе, а потом установить расширение VS Code, которое будет использовать установленный линтер. Есть разные способы интеграции линтера с расширением. Мы рассмотрим установку линтера глобально в системе.

Установите Node.js, используя пакетный менеджер вашей операционной системы.
Установите eslint командой npm install -g eslint . Вероятно, вам понадобится использовать sudo .

Установите плагины, которые конфигурируют eslint . Без них (по умолчанию) eslint ничего не проверяет.

eslint требует наличия конфигурационного файла. Создайте в корне вашего проекта файл .eslintrc.yml со следующим содержанием:

Автоматическое дополнение

VS Code содержит мощную систему анализа кода для автодополнений и подсказок – IntelliSense.

IntelliSense работает сразу, но для настройки деталей нужно создать конфигурационный файл jsconfig.json .

jsconfig.json

Если положить в корень директории с JavaScript-проектом конфигурационный файл jsconfig.json , то VS Code будет использовать эту конфигурацию для работы с вашим проектом. Вот пример такого файла:

Здесь можно настроить, например, какие директории стоит исключить из системы автодополнений IntelliSense. VS Code совместим с node, webpack, bower, ember и другими популярными инструментами. Полная документация по jsconfig доступна на сайте VS Code.

Отладка

VS Code содержит встроенный отладчик кода. Вы можете, например, отметить брейкпойнты (точки остановки) и следить за состоянием приложения в реальном времени.

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

Подробнее об отладке можно узнать на сайте VS Code.

Ссылки

Курс по настройке окружения для работы в современной экосистеме JavaScript.

Сделайте максимально комфортной свою работу в редакторе Visual Studio Code при помощи дополнительных расширений. Подборка лучших расширений для 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 поможет вам легко получать доступ к вашим проектам, независимо от того где они находятся. Вы можете определить свои собственные избранные проекты или выбрать для автоматического обнаружения проектов VSCode, Git, Mercurial и SVN-репозиториев или любой папки.

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

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

Bookmarks - Закладки

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

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

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

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

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

open in browser

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

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

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

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

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

Path Intellisense

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

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

Path Autocomplete

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

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

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

Live Server

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

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

Лично я предпочитаю работать с 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 добавить следующую настройку:

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

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

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

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

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

cdnjs

vscode-pdf

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

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

Набор всех доступных горячих клавиш (быстрых команд) для работы с редактором кода VSCode, которые значительно упрощают ведение разработки и написание кода.

Инструкция как быстро и просто сделать копию репозитория GitHub к себе на компьютер при помощи редактора Visual Studio Code. Задача буквально на два-три клика мышкой.

Пошаговая инструкция о том, как создавать свои собственные сниппеты для редактора VSCode: типы сниппетов, правила для названий, структура кода сниппета.

Установка и использование расширения в редакторе кода VSCode для правильной подсветки синтаксиса кода файлов шаблонов и htm для Winter CMS.

Как установить и настроить шрифт JetBrains Mono в редакторе кода Visual Studio Code. Небольшая инструкция по настройке шрифта в редакторе VSCode.

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

Подскажите рабочий плагин для FTP

В статье упоминается расширение RemoteFS. Оно подключает редактор к серверу через FTP. Нормально работает.

На хостинге создаёте пользователя FTP (если не знаете как, обратитесь в тех. поддержку хостинга, они подскажут как). Затем в json-параметрах в настройках редактора вставляете код:

название - любое название для подключения, можно на русском, можно изменять в любое время.
Хост, FTP логин и пользователь FTP - для этих настроек берёте значения в управлении хостингом
остальные настройки оставляйте как в примере
Сохраняете [ Ctrl + S ]

Затем в любое время чтобы подключиться по FTP делаете следующее:

Нажимаете на клавиатуре клавишу F1 и начинаете вводить Remote FS .
В подсказках выбираете Remote FS: Add Folder to Workspace
Затем выбираете название нужного вам подключения.

Редактор подключится к серверу и в рабочей области появится структура каталогов и файлов на сервере.

"До этого я работал в редакторе Sublime Text, который полностью удалил через две недели после того как начал юзать VSCode, просто потому что VSCode гораздо круче и быстрее."

Автор1 ты в сосну головой ударился, с каких пор C++ и Python медленнее Java и JavaScript? xD Еще хочется отметить пару моментов, что в vs code встроена телеметрия и все эти Electron app больше подходят для веб приложений, нежели годного софта для десктопа. Поэтому эти приложения типа vs code используют огромное кол-во памяти и времени процессора, их иллюзорное быстродействие резко снижается при установке всего лишь нескольких расширений. Исполняемые файлы размером 60-100 МБ под управлением Javascript… Это не приложение, это куча медленных циклов процессора, сжигающих код… Я предпочитаю быстрое программное обеспечение, а не огромные груды медленных скриптов.

Читайте также: