Vs code как изменить имя переменной везде

Мы все избалованы IDE. Хочу больше баловства! Представляю бесплатное расширение Visual Studio Code по переименованию файлов и переменных multi-replace.

Существует множество расширений и встроенных возможностей для рефакторинга. Основная фишка — переименование (переменной, класса, метода, файла и т.д.). Все мы прекрасно с такими возможностями знакомы, они ежеденевно поднимают нам настроение!

Мы любим правила, придерживаемся style guide-ов. Мы называем файлы исходя из содержимого. В файле app-component.ts, по-моему, должен лежать класс AppComponent. И переименовывая класс AppComponent в RootComponent, следующим действием следует поменять и название файла на root-component.ts… А если это, например, Angular компонент, то попутно приходится менять название ещё трех файлов, CSS селекторы, названия экземпляров! Сталкивались с этим? Простейшая операция переименования часто требует от нас неимоверных усилий.

Видели такой код?

// src/models/animal.ts
class Animal {
  run(): void;
  jump(): void;
  catchMouse(): void;
  meow(): void;
}

Согласны, что с течением времени наши классы могут эволюционировать? Речь не про OOP или SOLID (других животных в проекте не наблюдается), это прекрасный класс — но название не отражает действительности. Методы этого класса кричат, что это кошка! И на самом деле, мы должны дать классу шанс на хорошее имя. Но как же все переменные с экземплярами, сотни const animal = new Cat();? А если у нас уже есть целые модули с ключевым словом animal.

В общем, тема правильного именования всегда актуальна. Но не автоматизированной рутины ещё много.

Чтобы повеселиться, я написал небольшую cli на node.js для простейшей замены строк в файлах, но так же и изменяющую имена файлов (@justerest/multi-replace). И был очень удивлён юзабельностью этого костыля! Я больше не боюсь ошибиться в названии компонента или модуля, потому что одной командой могу переименовать целую коллекцию Angular компонентов.

Спустя время, я так же обнаружил, что эта тулза может служить отличной альтернативой schematics. Просто скопируй максимально похожий файл (компонент) и переименуй! Это вдохновило меня на написание расширения multi-replace для моего любимого редактора Visual Studio Code.

multi-replace работает на примитивном String.ptototype.replace() без какого-либо анализа кода или типов файлов. Реализация очень простая — минимум кода, максимум пользы. Есть возможности переименования файлов и текста внутри папки, вместе с папкой, копирования изменённых файлов в новую папку.

Хочу

пропиариться и самоутвердиться

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

Спасибо!

Начало: «VS Code: Интерактивная среда редактора, содержание».

Мой перевод с английского (оригинал можно открыть с помощью пункта из главного меню редактора «Справка – Интерактивная среда редактора»):

Переименование при рефакторинге

Вы можете легко изменить имя уникальной сущности (symbol), например, изменить имя функции или имя переменной, одновременно по всему вашему коду. Нажмите клавишу «F2», пока курсор «касается» (находится слева впритирку от первой буквы или справа впритирку от последней буквы или внутри слова) имени нужной уникальной сущности (symbol), например, «Book» (имя функции-конструктора в приведенном ниже коде), чтобы переименовать все экземпляры (вхождения) этой уникальной сущности — переименование будет выполнено во всех файлах проекта. Также вы можете сделать то же самое с помощью пункта «Переименовать символ» в контекстном меню, вызываемом щелчком правой кнопки мыши по нужному «символу» (уникальной сущности) в коде.

Подсказка по комментариям в стиле «JSDoc». Технология «IntelliSense» редактора «VS Code» использует комментарии в стиле «JSDoc» (то есть комментарии, написанные по специальным правилам для генератора документации «JSDoc») для предоставления более информативных подсказок. Типы параметров и информация из комментариев в стиле «JSDoc» показываются, когда вы наводите указатель мыши на ссылку (reference) на функцию-конструктор «Book» или в окошке «IntelliSense», появляющемся над идентификатором «Book» при создании нового экземпляра типа (класса) «Book» (см. код на иллюстрации выше).

(Конец перевода.)

* * *

Для опытного программиста тут всё понятно. Но для начинающего нужны пояснения.

Что такое «рефакторинг»? Это переписывание существующего кода. При таком переписывании для пользователя программы ее работа не меняется. Рефакторинг упрощает работу с существующим кодом для программистов. Например, существующий код может быть плохо отформатирован, из-за чего ухудшена его читабельность. После рефакторинга читабельность кода улучшается, программист тратит меньше времени на чтение существующего кода и у него остается больше времени на создание нового функционала программы. Существует еще много других причин для рефакторинга, кроме плохого форматирования кода.

