Configuraciones 🔖

Esta entrada de marcadores va a dedicarse sobre todo a recursos que tengan que ver con el sistema operativo, la terminal de comandos, navegadores, controles de versiones y repositorios, editores de código y plugins, herramientas para escribir código limpio y otras herramientas en general.

SO, Terminal y Navegadores

---

Sistema operativo

Esta es una elección muy particular, yo en lo personal prefiero trabajar con Linux, en concreto con la distribución de Ubuntu. En el trabajo utilizo Windows, y en el pasado utilizaba MacOS. He pasado por los tres sistemas y desde luego todos los recursos que publico, exceptuando los que son específicos para Linux o Ubuntu, están disponibles para todos o casi todos los sistemas.

Linux

• Configurar Ubuntu 20.04 / 21.04
• Wireless restore
• Touchpad restore

Terminal

Al utilizar Linux, trabajaremos con Bash, en Windows tenemos Power Shell y personalmente no la tengo tan interiorizada. Yo utilizo oh my zsh que tiene temas con colores y es muy configurable. Aquí tienes una guía de Bash y también un artículo con los comandos más utilizados.

• The Bash Guide
• ZSH
• 101 Comandos Bash

Navegadores

Otra elección muy personal. La verdad es que me encanta Firefox y tiene unas herramientas que nos ayudan a maquetar y a desarrollar muy intuitivas, pero no te voy a engañar, utilizo Chrome por defecto, vendo consejos que para mi no tengo. Ambos navegadores tienen practicamente las mismas extensiones disponibles, así que elige el que más te guste.

• Chrome
• Firefox Developer Edition

Extensiones

• Clear Cache - Borra la caché y los datos de navegación con un solo click.
• ColorZilla - Selector de colores, generador de degradados y otras cosas.
• JSON Viewer - Highlighter para JSON.
• Lighthouse - Herramienta para mejorar rendimiento, calidad y corrección de tu web.
• Wappalyzer - ¿Quieres saber que tecnologías usa esta web?
• Octotree - Explorador de archivos para los repos de Github.
• React Developer Tools - Herramientas para debugear React
• Vue.js devtools - Herramientas para debugear Vue
• Svelte Devtools - Herramientas para debugear Svelte
• Redux DevTools - Herramientas para debugear Redux

Control de versiones, Editores de código y Herramientas Clean Code

---

Control de veriones

Existen varios sistemas de control de versiones. Estas herramientas nos ayudan a que nuestro trabajo quede registrado por versiones, es una manera de volver atrás en el tiempo por si la liamos parda. En mi caso y en el de la mayoría de los mortales, uso Git.

Git

Puedes ver como instalar Git aquí. También es interesante que le eches más adelante un ojo a Git Flow, que son un conjunto de extensiones de Git para proporcionar operaciones de alto nivel los repositorios.

Empezar en Git:

• Comandos básicos en Git
• Explorador de comandos Git

Plataformas para repositorios remotos

• GitHub
• Bitbucket
• Gitlab

Git avanzado

• Git Flow

Editores de código

Existen infinidad de editores de código, Vim, Notepad++, Atom, SublimeText, WebStorm, VSCode, etc. Está elección es complicada; al principio pasé por Notepad++, Atom y Sublime, luego me gustaba mucho WebStorm, pero necesitarás licencia, así que finalmente me pasé al que utiliza mucha gente, VSCode.

VSCode

La verdad es que es un editor genial, tienes infinidad de plugins para adaptar casi cualquier herramienta. Te dejo un enlace con una lista personal de plugins.

• VSCode Plugins

Herramientas Clean Code

Aprendiendo a escribir buen código, pero no sabes por dónde empezar... ¿Quitando código muerto? ¿Encontrando variables no utilizadas? ¿Tratando de encontrar patrones problemáticos en tu código? ¿Te suena?

Bueno pues aquí algunas de las herramientas que te ayudarán a superar el drama:

• ESLint - es una herramiente que hace Code linting, que es un tipo de análisis estático, utilizado para encontrar patrones problemáticos o código que no se adhiere a ciertas pautas de estilo.
• Prettier - herramienta que formatea el código para ti de una manera específica.
• Stylelint - Seguro que no has olvidado lo que hace ESLint, pues Stylelint hace lo mismo con tus CSS.
• EditorConfig - EditorConfig nos ayudará a establecer un conjunto de reglas para mantener la forma en la que escribimos código. Imagina que en tu equipo tu usas VSCode pero tu compañero usa Atom y no tiene las mismas tabulaciones. Con esta herramienta tendremos una misma manera de leer y escribir código.
• Lint-Staged - ejecutará linters en los staged files, para que el bad code no se suba tu rama.
• Husky - básicamente te permite hacer Git hook. Esto significa que puedes realizar ciertas acciones cuando estás a punto de confirmar o cuando estás a punto de empujar el código a una rama.