Подсказка, как в VS Code можно открыть в отдельном окне Terminal или Search results

#tip #vscode

Volar-у надоело масштабироваться вертикально, он полез горизонтально.

Из-за бага в VSCode (как утверждает Johnson Chu) в расширениях редактора теперь два Vue-Official (ext:Vue.volar). Один - последний 2.0.12 с 60 тысячами скачиваний, другой - 2.0.10 с 7 миллионами скачиваний. Нужен 2.0.12.
Изменить имя, и потерять всю историю...

Также последняя версия хочет, чтобы у вас была достаточно свежая версия VS Code, иначе она превращается в 1.8.27.

#volar #vscode

Сразу после выхода очередного релиза Vitest 1.5.0, вышла новая версия Vitest VS Code extension 0.6. Из нового:

- instant feedback
- .each test declaration
- test tree view
- coverage reporting
- better debugging support
- improved performance

Расширение было не очень популярно, и по сравнению с версией 0.5 было переписано с нуля.

#vitest #vscode

Полезные фичи VS Code:

Сочетания клавиш:
ALT + ←/→ - Идти к прошлому/следующему месту редактирования
ALT + ↑/↓ - Переместить строку/выделение
SHIFT + L - Выделить строку
SHIFT + ALT + ↑/↓ - Дублировать строку/выделение
SHIFT + ALT + ←/→ - Расширить/сузить выделение

CTRL + SHIFT + P => поиск команды по названию

Настройки:
Profiles
Sticky Scroll

Расширения:
Codeium
Code Spell Checker
Todo Tree
Favorites

Следует учитывать, что многие расширения (например, популярное Import Costs) очень сильно жрут ресурсы компьютера и тормозят редактор

#vscode #tip

Мы уже писали пару раз о применении Reactivity API пакета вне Vue фронтенд приложений.

Вот новая библиотека/starter-kit, которая использует Vue Reactivity API для упрощения создания VS Code расширений. Путем отображения VSCode extension API (которая основана на event driven архитектуре) в композаблы. Несколько понижается производительность, значительно повышается DX.

Пока что Vue Reactivity API выглядит лучшей "реализацией" JS Signals.

#vscode #reactivity

Если у вас VS Code тормозит из-за каких-то расширений, то есть такое:

F1 -> Developer: Open Process Explorer
F1 -> Developer: Show Running Extensions

и вообще:

F1 -> Developer: ...

#vscode

Если в VS Code у вас отключено автоматическое обновление редактора или стоит firewall, запрещающий такие запросы, то в один момент Volar или Eslint могут просто перестать работать, потому что их новая версия требует последних версией VS Code (и это случается далеко не редко). Об этом будет краткая запись в output логах Eslint.

Можно потратить кучу времени, пытаясь определить, что сломалось. Логи VS Code - очень полезная штука.

#vscode #volar #eslint #ide

Еще один пример как Volar может сломаться при обновлении / не обновлении VS Code

Intellisense перестает работать во вновь созданных Vue файлах.

#volar #vscode

В последнем VS Code появился более удобный Profile editor.

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

Малозаметная штука, сильно облегчающая работу. И чего нет у комбайна JetBrains.

#vscode

Команды VS Code
- Emmet: Balance (outward)
и
- Emmet: Wrap With Abbreviation
помогут быстро обернуть блок кода в шаблоне в новый тэг.

Можно назначить им сочетания клавиш.

#vscode #tip

Лидом разработки VS Code является швейцарец Erich Gamma - один из авторов легендарной, вышедшей более 30 лет назад книги Design Patterns: Elements of Reusable Object-Oriented Software ("Gang of four")

Он - одна из причин успеха редактора

Вот Erich рассказывает, на каком JS фреймворке написан VS Code и почему.

#vscode #designpatterns

Чтобы сделать работу в SOHO комфортной, полезно иметь Мини ПК как локальный сервер

На нем можно не только крутить Linux, базу данных, вебсервер, docker и другие сервисы, но и работать из VS Code в режиме Remote Development (по SSH). Это сильно разгружает основной комп/ноут.

Для сравнения, открываем небольшой Vue 3 проект локально:
- RAM: 2000Mb, CPU: 10%-50%

Тот же самый удаленно:
- RAM: 600Mb, CPU: 10%-20%

То есть, нагрузка распределяется очень неплохо, и на ноуте с 16Gb памяти можно запускать несколько экземпляров VS Code и работать вполне комфортно (помним про профили).

Я пожадничал и взял Мини ПК на Ryzen 7, в результате часто слушаю работу вентиляторов. Сейчас бы не задумываясь купил Intel N100 - он бесшумный и мощи хватало бы. 16Gb памяти - оптимально

Итого, качественный сетап фулстека: ноут - $400, мини ПК - $200, хороший большой основной монитор- $250, монитор попроще - $150, всякая периферия. За всё около $1000.

Ну или бэушный макбук можно взять за эти же деньги...

#minipc #vscode

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

1. Preferences > Configure Runtime Arguments
2. Добавить: "disable-hardware-acceleration": true

Или сразу в .vscode/argv.json

#vscode #tip #optimization

Copilot Edits

Не успели мы написать о каскадном прыжке Codeium, как тут и Copilot вылез.

GitHub Copilot добавил в VS Code в свое расширение функцию Copilot Edits - генерация кода в разных файлах (аналог Cursor Composer и Codeium Cascade)

Причем, Copilot по-прежнему остается расширением IDE, хотя Cursor и Codeium типа "не смогли" добиться такого функционала и вынуждены были форкнуть VS Code для своих платных продуктов. Видимо такая у последних двух бизнес модель.

VS Code разместил об этом новость у себя и показал, как сгенерить окно логина на примере проекта на Vue ))

—

Еще интересные AI помощники для IDE, к которым можно подключить свою LLM - Continue, Cline (опенсорсные) и
Codebuddy (не опенсорсный). Планирую на своем мини-пк все-таки развернуть небольшую LLM и попробовать работать локально.

#vscode #ai #copilot

Довольно свежие Vue сниппеты для VS Code, среди большого количества хлама.

Vue 3 VS Code Snippets

#vscode #tip

Попалось полезное VS Code расширение

На больших проектах вместо того, чтобы выносить часто используемые файлы в Favorites, можно прятать редко используемые в Hide files

От автора React SFC

#vscode

Кому нравятся джетбрейновские аннотации имен параметров, у VS Code есть расширение для этого - Inline Parameters for VSCode

#vscode

Еще одно полезное расширение для VS Code - Pretty TypeScript Errors

#vscode