Что такое «уникальная сущность» в коде? В английском языке для обозначения этого понятия в программировании есть слово «symbol». Перевод этого понятия на русский как «символ» в данном случае неудобен, потому что в программировании есть «символьный тип» (char) и поэтому возможна путаница. В английском языке для обозначения этих понятий используются разные слова, поэтому там путаницы нет. Следовательно, в русском языке тоже хорошо бы использовать для этих понятий разные слова. Ничего лучшего, кроме «уникальной сущности» я подобрать не смог (еще подходящим выглядит слово «идентификатор», но с ним тоже есть проблемы).

Например, уникальной сущностью (symbol) в коде должны быть имена функций и переменных. Ведь в программе не может быть функций с одинаковыми именами или переменных с одинаковыми именами. Иначе как мы сможем получить разные значения переменных, у которых одинаковые имена? Компилятор не сможет понять, значение какой именно переменной нам требуется, если у переменных будут одинаковые имена. То же самое с вызовом функции: если у функций будут одинаковые имена, компилятор не сможет понять, какую функцию мы пытаемся вызвать.

В языке JavaScript (как и в других языках программирования) даже существует специальный тип данных «Symbol». В языке JavaScript его можно использовать для создания уникальных имен свойств объектов. Тут подробнее. Но это не совсем тот «symbol» (уникальная сущность), о которой мы говорим в этом посте. В языке JavaScript уникальными сущностями являются и имена функций, и имена переменных, и значения, которые выдает встроенная функция Symbol().

Переименование уникальных сущностей при рефакторинге. Переименование уникальных сущностей — это одна из множества задач, которая может ставиться при рефакторинге. В данном разделе интерактивной среды редактора «VS Code» уделено внимание именно этой задаче, потому что она довольно часто встречается.

А, собственно, что сложного в переименовании? Можно же использовать известную функцию текстовых редакторов — «найти вхождения в текст заданной подстроки и заменить их на заданную подстроку». Однако, для программы эта функция не подходит. Дело в том, что упомянутая функция ищет все вхождения заданной подстроки; например, для заданной подстроки «Book» это могут быть ссылки на имя функции (то, что нам нужно), а также упоминания книги в комментариях и строковых литералах (а эти вхождения нам не нужны). Нужна функция редактора, которая найдет и заменит именно нужное имя функции «Book», не затронув упоминания слова «Book» в комментариях или строковых литералах. Именно такая функция и рассматривается в данном разделе интерактивной среды.

Вот как выглядит применение этой функции редактора (я выбрал одну из ссылок на функцию-конструктор «Book», поставил на нее курсор и нажал клавишу «F2»):

В появившемся поле редактирования (см. иллюстрацию выше) я могу указать новое имя функции и нажать клавишу «Enter». После этого все вхождения уникальной сущности «Book» (в нашем случае это имя функции-конструктора) будут переименованы.

Если нажать комбинацию клавиш «Shift+Enter», то сначала откроется список со всеми найденными вхождениями данной уникальной сущности (предварительный просмотр рефакторинга). В этом списке можно выбрать для переименования только некоторые вхождения или вовсе отменить переименование. Вот как это выглядит:

Обратите внимание на галки слева, их можно снимать и устанавливать обратно.

* * *

Что такое «генератор документации»? Это программа, которая просматривает код и создает (генерирует) файлы с документацией (файлы помощи, файлы справки) по просмотренному коду. Документация при этом создается из комментариев в коде. Чтобы генератор документации мог корректно работать, комментарии должны быть написаны специальным образом. Генераторов документации существует множество. Для разных генераторов документации может потребоваться оформление комментариев в коде по-разному, нет единого стандарта.

В рассматриваемом разделе интерактивной среды редактора «VS Code» комментарий написан так, чтобы его мог понять генератор документации «JSDoc». Поэтому я назвал этот комментарий «комментарием в стиле «JSDoc».

Однако, в данном случае редактор «VS Code» не выступает в качестве генератора документации и не создает никаких файлов документации. Редактор «VS Code» может понимать комментарии в стиле «JSDoc» и использует их, вставляя информацию из таких комментариев в окна с пояснениями, выдаваемыми технологией «IntelliSense».

Вот как это выглядит:

Я навел указатель мыши на одну из ссылок на имя функции-конструктора «Book» (на иллюстрации обозначено буквой «У»). После этого технология «IntelliSense» вывела окошко с информацией об этой уникальной сущности (обозначено на иллюстрации буквами «IS»). Видно, что выведенная в окошке информация взята из комментария (обозначен на иллюстрации буквой «К»), написанного в стиле «JSDoc» для функции-конструктора «Book».