Новые возможности поддержки JavaScript в ReSharper 8.1

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

Улучшенное автодополнение через TypeScript

В процессе работы с «чистым» JavaScript’ом у нас появилась возможность существенно улучшить поддержку автодополнения в ReSharper путем добавления в проект определений типов из языка TypeScript. Для того чтобы включить эту функциональность, нужно всего лишь найти в каталоге NuGet соответствующий DefinitelyTyped пакет и установить его:

При отсутствии TypeScript-аннотаций механизм автодополнения в ReSharper’е ограничен тем, что он может вывести из самого JavaScript-файла. Поскольку JS является динамически типизированным языком, не всегда возможно получить полноценную информацию об импортированных символах и взаимоотношениях между ними. Поэтому, помимо выведенных элементов (которые выделяются жирным шрифтом в окошке автодополнения), ReSharper также показывает все свойства всех символов, которые находятся в солюшене. В этом случае на плечи разработчика ложится ответственность за понимание того, есть ли у конкретного элемента то или иное свойство или функция, и эта ситуация, к сожалению, может быть источником дополнительных проблем.

Если взять, например, underscore.js ― ReSharper не способен вывести свойства символа _(подчеркивания), и, соответственно, пользователю нужно выбирать из всех возможных идентификаторов. Помимо этого, информация о параметрах функции тоже недоступна:

Но после того как мы добавим строго типизированные определения из файла *.d.ts, ReSharper может выделить жирным шрифтом те элементы, которые разрешены для символа _, что сокращает риск возникновения ошибки:

Также ReSharper теперь может показать информацию о параметрах функции:

JavaScript SSR

Механизм структурного поиска и замены (StructuralSearch&Replace, SSR) дает разработчику возможность производить операции поиска и замены не по фиксированным строкам поиска или регулярным выражениям, а по структурным определениям кода, в котором можно выделять названия переменных, литералы и т.п. И теперь этот механизм доступен для языка JavaScript.

Давайте начнем с примера поиска декларации объектов с присвоением одного единственного свойства:

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

Конечно же, поиск кода по шаблонам — это только половина того, что умеет SSR, ведь еще можно производить замену. Например, представим, что вы решили заменить все декларации с использованием типа Array на использование квадратных скобок. Вот как можно определить шаблон для этого:

Для переменной $args$ $ этот шаблон использует тип метки any number of arguments, которая представляет набор из аргументов функции.

Хочу подчеркнуть, что механизм SSR является семантически чувствительным. Вот, например: при поиске условия $x$ > 100 механизм SSR также найдет и код if (100 >= x):

В том же духе префиксные и постфиксные операторы рассматриваются как взаимозаменяемые при условии, конечно, что их результирующие значения никуда не записываются:

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

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

Улучшения в окне FileStructure

Одна из основных проблем языка JavaScript заключается в том, чтобы понять организационную структуру некого куска JS-кода. Для того чтобы упростить этот процесс, окно FileStructure было переделано, дабы упростить представление как JavaScript-, так и TypeScript-кода. Давайте посмотрим на некоторые особенности этого полезного окошка.

Для начала, ReSharper научился выводить имена функций либо из деклараций, либо из имен переменных:

ReSharper также умеет определять имена элементов из документации, когда они явно не заданы в коде:

Окно FileStructure использует многоточие (…) для выделения дополнительных аргументов функции. В примере ниже ReSharper видит, что varArgsFunction использует значение arguments:

Некоторые вызовы функций, на самом деле, представляют собой более высокоуровневые конструкции — модули. ReSharper пытается идентифицировать эти структуры и представить их элементы: как приватные, так и экспортируемые. Заметьте, что для конструктора мы также выводим его поля:

Умный поиск использования элементов

Мы уже писали про эту фичу в нашем блог-посте по TypeScript (англ.яз.), но стоит еще раз об этом упомянуть: в ReSharper 8.1 появилась новая фича под названием SmartUsageSearch. В процессе поиска свойства, например, ReSharper умеет находить как обычные случаи использования, так и т.н. «умные» использования — то есть случаи нетривиального вывода типов. Конечный результат представлен ниже – заметьте, что эта фича доступна как для JavaScript, так и для TypeScript:

Ну вот пока и всё

Мы надеемся, что вам понравится новая функциональность, описанная в этом посте. Мы продолжаем работать над поддержкой JavaScript и TypeScript в ReSharper, так что очень скоро будут другие новые и интересные фичи. До скорого!