Convierta Sublime Text 3 en un IDE de JavaScript | Programar Plus

Sublime Text es uno de los editores más populares para el desarrollo web y el 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 puede encontrar a través de Package Control.

Pero es solo un editor de texto y no un IDE. Un IDE es una aplicación de software que proporciona a los programadores de computadoras instalaciones completas 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 inteligente o refactorización de código. En su lugar, ofrece un conjunto de API que puede utilizar para ampliarlo. Aquí hay una introducción al complemento de mejora de JavaScript (mi propia creación) que hace que Sublime sea un poco más similar al IDE para el desarrollo de JavaScript.

¿Qué es el complemento de mejora de JavaScript?

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

  1. Autocompletar inteligente
  2. Detección de errores y pelusa
  3. Código de refactorización

Varias otras características se pueden encontrar en la página Wiki.

La mayoría de las funciones se implementan utilizando Flow under the hood, que es una verificador de tipo estático para JavaScript creado por Facebook (si conoce TypeScript, es bastante similar). El objetivo principal de este complemento es convertir Sublime Text 3 en un IDE de JavaScript. Está en desarrollo activo e incluirá otras características a lo largo del 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

  • Texto sublime 3 construir 3124 o mas nuevo
  • Node.js (6 o más reciente) y npm
  • TerminalView Complemento Sublime Text (solo Linux y Mac OS X)

Sistemas soportados

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

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

Autocompletar 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á el autocompletado basado en el contexto actual, como cualquier otro IDE. Por ejemplo, obtendrá finalizaciones de sus clases importadas definidas en otros archivos, como propiedades y métodos.

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

Así es como funciona eso con el complemento:

… y sin el complemento:

Detección de errores y formación de pelusas

Sublime Text no tiene un sistema de detección de errores y / o deshilachado 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 verifique sus archivos, debe agregar un comentario especial en ellos: // @flow.

También puede configurar más opciones en el .flowconfig archivo (consulte el sitio web oficial para personalizar su configuración de Flow. Por ejemplo, si desea permitir que el servidor de Flow compruebe todos los archivos y no solo aquellos con @flow, necesitas configurar el all opción a true:

[options]
# all=off by default
all=true

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

En cambio, como se dice en el sitio web oficial, la configuración de pelusa se puede especificar en el .flowconfig [lints] sección como una lista de rule=severity pares. Esta configuración se aplica globalmente a todo el proyecto. Un ejemplo es:

[lints]
# all=off by default
all=warn
untyped-type-import=error
sketchy-null-bool=off

La configuración de pelusa también se puede especificar directamente en un archivo usando flowlint comentarios. 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 la CLI de Flow para obtener la información necesaria. Por el momento, este complemento ofrece varias funciones de refactorización de código, que incluyen:

  • Convertir a función de flecha
  • Exportar:
    • Función
    • Clase
    • Variable
  • Copia segura
  • Movimiento seguro
  • Eliminación segura
  • Extraer:
    • 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 disponible avance. Además, las características, como Safe Move, solo funcionarán en proyectos de JavaScript (también aquí, consulte la página wiki de Creación de un proyecto de JavaScript).

Apoyo

Problemas / Preguntas

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

Solicitudes de funciones y mejoras

Para solicitudes de funciones, cree un problema o use 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!

(Visited 18 times, 1 visits today)