Plugins de Atom para el desarrollo web

El editor es la herramienta principal de un desarrollador y estos normalmente tienen un sistema de plugins que nos permiten extender las funciones propias para hacerlos más útiles según la tecnología o el lenguaje con el que trabajemos.

Hay muchos plugins útiles dependiendo de que programes. En este artículo voy a compartirle una lista de algunos excelentes para desarrollar aplicaciones con un stack Node + Go + React, que es en mi caso lo que uso casi a diario con Atom, -para Python uso PyCharm pero eso ya es otro post-.

atom-ternjs

Te provee de Code Intellisense para obtener un autocompletado de código extramadamente poderoso con soporte para WebAPIs, módulos de Node.js y FlowType. Otra característica de este plugin es el de mostrarte los tipos de datos que reciben y devuelven las funciones que uses.

autocomplete-modules

Detecta los módulos que tengas instalados en node_modules y te permite usar autocompletado de nombres cuando los importemos ya sea usando require o import.

Si usas Webpack, este plugin lee la configuración para buscar resolve.modulesDirectories y detectar carpetas de módulos personalizadas. Si usas el plugin de Babel Module Resolver, entonces utiliza los alias difinidos en .babelrc para también autcompletar sus nombres.

autocomplete-paths

Similar al anterior, solo que autocompleta los módulos que importes de forma relativa, mostrando todos los archivos de nuestros sistema de archivos para poder importarlos fácilmente.

docblockr

Algo muy importante, más si trabajas en equipo, es documentar el código. Una forma en JS de hacerlo es usando JSDocs el cual consiste en dejar bloques de comentarios con la siguiente sintaxis:

/**
 * Generate a greating message
 * @method greating
 * @param  {string} name        The person name
 * @param  {string} [lang='en'] The message language
 * @return {string}             The greating message
 */functiongreating(name, lang = 'en') {
  if (lang === 'es') return`Hola ${name}`;
  return`Hello ${name}`;
}

Algo como eso y este plugin, ayuda a generar esta documentación automáticamente simplemente escribiendo /** en la línea anterior a nuestra función y dando enter se autogenera este bloque con todas nuestras variables, detectando los nombres, valores por defecto y el tipo de dato.

editorconfig

Permite soportar EditorConfig en Atom. Esto sirve para definir cómo el editor va a manejar ciertos archivos. Por ejemplo, indicando el tipo de indentación, el tamaño, el charset y otras reglas configurables para cada tipo de archivo.

Esto nos asegura que todos los desarrolladores de un proyecto van a tener la misma configuración no importa si uno hace Python o el otro JS.

emmet

Brinda la posibilidad de usar Emmet en Atom. Emmet es una herramienta genial para cualquier desarrollador web porque dispone de abreviaciones para generar código HTML y CSS, lo mejor, soporta JSX.

language-babel

Agrega soporte para todo los nuevo de ECMAScript, JSX, FlowType, queries de GraphQL, styled-components, etc. con autocompletado, atajos de teclado como comentar líneas de JSX, terminar etiquetas JSX automáticamente, auto indentar (detectando nuestra configuración de ESLint) y muchas otras cosas.

Si hacen JS este es el syntax highlight que deberían usar.

linter-eslint

Detecta la configuración de ESLint que tengas en el proyecto y marca los errores que el linter detecte, de esta forma podemos arreglarlos inmediatamente sin tener que revisarlos en nuestra consola y evitar mandar mal código a producción.

linter-stylelint

Similar al anterior, aunque este se integra con Stylelint para revisar el CSS y detectar posibles errores o malas prácticas.

go-plus

Transforma Atom en un IDE para el desarrollo de aplicaciones en Golang. Agrega autocompletado, formateo de código, con go-debug puedes hacer debugging desde Atom, este plugin es muy completo si deseas trabajar con Go en Atom.

¿Haz usado alguno de estos plugins? ¿Cuáles son tus favoritos? Escríbeme en los comentarios tu experiencia con estos plugins y si usas algún otro que no esté en el listado para compartirlo con la comunidad.