Производительность VS Code: как подобрать самые лучшие расширения. Часть 2

Перевод второй части статьи «VS Code Performance – How to Optimize Visual Studio Code and Choose the «Best» Extensions».

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

Показатели нескольких самых популярных расширений

Я здесь фокусируюсь на расширениях, которые использовал сам. Мне не хотелось бы рассуждать о тех, которыми я не пользовался.

ESLint

ESLint — самый популярный инструмент статического анализа для JavaScript и TypeScript. Он выделяет проблемы в редакторе красными волнистыми линиями.

Автор: Microsoft.
Количество установок: 11 миллионов.
Рейтинг торговой площадки: 4,3/5 (156).
Основные функции: сообщение о проблемах синтаксиса. Возможность автоматического исправления некоторых проблем.
События активации: при запуске (*). В следующем выпуске это, возможно, изменится на onStartupFinished. Объяснение причин можно прочитать в этом issue.
Оптимизированы ли ресурсы: да.
Размер файла: 133 КБ.
Время активации в моей системе: 39 мс.
Набор тестов: кажется очень базовым.
Активно поддерживается: да.
Альтернативные расширения: JSHint, TSLint.

ESLint — надежное расширение. Производительность отличная.

Обидно только, что загружается при запуске. Если вас это беспокоит, вы можете попробовать JSHint (написанный тем же разработчиком) для JavaScript и TSLint для TypeScript. Или вы можете форкнуть проект и изменить его самостоятельно!

Проект ESLint активно поддерживается. У него нет значительного набора тестов.

Оценка: 8/10

Prettier

Prettier — инструмент форматирования кода. В настоящее время он поддерживает следующие языки: JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown, YAML.

Автор: Prettier.
Количество установок: 8,5 миллиона.
Рейтинг торговой площадки: 3,8/5 (204).
Основные функции: форматирование кода.
События активации: onStartupFinished.
Оптимизированы ли ресурсы: да.
Размер файла: 2,1 МБ.
Время активации в моей системе: 286 мс.
Набор тестов: есть. Покрытие выглядит прилично.
Активно поддерживается: да.
Альтернативные расширения: Beautify.

Prettier отлично справляется с упрощением форматирования кода.

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

Было бы желательно настроить активацию только для поддерживаемых языков.

Оценка: 7,5/10.

Live Server

Live Server запускает локальный сервер разработки для предварительного просмотра ваших файлов HTML и SVG.

Автор: Ретвик Дей.
Количество установок: 7,5 миллиона.
Рейтинг торговой площадки: 4,5/5 (269).
Основные функции: предварительный просмотр HTML и SVG в режиме реального времени.
События активации: при запуске (*).
Оптимизированы ли ресурсы: нет.
Размер файла: 2,5 МБ.
Время активации в моей системе: 2513 мс.
Набор тестов: есть базовые тесты.
Активно поддерживается: нет. Последний коммит был год назад. Автор расширения ищет нового мейнтейнера.
Альтернативные расширения: не нашел!

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

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

Оценка: 5/10.

GitLens

GitLens помогает визуализировать авторство кода и исследовать репозитории Git.

Автор: Эрик Амодио.
Количество установок: 6,5 миллиона.
Рейтинг торговой площадки: 4.86/5 (387)
Основные возможности: визуализация авторства кода с первого взгляда. Красивые представления репозиториев git в боковой панели.
События активации: при запуске (*).
Оптимизированы ли ресурсы: да.
Размер файла: 1,5 МБ.
Время активации в моей системе: 35 мс.
Набор тестов: нет.
Активно поддерживается: д а, но активность в последнее время низкая. Последний коммит был 4 месяца назад.
Альтернативные расширения: нет.

GitLens — хорошая идея, которая может быть полезна для понимания кодовой базы.

Расширение хорошо написано, да и производительность отличная.

Я использовал только расширение для blame-аннотаций, но там есть много функций и параметров конфигурации (135 индивидуальных настроек!).

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

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

Оценка: 9/10.

Vetur

Поддержка языка Vue.

Автор: Пайн Ву.
Количество установок: 5,6 миллиона.
Рейтинг торговой площадки: 4.5/5 (117)
Основные функции: подсветка синтаксиса. Intellisense. Форматирование кода.
События активации: onLanguage: vue.
Оптимизированы ли ресурсы: нет.
Размер файла: 70,6 МБ.
Время активации в моей системе: 252 мс. Но показатель «Завершить активацию» составляет 3943 мс!
Набор тестов: есть.
Активно поддерживается: да.
Альтернативные расширения: очевидной альтернативы нет. Форматирование можно выполнить с помощью Prettier.

Vetur — это стандартное расширение для разработки приложений на Vue в VS Code.

Подсветка синтаксиса, intellisense и ссылки при наведении отлично подходят для разработки Vue.

Размер расширения ОГРОМНЫЙ.

Производительность немного неустойчивая. Для завершения активации на моем компьютере требуется не менее 4 секунд, что намного дольше, чем для встроенных функций языка JavaScript. Также есть заметная задержка автозаполнения синтаксиса JavaScript.

Разработчики работают над сборкой расширения (issue), поэтому, надеюсь, в ближайшее время производительность улучшится.

Оценка: 7/10.

Settings Sync

Settings Sync — синхронизация настроек с помощью GitHub Gist.

