Complementos de texto sublime para desarrolladores de JavaScript

El editor de texto Sublime es un nombre bastante familiar entre la comunidad de desarrolladores (tanto principiantes como profesionales). Ha sido desarrollado con soporte multiplataforma para editar código fuente y texto.

Aunque la versión actual (Sublime text 3) está en etapa beta, es más rápida que la versión 2 y viene con muchas funciones. Admite de forma nativa una amplia gama de lenguajes de programación y marcado, y los complementos de editor de texto sublime gratuitos creados por la comunidad han llevado su funcionalidad a un nuevo nivel.

Muchos desarrolladores se adhieren a este editor debido al amplio repositorio de complementos. En este artículo nos centraremos en algunos de los complementos que son más útiles para los desarrolladores de JavaScript.

pelusa

Las herramientas de Linting ayudan a los desarrolladores a detectar errores, discrepancias sintácticas y problemas potenciales. También se puede utilizar para asegurarse de que el proyecto se corresponde con una determinada directriz de codificación.

SublimeLinter-eslint

Admite la versión Sublime Text 3 y proporciona una interfaz para ESLint para operar con archivos que tienen la sintaxis «JavaScript». SublimeLinter 3, Node.js, npm y eslint son el requisito previo para instalar este complemento. Abarca una gran cantidad de reglas con opciones para personalizar también ellos. Se le dará la opción exacta para escribir en el archivo de configuración para desactivar cada advertencia y error. Una cosa importante a tener en cuenta aquí es que este complemento es el único compatible con JSX y el soporte para ES6 es mucho más superior en comparación con otros complementos.

Uso: según la configuración de SublimeLinter, el código se borrará mientras se edita o se guarda. Esto se puede configurar usando Choose Lint Modeel comando.

Sublime-JSHint

El complemento JSHint Gutter es compatible con Sublime Text 2 y 3. Permite a los desarrolladores verificar el código JavaScript en busca de errores terribles y convenciones de codificación. Este complemento también se puede configurar para mostrar sugerencias en el canalón y funcionar sin problemas con archivos .jshintrc específicos del proyecto. Se basa en JSHint, una bifurcación de JSLint. Como el linter está escrito en JavaScript, se requiere Node.js para interpretar el código JavaScript fuera del navegador.

Uso: Ctrl+alt+Jpara Windows o Cmd+Option+Jsi estás en una Mac. También puede hacer clic derecho, seleccionar JSHint y hacer clic en Lint Code. Otra forma es abrir un archivo JavaScript, abrir la consola en Sublime Text desde Ver, luego Mostrar consola y escribir view.run_command("jshint"). Se recomienda configurar su propia combinación de teclas para esto yendo a Preferencias -> Asociaciones de teclas – Usuario, y agregando un comando como { "keys": ["ctrl+shift+j"], "command": "jshint" }en esa matriz.

Formateo

Las herramientas de formato se utilizan para embellecer los bloques de código y formatearlos para hacerlos más legibles.

Sublime-jsfmt

Este complemento admite ambas versiones de Sublime Text y formatea automáticamente el código JavaScript de acuerdo con un estilo particular. El desarrollador no necesita leer las advertencias y solucionar el problema de formato manualmente. Se puede instalar a través del administrador de paquetes seleccionando jsfmten el menú desplegable.

Uso: el archivo .jsfmtrc específico del proyecto se puede colocar en el directorio raíz del proyecto para configuraciones. Se puede acceder a través de la siguiente ruta: Preferences -> Package Settings -> Sublime JSFMT. Aparte de esto, existe una disposición para configurar un atajo de teclado yendo a Preferencias -> Combinaciones de teclas – Usuario y agregando { "keys": ["ctrl+q"], "command": "format_javascript" }la matriz.

formato js

Tiene soporte para ambas versiones de Sublime Text. Este complemento de formato de JavaScript utiliza el formateador de línea de comandos de jsbeautifier en segundo plano para formatear todo el archivo js, ​​json o solo la parte seleccionada de un archivo. La configuración específica del proyecto también se puede realizar mediante la configuración del archivo .jsbeautifyrc. Aparte de esto, los espacios en blanco y los estilos de formato también se pueden personalizar.

Uso: la combinación de teclas predeterminada es ctrl+alt+fpara Windows y cmd+option+fen Mac. El complemento usa la configuración de tabulación/sangría configurada con la configuración estándar translate_tabs_to_spacesy tab_sizesublime.

Análisis de código

Estos son los motores de inferencia de código que se utilizan para acelerar el proceso de desarrollo al proporcionar autocompletado de código, sugerencias de argumentos de función, etc.

Tern para Sublime

Este complemento de análisis de código para JavaScript se ha desarrollado para integrarse con editores de código para la edición inteligente de JavaScript. Viene con algunas características ingeniosas como:

• Autocompletado en variables y propiedades
• Sugerencias de argumentos de función
• Consultar el tipo de una expresión
• Refactorización automática

Debe asegurarse de que Node.js y npm estén instalados antes de proceder a instalar este complemento.

Uso: simplemente use alt+.para saltar a la definición de la cosa a la que apunta el cursor y alt+,para volver a donde estaba cuando ejecutó el alt+.comando anterior. Finalmente, alt+spacepara seleccionar todas las referencias a una variable en particular en el archivo actual.

Resaltado de sintaxis

En esta sección, veremos un complemento de resaltado de sintaxis.

JavaScriptSiguiente

Este complemento es un excelente resaltador de sintaxis de JavaScript. Además de mejorar el resaltado de sintaxis para ES5, también es compatible con la nueva sintaxis de ES6, como módulos, métodos sucintos, funciones de flecha, clases y generadores. Se puede instalar a través Package Controlde seleccionando JavaScript Nexten el menú desplegable.

Uso: para usar este complemento para un archivo JavaScript individual, puede cambiar la configuración en view -> syntax -> JavaScriptNext. Para configurar esto como sintaxis JavaScript predeterminada, abra un archivo javascript y luego seleccione View -> Syntax -> Open all with current extension as... -> JavascriptNext. El ColorScheme también se puede cambiar seleccionando uno de Preferences -> Color Scheme -> JavaScriptNext.

Documentación

Ahora veremos un complemento que hace que sea bastante fácil escribir comentarios y documentaciones de código.

sublime-jsdocs

El complemento DocBlockr es compatible con Sublime text 2 y 3 para JavaScript, incluidas las especificaciones ES6. Se puede instalar simplemente seleccionando DocBlockr en el archivo package control. Este complemento es altamente configurable y le permite completar comentarios automáticamente, extender comentarios, decorar comentarios, agregar documentación relacionada con variables y funciones.

Uso: escriba /**y presione enter o tab para crear una nueva línea y cerrar el comentario. Mientras escribe la documentación para la función, verá que intenta hacer conjeturas inteligentes sobre el valor devuelto y, en el caso de la variable, intenta determinar el tipo de variable a partir de su nombre.

Complementos para bibliotecas de JavaScript

Puede instalar complementos para algunas de las bibliotecas de JavaScript más populares, como AngularJS y jQuery. Además, algunos complementos lo ayudan a acelerar el proceso de desarrollo al proporcionar fragmentos de código. Por ejemplo, se puede instalar el complemento de fragmento de JQuery para el desarrollo de jQuery.

Conclusión

En este artículo, cubrimos algunos de los complementos útiles para los desarrolladores de JavaScript. No dude en compartir cualquier otro complemento útil en la sección de comentarios y ayudar a la comunidad de desarrolladores.