Herramientas JavaScript y TypeScript
Cuando usa JavaScript y TypeScript para programar una parte o toda la lógica de su aplicación, puede contar con ReSharper. Sus funcionalidades están disponibles en archivos .js, .ts, .d.ts y .json, en código JavaScript incrustado en archivos HTML, y en sintaxis JSX.
Análisis del código
Las funcionalidades de análisis de código de ReSharper le ayudan a encontrar y corregir errores y problemas rápidamente, con unas 100 inspecciones de código para JavaScript y TypeScript, además de unas 50 inspecciones específicas para TypeScript. Casi todos los problemas detectados se pueden corregir instantáneamente con arreglos rápidos.
En este ejemplo, escribir = en lugar de == podría generar un error muy sutil... pero no con ReSharper.
Al analizar su código, ReSharper tiene en cuenta el nivel del lenguaje, que es configurable. De forma predeterminada, el nivel de un lenguaje se selecciona en base a la configuración del proyecto, pero puede anular este ajuste de ser necesario.
Navegación y búsqueda
La mayoría de las funcionalidades de navegación y búsqueda están disponibles en JavaScript y TypeScript. Como es habitual, todos los comandos para navegar desde un símbolo específico están disponibles con el acceso directo de Navigate To: Alt+`.
Todos sus comandos de búsqueda favoritos, tales como Ctrl+T (Go to Everything/Type) y Ctrl+Mayús+T (Go to File), también están disponibles. Todas las funcionalidades de navegación y búsqueda admitidas tienen en cuenta las particularidades de la sintaxis JavaScript y TypeScript. Por ejemplo, File Structure (Estructura de archivo) puede mostrar tipos de datos de parámetros si se especifican en la documentación XML.
Structural Search and Replace (Buscar y sustituir estructural) también tiene en cuenta la sintaxis JavaScript/TypeScript.
Finalización de código
Las funcionalidades de finalización de código le ayudan a escribir código JavaScript/TypeScript más rápido. Cuando escribe, ReSharper analiza el contexto y símbolos circundantes que escribió recientemente para sugerir valores adecuados en la lista de finalización. Por ejemplo, ReSharper puede ayudarle a encontrar métodos y propiedades integradas de JavaScript, así como símbolos de bibliotecas JavaScript a las que se hace referencia en el proyecto actual.
Acciones contextuales y otros ayudantes
ReSharper le permite convertir rápidamente partes de su código JavaScript/Typescript con 50 acciones contextuales para JavaScript y TypeScript, además de unas 20 acciones específicas para TypeScript.
Todo el arsenal de otras funciones de asistencia a la codificación de ReSharper (resaltado de sintaxis, reordenar código, ampliar/reducir selección, solo por nombrar algunas) también está a su disposición para código JavaScript y TypeScript.
Compatibilidad con JSDoc
ReSharper facilita la lectura de comentarios JSDoc resaltando su sintaxis. Cuando escribe comentarios JSDoc, ReSharper le ayuda completando lo que escribe. Por ejemplo, puede escribir /** sobre una función y ReSharper generará stubs de documentación para todos los parámetros y para el valor de retorno. Los tipos, typedefs y callbacks de JSDoc también se resaltan correctamente y quedan a disposición en la finalización de código.
Además, todos los comentarios JSDoc para símbolos están disponibles para los usos de estos símbolos en la ventana emergente de Documentación rápida.
Asistencia para expresiones regulares
La compatibilidad para expresiones regulares de ReSharper incluye la comprensión completa de expresiones regulares JavaScript/TypeScript. De forma predeterminada, las expresiones regulares se reconocen en literales de expresiones regulares, constructores y métodos RegExp, así como en métodos de objeto String: match(), search(), replace(), split(). Sin embargo, siempre puede indicarle a ReSharper analizar cualquier literal de cadena como una expresión regular.
Refactorización
En el código JavaScript y TypeScript, puede disfrutar de varias refactorizaciones que funcionan igual que en C#: Inline Variable, Introduce Variable, Introduce Variable for Substring y Rename.
En TypeScript está disponible un conjunto de refactorizaciones sobre tipos: Copy Type, Introduce Field, Move Type to Another File or Namespace y Move to Folder.
También hay una refactorización específica para JavaScript/TypeScript: Move to Resource (Mover a recurso). Esta refactorización funciona en proyectos JavaScript/TypeScript creados desde plantillas Visual Studio (p.ej., Apache Cordova) y permite mover literales de cadena a archivos de recursos.
Todas las refactorizaciones JavaScript/TypeScript también están disponible en sintaxis JSX.
Creación a partir del uso
ReSharper le permite usar símbolos no existentes y luego generar implementaciones adecuadas en base a estos usos en casi todos los lenguajes compatibles. JavaScript y TypeScript no son la excepción: para cualquier símbolo no resuelto, ReSharper sugerirá una o más formas de crearlo.
Generar constructores
Cuando presiona Alt+Insert sobre una declaración de tipo TypeScript, ReSharper le permite crear rápidamente un constructor para este tipo. El asistente de generación de constructor crea un constructor no predeterminado que toma como parámetros los campos seleccionados del tipo y los tipos de base.
Implementar/Anular miembros
Para tipos heredados, hay dos funcionalidades de generación de código relacionadas:
- Implement missing members (implementar miembros faltantes) implementa todos los miembros de interfaz o miembros abstractos faltantes de la clase actual;
- Override members (Anular miembros) hace lo mismo, pero también anula los miembros virtuales si corresponde.
Plantillas de código
ReSharper viene con docenas de plantillas personalizables que cubren todas las construcciones de código usadas frecuentemente en JavaScript y TypeScript. También hay plantillas postfix para TypeScript y JavaScript y plantillas de archivo para clases, interfaces y módulos de TypeScript. Puede ampliar el conjunto predeterminado de plantillas con plantillas personalizadas propias.
Asistencia de estilo de código
ReSharper le ayuda a mantener de forma automática los dos pilares del estilo de código en JavaScript y TypeScript: reglas de formateo de código y convenciones de nomenclatura.
De hecho, el formato de código funciona aún mejor que en C#: presione Alt+Intro sobre un bloque de código seleccionado y elija para ver y configurar todas las reglas de formateo que afectan al bloque seleccionado.
Hay preferencias de estilo de código específicas para JavaScript y TypeScript disponibles: puede mantener un uso consistente de las comillas simples (') o dobles (") para manejar literales de cadena y automáticamente añadir o eliminar el punto y coma opcional para las declaraciones.
En TypeScript, puede además controlar cómo especificar tipos en declaraciones (nombre de tipo explícito, var o any), si usar el modificador public explícitamente y cómo importar módulos.
Todas las preferencias de estilo de código JavaScript y TypeScript se pueden aplicar en cualquier ámbito con un único comando, usando ya sea arreglos rápidos o limpieza de código.
Asistencia para pruebas de unidad
ReSharper ayuda a descubrir y ejecutar pruebas de unidad basadas en QUnit y Jasmine directamente en Visual Studio. Podrá seleccionar qué navegador usar para ejecutar sus pruebas JavaScript/TypeScript u optar por una prueba automatizada (headless) con PhantomJS.
De forma similar a las pruebas de unidad .NET, puede explorar las pruebas JavaScript/TypeScript de su solución con Unit Test Explorer, ejecutarlas desde esta ventana, desde Solution Explorer o directamente desde el editor, así como usar varias sesiones de prueba de unidad.
JSLint, ESLint y TSLint
ReSharper amplía las reglas de análisis de código integradas con compatibilidad para tres herramientas de análisis estático: JSLint, ESLint y TSLint. Todos estos linters ayudan a garantizar que el código JavaScript y TypeScript sea legible y fácil de mantener. También permiten agregar reglas personalizadas, que se pueden incluir en el análisis de código de ReSharper.
En caso de que ya haya un intérprete de Node.js configurado en su equipo, puede habilitar linteres en la configuración de ReSharper en Tools | Web Linters.
Ayudantes de valores JSON y catálogos de esquemas
Los ayudantes de valores JSON le permiten indicarle a ReSharper brindar finalización de código o validación para sus propios archivos JSON. Puede añadir un ayudante en la página de opciones de JSON Value Helpers, coincidencia basada en una máscara de archivo y/o coincidencia de esquema. También se pueden añadir catálogos de esquema JSON personalizados en las opciones JSON.
Nota acerca de los accesos directos
Todos los acceso directo de teclado de esta página están disponibles en el mapa de teclas Visual Studio predeterminado de ReSharper. Para más información sobre los dos mapas de teclas de ReSharper, consulte la documentación de ReSharper.