Автор: Шан Хан.
Количество установок: 2 миллиона.
Рейтинг торговой площадки: 4.61/5 (638).
Основные функции: настройки синхронизации.
События активации: при запуске (*).
Оптимизированы ли ресурсы: да.
Размер файла: 1,2 МБ.
Время активации в моей системе: 2513 мс.
Набор тестов: есть.
Активно поддерживается: нет. Последний коммит был год назад.
Альтернативные расширения: встроенная функция VS Code.

Это было выдающееся расширение. Синхронизация полной настройки редактора на разных машинах очень полезна. Именно поэтому с июля 2020 года такой же функционал стал встроенной фичей VS Code. Основное отличие состоит в том, что расширение сохраняет ваши настройки в gist, которым вы также можете поделиться с другими.

Время активации довольно медленное. Это оправданно? Сложно сказать.

Я предполагаю, что встроенная функция в конечном итоге будет работать лучше, поскольку она пользуется поддержкой Microsoft. Расширение больше не поддерживается.

Оценка: 8/10.

Markdown All in One

Markdown All in One удовлетворяет многие ваши потребности по части работы с markdown.

Автор: Юй Чжан.
Количество установок: 1,7 миллиона.
Рейтинг торговой площадки: 4.8/5 (90)
Основные функции: редактирование с переключателем, оглавление.
События активации: onLanguage: markdown, onCommand: markdown.extension.printToHtmlBatch, workspaceContains: README.md.
Оптимизированы ли ресурсы: да.
Размер файла: 4,1 МБ.
Время активации в моей системе: 195 мс.
Набор тестов: есть.
Активно поддерживается: да.
Альтернативные расширения: Marky Markdown.

Это надежное расширение с отличной производительностью.

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

Событие активации workspaceContains: README.md мне кажется ненужным. У большинства моих проектов есть README, но я редко их редактирую. Так что для меня это показатель того, что расширение всегда активно.

Логика оглавления немного банальная. В прошлом были проблемы с ложными срабатываниями. Я не знаю, было ли это полностью устранено.

Размер файла расширения можно уменьшить, исключив снимки экрана README из пакета расширения.

Оценка: 8/10.

Общие советы по производительности

Используйте 64-битную ОС

Если вы обновитесь до 64-разрядной версии ОС, вы сможете увеличить объем виртуальной памяти (VM), доступной для VS Code, с 2 ГБ до 4 ГБ.

Это позволит VS Code обрабатывать значительно большие рабочие нагрузки, когда требуется VM.

Отключите восстановление состояния проекта при запуске

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

Чтобы ускорить загрузку, вы можете отключить некоторые параметры восстановления:

Workbench › Editor: Restore View State: по умолчанию включено.
Files: Restore Undo Stack: по умолчанию включено.
Workbench: Startup Editor: определяет, какой редактор будет отображаться при запуске. По умолчанию это страница приветствия. Вы можете установить значение none, чтобы при запуске не появлялся никакой редактор.

Отключите дорогостоящие функции, которые влияют на производительность редактирования

Миникарта: Editor › Minimap: Enabled. По умолчанию включено.
Перенос по словам: Editor: Word Wrap. По умолчанию отключено.
CodeLens: Editor: CodeLens. По умолчанию включено.
Форматировать при сохранении: Editor: Format On Save. По умолчанию отключено.
Форматировать при вставке: Editor: Format On Paste. По умолчанию отключено.

Отключите расширения для рабочего пространства

Вы можете отключать те или иные расширения для конкретного рабочего пространства (проекта).

Скорее всего, вы захотите сделать это для расширений, работающих постоянно. Для проекта Java вам не понадобится ESLint!

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

Создайте наборы расширений

Вы можете указать альтернативную директорию для расширений, введя приведенную ниже команду в командной строке:.

code --extensions-dir <dir>

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

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

В идеале у вас не должно возникнуть такой потребности.

Отключите все расширения для сессии

Вы можете запустить VS Code со всеми отключенными пользовательскими расширениями из командной строки. Дзен-режим плюс плюс!

code --disable-extensions

Устранение проблем с производительностью

Медленная работа или пустой экран

VS Code имеет некоторые проблемы с аппаратным ускорением GPU (графического процессора) в некоторых системах. Вы можете проверить, так ли это, отключив ускорение графического процессора.

code --disable-gpu

Чтобы установить это постоянно, сделайте следующее:

Откройте палитру команд (Ctrl + Shift + P).
Выполните команду Preferences: Configure Runtime Arguments.
Эта команда откроет файл argv.json для настройки аргументов. Вы уже можете увидеть, что некоторые аргументы уже установлены по умолчанию.
Добавьте "disable-hardware-acceleration": true.
Перезапустите VS Code.

Установка повреждена, выводится сообщение [Unsupported]

VS Code выполняет фоновую проверку при запуске, чтобы проверить, изменили ли вы какой-либо из его исходных файлов. Если это так, вы увидите текст [Unsupported] в строке заголовка.

Одной из причин этой проблемы может быть антивирусное программное обеспечение. VS Code мог быть ошибочно помещен в карантин или его файлы могли быть удалены антивирусным ПО (см. issue № 94858). Проверьте настройки вашего антивируса, чтобы предотвратить это.

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

Заключительные слова

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

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

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]