Инструменты для JavaScript и TypeScript

Можете положиться на ReSharper, если используете JavaScript или TypeScript для программирования части или всей логики вашего приложения. ReSharper позволяет работать с файлами .js, .ts, .d.ts и .json, JavaScript-кодом, встроенным в HTML-файлы, а также с синтаксисом JSX.

Инспекции кода и быстрые исправления для JavaScript

Анализ кода

Для быстрого поиска ошибок в коде на JavaScript и TypeScript механизм анализа кода ReSharper использует около сотни инспекций. Еще около 50 проверок предусмотрены специально для TypeScript. Почти все обнаруженные проблемы можно мгновенно устранить с помощью быстрых исправлений.

В приведенном примере ввод = вместо == может привести к ошибке, которую легко упустить... но только не с ReSharper.

Анализируя код, ReSharper учитывает уровень языка. По умолчанию уровень выбирается в зависимости от настроек проекта, но при необходимости вы можете изменить эти настройки.

Навигация от символа JavaScript с помощью ReSharper

Навигация и поиск

Большинство возможностей навигации и поиска ReSharper доступны для кода на JavaScript и TypeScript. Как обычно, все возможности навигации от выбранного символа доступны в меню Navigate To (Alt+`).

Все привычные команды поиска, такие как Ctrl+T (Go to Everything/Type) и Ctrl+Shift+T (Go to File), тоже работают. Все поддерживаемые возможности навигации и поиска учитывают особенности синтаксиса JavaScript и TypeScript. Например, в диалоге File Structure отображаются типы данных параметров, если они указаны в документации XML.

Функция структурного поиска и замены также понимает синтаксис JavaScript/TypeScript.

Автодополнение для TypeScript в ReSharper

Автодополнение

Автодополнение помогает писать код на JavaScript/TypeScript быстрее. Когда вы печатаете, ReSharper анализирует окружающий контекст и учитывает символы, которые вы недавно использовали, чтобы предложить самые подходящие варианты автодополнения. Например, ReSharper поможет найти встроенные методы и свойства JavaScript, а также символы из JavaScript-библиотек, на которые есть ссылки в текущем проекте.

Контекстные действия ReSharper для TypeScript

Контекстные действия и другая помощь

ReSharper позволяет быстро преобразовывать фрагменты кода на JavaScript/TypeScript с помощью 50 контекстных действий для JavaScript и TypeScript. Еще около 20 действий предусмотрены специально для TypeScript.

При работе с кодом на JavaScript и TypeScript у вас в распоряжении есть весь арсенал других полезных возможностей ReSharper: подсветка синтаксиса, перестановка фрагментов кода, расширение/сужение области выделения и многое другое.

Возможности ReSharper в JSDoc

Поддержка JSDoc

ReSharper облегчает чтение комментариев JSDoc, подсвечивая их синтаксис. При вводе комментариев JSDoc ReSharper предлагает дополнение ввода. Например, можно ввести /** над функцией, и ReSharper сгенерирует заглушки документации для всех параметров и для возвращаемого значения. Типы, typedef и обратные вызовы JSDoc также подсвечиваются и доступны в автодополнении кода.

Кроме того, все комментарии JSDoc к символам доступны в местах использования этих символов во всплывающем окне Quick Documentation.

Помощь ReSharper с регулярными выражениями для JavaScript и TypeScript

Помощь при написании регулярных выражений

Поддержка регулярных выражений в ReSharper включает в себя полноценный анализ регулярных выражений JavaScript/TypeScript. По умолчанию регулярные выражения распознаются в литералах регулярных выражений, конструкторах и методах RegExp, а также в методах объекта String: match(), search(), replace(), split(). Однако ReSharper можно заставить проанализировать любой строковый литерал как регулярное выражение.

Рефакторинг ReSharper в JavaScript/TypeScript — Move to Resource

Рефакторинги

В коде на JavaScript и TypeScript можно использовать несколько рефакторингов, которые работают так же, как и в C#: Inline Variable, Introduce Variable, Introduce Variable for Substring и Rename.

В TypeScript можно использовать ряд рефакторингов для типов: Copy Type, Introduce Field, Move Type to Another File or Namespace и Move to Folder.

Есть еще один рефакторинг, предназначенный специально для JavaScript/TypeScript — Move to Resource. Этот рефакторинг работает в проектах JavaScript/TypeScript, созданных из шаблонов Visual Studio (например, Apache Cordova), и позволяет перемещать строковые литералы в файлы ресурсов.

Все рефакторинги для JavaScript/TypeScript также доступны в синтаксисе JSX.

Генерация кода из использований в JavaScript/TypeScript

Действие Create from usage

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

Генерация конструктора в TypeScript

Генерация конструкторов

Нажатие сочетания клавиш Alt+Insert на объявлении типа TypeScript позволяет быстро создать конструктор для этого типа с помощью ReSharper. Мастер генерации конструктора создает конструктор, не заданный по умолчанию, в параметры которого передаются поля типа и базовых типов.

Переопределение членов типов TypeScript

Реализация/переопределение членов

Для унаследованных типов предусмотрены две взаимосвязанные возможности генерации кода:

  • Implement missing members реализует все члены интерфейса или абстрактные члены, отсутствующие в текущем классе;
  • Override members делает то же самое, но дополнительно переопределяет виртуальные члены, если это возможно.
Шаблоны Live Templates для TypeScript

Шаблоны кода

ReSharper предоставляет десятки шаблонов Live Templates для часто используемых конструкции JavaScript и TypeScript. Кроме того, доступны постфиксные шаблоны для TypeScript и JavaScript, а также шаблоны файлов для классов, интерфейсов и модулей TypeScript. Как всегда, вы можете создавать и добавлять свои шаблоны.

Настройка правил форматирования JavaScript-кода

Соответствие выбранному стилю кода

ReSharper помогает соблюдать неприложные законы программирования на JavaScript и TypeScript: правила форматирования и правила именования.

Вообще говоря, форматирование кода работает еще лучше, чем в C#: нажмите Alt+Enter на выделенном блоке кода и выберите Format selection | Configure, чтобы просмотреть и настроить все правила форматирования, влияющие на выделенный блок.

Существуют параметры стиля кода, специально предназначенные для JavaScript и TypeScript: можно настроить последовательное использование одинарных (') или двойных (") кавычек для работы со строковыми литералами, а также автоматически добавлять или убирать необязательную точку с запятой в конце операторов.

В TypeScript также можно настраивать способ указания типов в объявлениях (явное имя типа, var или any), включить или выключить явное использование модификатора public и настроить способ импорта модулей.

Все параметры стиля кода JavaScript и TypeScript можно применять в любой области действия одной командой: с помощью либо быстрых исправлений, либо инструмента очистки кода Code Cleanup.

Возможности юнит-тестирования JavaScript-кода

Помощь при модульном тестировании

ReSharper помогает обнаруживать и выполнять юнит-тесты на базе QUnit и Jasmine непосредственно в Visual Studio. Можно выбрать, в каком браузере требуется исполнять тесты JavaScript/TypeScript или выбрать тестирование без пользовательского интерфейса с помощью PhantomJS.

Аналогично юнит-тестам .NET, тесты JavaScript/TypeScript, присутствующие в решении, можно просматривать с помощью Unit Test Explorer, выполнять их из этого окна, из Solution Explorer или прямо из редактора; также можно использовать несколько сессий юнит-тестирования.

Поддержка JSLint, ESLint и TSLint в ReSharper

JSLint, ESLint и TSLint

ReSharper дополняет встроенные правила анализа кода тремя инструментами статического анализа: JSLint, ESLint и TSLint. Все эти линтеры помогают обеспечивать удобочитаемость кода на JavaScript и TypeScript и удобство его поддержки. Они также позволяют добавлять собственные правила, которые можно включать в анализ кода ReSharper.

Если на компьютере уже настроен интерпретатор Node.js, линтеры можно включить в параметрах ReSharper в разделе Tools | Web Linters.

Помощники для значений JSON

Помощники для значений JSON и каталоги схем

Помощники для значений JSON позволяют использовать ReSharper для автодополнения кода или валидации собственных файлов JSON. Помощник можно добавить на странице параметров JSON Value Helpers; совпадения проверяются по маске имени файла и/или по совпадению схем. В параметрах JSON также можно добавить собственные каталоги схем JSON.

Обратите внимание:

Все сочетания клавиш, приведенные на этой странице, соответствуют набору сочетаний «Visual Studio», использующемуся в ReSharper по умолчанию. Подробнее о двух наборах сочетаний клавиш, доступных в ReSharper, вы можете узнать в его документации.