Comments 44
Auto close tag и auto rename tag больше не нужны, из коробки работает. В чем отличие стандартных подсказок путей от path intellisense?
Для быстрой работы с вашими проектами я использую Project Manager.
На этом моменте я немного напрягся :)
Имхо Projects лучше чем Project Manager. В Projects проще/интуитевней управление тегами и рабочими пространствами, что позволяет очень гибко настраивать какие аддоны будут загружены при открытии того или иного проекта.
BetterComments в помойку, для этого есть JSDoc, который заодно приучает писать документацию. Code Spell Checker туда же, ставим ESLint и настраиваем любые правила. К тому-же, VSCode можно настроить так, чтобы ошибки устранялись автоматически при сохранении с помощью этого линтера. Соответственно, rainbow тоже не нужен - настраиваем правило литера для отступов - студия сама подсветит и предложить вариант замены
Code Spell Checker - проверка орфографии в проекте.
Очень полезный инструмент. Расширение для русского языка ставить обязательно.
Из минусов:
- Нужна донастройка. В настройках поставить режим отображения Hint (только подчеркивание синим) - чтобы не засоряло экран.
- Обязательно доустановить и включить Русский словарь https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker-russian
- Не все слова есть на русском и английском. На их можно или проигнорировать, или добавить в исключение проекта наведя на слово.
Это расширение очень помогает сократить ошибки на русском языке - например, в файле локализации, который достался после аналитика/дизайнера или правильнее написать сложное английское слово.
Better Comments выполняет другие функции, отличные от JSDoc. Он помогает оставлять более выразительные подсказки в коде, а JSDoc нужен для полноценного описания/документирования функции/метода/компонента в проекте. Code Spell Checker никак не связан с функциональностью ESLint, он нужен для проверки правописания ( с возможностью создания кастомного словаря для проекта и/или отдельного юзера). indent-rainbow также никак к линтеру не относится, он лишь позволяет визуально четче увидеть вложенность.
Соглашусь со спеллчекером. Остальное, как и говорил - мусор. Для чего нужны "выразительные" комментарии? Все Todo будут автоматически собраны при генерации документации + настройте сонар, так он ещё и code smelt покажет. Что за инфантильность я, честно, не понимаю) Отступы в студии прекрасно видно в виде вертикальных серых линеек и без дополнительных плагинов.
Code Spell Checker
устранялись автоматически при сохранении с помощью этого линтера
Вы уверены что не выключите этот lint-rule уже после 2-го запоротого коммита? spell checker это проверка орфографии. Оно вам такого наустраняет...
rainbow тоже не нужен - настраиваем правило литера для отступов
Причём тут linter? Это не про проверку кода. Это про разноцветную табуляцию\пробелы. Но кажется теперь есть в настройках из коробки, т.к. у меня есть вертикальные цветные бледные полоски, а rainbow плагинов я не ставил.
А сами отступы выравнивают не линтеры, а форматтеры. Например prettier.
Для меня киллер фичей WebStorm является их инструменты для работы с git. Вот эти их окна с diff, когда две версии параллельно показываются, гит лог, где можно по паре кликов к любому коммиту откатиться любым способом, локальная и гит история не просто для файла, а для конкретного места в коде.
В несколько лет назад, когда пробовал переехать, у меня не получилось настроить так же.
Кто нибудь в курсе, сейчас есть такие плагины ?
Из коробки много чего уже есть: https://code.visualstudio.com/docs/sourcecontrol/overview
Использую параллельно с VS Code Git Extensions, но это конечно отдельная программа.
Работа с GIT в VSCode поддерживается из коробки. Все команды есть, сравнение, подсветка изменений, управление бранчами.
Есть конечно, но с гитленсом удобнее. А с гитленсом и форком в котором VSC настроен как внешняя диффалка - еще удобнее.
Там есть из коробки есть вот такой просмотр изменений в два окна с возмжностью редактирования в них ?
Особенно удобно мержить конфликты. Там вообще три окна, слева и справа конфликтующие версии, а по центру то что получится.
хороший топ
Для перевода слова в различные регистры существует набор встроенных команд VSCode:
Transform to Uppercase, Transform to Camel Case, Transform to Kebab Case, Transform to Lowercase, Transform to Pascal Case, Transform to Snake Case, Transform to Title Case.
Дополнительное расширение для этого не требуется.
Да, действительно, не видел раньше такой возможности, спасибо) Убрал данное расширение из списка
Уже хотел было удалять плагин Change Case. Но...
Transform to Kebab Case и Transform to Snake Case работают некорректно для фразы с пробелами - не удаляют пробелы. У меня результат обеих команд одинаков.
Transform to Camel Case оставляет 1-ю букву заглавной.
за "ident-rainbow" спасибо, очень нехватало подобного.
Еще я ставлю шрифт FiraCode и в настройках vscode включаю лигатуры
TL;DR: рекомендую выставить ширину таба в дереве в 18-20 пикселей: "workbench.tree.indent": 20
Мои 5 копеек не про плагины. Долгое время не мог понять, почему визуально плохо ориентируюсь по дереву, когда много файлов/папок открыто. Оказалось, что этому очень мешает дефолтная ширина отступа в 8 пикселей. Позже просто увеличил этот отступ, теперь структура гораздо приятнее для восприятия. Это единственная опция, которую я трогаю в свежей установке VS Code, все остальное и так неплохо выглядит и работает.
Сейчас писал большой комментище, но хабр решил опять сломаться с ошибкой, что navigator.sendBeacon не является функцией. Комментарий, конечно, не сохранился. Придётся заново.
Интересно, почему у меня в файрфоксе пропал sendBeacon и почему страница хабра от этого прямо рушится, если до этого в консоли много раз ошибка происходит без влияния на интерфейс.
Итак, я себе темы ищу по нескольким притериям:
выделение слова this в JS;
выделение параметра функции, который используется в её теле;
выделение последнего слова в конструкциях вида data.param1.param2.param3 — некоторые так умеют;
выделение JSDoc разными цветами, а не одним серым;
не слишком большой контраст — не самый чёрный фон;
HTML разными цветами, чтобы не сливался;
CSS тоже чтобы не сливался;
приятные для глаза цвета;
Пока что не нашёл ничего абсолютно подходящего, поэтому меняю разные темы для разных задач.
Разные темы, которые я присмотрел, но цвета немного поехали из-за JPEG
Я использую часть того, что упомянуто в статье, но есть и другие аддоны, которых я надобавлял кучу. Даже не уверен, что некоторые из них нужны. Может быть, vs code уже всё умеет без них
:emojisense: - вставка эмодзей с поиском по их имени. Можно написать tree, он выдаст пять деревьев на выбор
Bracket select, Bracketeer - работа со скобками и их содержимым, а второй ещё и с кавычками умеет работать (выделить текст в кавычках, заменить кавычки)
Clipboard Manager - история буфера обмена с поиском
css var hint - подсказки по CSS-переменным, которые лежат в другом файле
empty-indent - удаление при сохранении строк, состоящих из табов/пробелов. Я не уверен, что VS Code сам это не умеет.
Explorer exclude - исключение файлов/директорий по маске, чтобы не показывались в файловом менеджере (вроде бы, исключает и поиск по ним, чтобы не искать в node_modules)
Highlight matching tag, highlight-icemode - подсветка того, на чём стоит курсор
HTML to CSS autocompletion - подсказки в CSS имён классов, которые использованы в HTML. Работает, вроде бы, в самых простых случаях (когда нет импорта PUG, и это не vue-компонент с SASS)
Hungry delete - удаление пустых/пробельных строк перед курсором
MetaGo, MetaJump, MetaWord - управление курсором без мыши. Обычно использую при работе с ноутбука. Полезно для сценариев "удалить отсюда до той скобки", "выделить от курсора до той буквы f", "поставить курсор между тех скобок"
scss-scan, вроде бы, позволяет сделать больше автодополнений для миксинов и прочего в SCSS
search file from selection - Наверное, это то, что позволяет по хоткею перейти к файлу, имя которого выделено, или на котором стоит курсор. Иногда зажатый alt не срабатывает, а эта штука ищет ещё и по куску имени
Subtle Match Brackets - подчёркивает парные скобки, если не ошибаюсь
Text power tools - штука с широченными возможностями, но я пока не знаю, где её применить. Это больше для обработки текстовых файлов
Subtle Match Brackets: уже есть из коробки
empty-indent - vsCode умеет удалять все ведущие пробельные символы в строках. Есть ещё опция оставлять или нет пустую строку в конце файла
Bracket select, Bracketeer - лучше освойте выделение блоками кода (не знаю как правильно называется).
ctrl-shift-rightиctrl-shift-leftу меня на маке. Позволяет в доли секунды выделять текст не только в кавычках, а вообще согласно семантике файла. Например слово в строке -> всю строку -> всю включая кавычки -> весь код в{}где эта строка -> весь метод -> весь класс. И т.д.. Это прекрасно работает и мультивыделением что превращает программиста в волшебника :)
Спасибо, поразбираюсь в настройках. Уберу лишнее.
У меня ctrl+выделение вбок выделяет слова. То ли я сам настроил, то ли так уже было. Это привычное мне поведение.
Как я понял, Subtle Match Brackets ещё и позволяет по-разному выделять парные скобки, у них в описании написано, что vs code сам в прямоугольник обводит. Удалил его, отметка парных скобок вообще пропала.
а Path Intellisense из коробки разве нет ?
Simple view images for python debugger просто незаменим для задач компьютерного зрения. Похожий плугин в PyCharm во-первых, платный, а во-вторых, рядом не валялся по функционалу.
Ну и VSVim вполне справляется с заменой metago и прочих плагинов для прыжков по тексту и его автоматизированного редактирования
А нужно знать команды vim для него?
Да, разумеется.
Для быстрого вхождения в тему могу порекомендовать посмотреть видео на vimcasts.org
Их автор еще две книги выпустил, называются "Practical Vim"
Abracadabra, refactor this! - набор удобный инструментов для мелкого рефакторинга. Например добавить
{}иreturnтам где была лямбда. Или наоборотOpen in node_modules - выделяем название либы и cmd-P + open in no... Открывает новое vsCode окно с открытой директорией пакета. Много много раз пользовался когда надо было дебажить или просто вникать в чужие пакеты.
Rewrap - авто-форматирует комментарий в котором стоит курсор (переносит слова, не ломает структуру jsDoc). Не трогает остальные комментарии в файле.
Save and Run - если вы хотите запускать над файлами какие-нибудь свои скрипты при сохранении.
Search Editor: Apply Changes - возможность в standalone поиске прямо от руки набросать изменений для множества файлов найденных поиском и потом всё сохранить одним движением.
Template String Converter - автоматически меняет кавычки на косые если в строку вы добавляете интерполяцию ${}
Toggle Quotes - менять кавычки по hotkey.
Неожиданно пришла грустная новость - Codeium втихаря заблокировали доступ к чату с ботом из России. На любое сообщение будете получать "Feature not available in your country", но все функции, для которых не надо использовать чат работают(типа docstring)
Расширения VSCode для комфортной работы с проектами