Convierte Sublime Text 3 en un IDE de JavaScript

Sublime Text es uno de los editores más populares para desarrollo web y desarrollo de software en general. Es muy fluido y rápido en comparación con otros editores (estar escrito en C++ ayuda a esa velocidad). Sublime también tiene toneladas de complementos que puedes encontrar a través de Package Control.

Pero es sólo un editor de texto y no un IDE . Un IDE es una aplicación de software que proporciona instalaciones integrales a los programadores de computadoras para el desarrollo de software. De hecho, Sublime no ofrece funciones como herramientas de depuración, herramientas integradas para compilar y ejecutar aplicaciones, sugerencias de código inteligentes o refactorización de código. En su lugar, ofrece un conjunto de API que puedes utilizar para ampliarlo. Aquí hay una introducción al complemento de mejora de JavaScript (creación mía) que hace que Sublime sea un poco más parecido a un IDE para el desarrollo de JavaScript.

¿Qué es el complemento de mejora de JavaScript?

Es un complemento para Sublime Text 3 que ofrece muchas funciones útiles para crear, desarrollar y administrar proyectos de JavaScript. Los más importantes son:

1. Completar automáticamente de forma inteligente
2. Detección de errores y pelusa
3. Código de refactorización

Se pueden encontrar varias otras características en la página Wiki .

La mayoría de las funciones se implementan utilizando Flow, que es un verificador de tipos estáticos para JavaScript creado por Facebook (si conoces TypeScript, es bastante similar). El objetivo principal de este complemento es convertir Sublime Text 3 en un IDE de JavaScript. Está en desarrollo activo y evolucionará otras funciones con el tiempo.

Instalación

Hay dos formas de instalarlo. La más sencilla es a través de Package Control, la otra es instalarlo manualmente siguiendo estos sencillos pasos.

Requisitos

• Sublime Text 3 compilación 3124 o posterior
• Node.js (6 o posterior) y npm
• Complemento TerminalView Sublime Text (solo Linux y Mac OS X)

Sistemas compatibles

Debido a que Flow solo funciona en sistemas de 64 bits, este complemento admite:

• Mac OS X
• Linux (64 bits)
• Windows (64 bits)

Completar automáticamente de forma inteligente

Sublime Text tiene su propia función de autocompletar, pero carece de potencia, por lo que no es tan útil como podría ser. Con este complemento, obtendrás el autocompletado basado en el contexto actual , como cualquier otro IDE . Por ejemplo, obtendrá terminaciones de sus clases importadas definidas en otros archivos, como propiedades y métodos.

Además, la lista de completaciones también contendrá información sobre el tipo de variables y la firma de funciones para obtener una descripción general rápida de ellas.

Así es como funciona con el complemento:

…y sin el complemento:

Detección de errores y pelusa

Sublime Text no tiene un sistema de detección de errores y/o linting de forma nativa. Gracias a Flow, esto se puede hacer usando sus propios comandos CLI.

En primer lugar, debe crear un proyecto de JavaScript (consulte la página wiki Creación de un proyecto de JavaScript). Para permitir que el servidor Flow revise sus archivos, debe agregar un comentario especial en ellos: // @flow.

También puedes configurar más opciones en el .flowconfigarchivo (consulta el sitio web oficial para personalizar tu configuración de Flow. Por ejemplo, si deseas permitir que el servidor Flow verifique todos los archivos y no solo aquellos con @flow, debes configurar la allopción en true:

[options]# all=off by defaultall=true

Para permitir que el servidor Flow verifique también archivos individuales que no forman parte de un proyecto, puedes activar la opción Tools JavaScript Enhancements Use Flow checker on current view (Not used in project)para cada Vista Sublime. En este caso, el servidor Flow verá solo la vista actual.

A cambio, como se dice en el sitio web oficial, la configuración de pelusa se puede especificar en la .flowconfigsección [lints] como una lista de rule=severitypares. Estas configuraciones se aplican globalmente a todo el proyecto. Un ejemplo es:

[lints]# all=off by defaultall=warnuntyped-type-import=errorsketchy-null-bool=off

La configuración de Lint también se puede especificar directamente en un archivo mediante flowlintcomentarios. Por ejemplo:

/* flowlint*   sketchy-null:error,*   untyped-type-import:error*/

Código de refactorización

Sublime Text no ofrece un sistema de refactorización de código de forma nativa. Esto se realiza con la ayuda de los comandos de Flow CLI para obtener la información necesaria. Por el momento, este complemento ofrece varias funciones de refactorización de código, que incluyen:

• Convertir una función de flecha
• Exportar :
  • Función
  • clase
  • Variable
• Copia segura
• Mudanza segura
• Eliminación segura
• Extracto:
  • Variable
  • Campo (método actual, declaración de campo, constructor de clase)
  • Parámetro
  • Método (alcance global, alcance actual, método de clase)

Algunos de ellos también pueden tener una vista previa disponible. Además, funciones como Safe Move solo funcionarán en proyectos de JavaScript (también aquí, consulta la página wiki Creación de un proyecto de JavaScript ).

Apoyo

Problemas/Preguntas

Si tiene algún problema, cree un problema. Consejo profesional: primero haga una búsqueda rápida para ver si alguien más no hizo la misma pregunta antes. Para pequeñas preguntas, puedes utilizar Gitter.

Solicitudes de funciones y mejoras

Para solicitudes de funciones, cree un problema o utilice Gitter.

Contribuciones financieras

Si este proyecto te ayuda a reducir el tiempo de desarrollo y también te gusta, considera apoyarlo con una donación en Patreon, Open Collective o usando PayPal. ¡Gracias!