Как стать автором
Обновить
0
JetBrains
Делаем эффективные инструменты для разработчиков

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

Время на прочтение 4 мин
Количество просмотров 6.8K

В связи с постоянным ростом популярности языка 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, так что очень скоро будут другие новые и интересные фичи. До скорого!

Теги:
Хабы:
+20
Комментарии 13
Комментарии Комментарии 13

Публикации

Информация

Сайт
jetbrains.com
Дата регистрации
Дата основания
Численность
1 001–5 000 человек
Местоположение
Чехия

Истории