Mi entorno de desarrollo web

July 21, 2019 • ☕️ 3 minutos de lectura

Entorno de desarrollo

VISUAL CODE STUDIO

Estos son los plugins que uso para mi visual code studio, todos me hacen la vida un poco más sencilla.

Import Cost

Si te preocupas por el rendimiento de tu sitio, Import Cost te ayudará indicándonos el coste en KB.

Night Owl

Uso este theme principalmente porqué me gustan sus colores, el modo oscuro es ideal para la noche 🦉, Light Owl: para el día.

Simple Icons

Pack de iconos con mucho contraste, para tener bien identificados nuestros ficheros.

Styled Component

Nos colorea la sintaxys de nuestros styled-components.

DotENV

Nos ayuda con la sintaxys de archivos .env

Docker Explorer

Nos muestra información sobre Docker (Contenedores, imágenes, registros, redes y volúmenes).

Prettier - Code formatter

Da formato a nuestro JavaScript / TypeScript / CSS usando Prettier.

Standard eslint

ESLint es una herramienta para analizar nuestro código e identificar errores en JavaScript. Además nos hace fix de muchos de ellos.

Lo instalaremos como dependencias de desarrollo, aunque podríamos instalador de forma global.

npm i standard --save-dev

Abrimos la configuración de VSCode ⌘ + ,:

  • Format On Save: false
  • Prettier: Eslint Integration: true
  • Eslint: Auto Fix On Save: true

Ahora añadimos a el package.json de nuestro proyecto el siguiente código.

{
  //...
  "scripts": {
        //...
        "lint": "standard",
    },
  "standard": {
        "ignore": [
            "/directorio/**"
        ]
    },
    "eslintConfig": {
        "extends": [
            "./node_modules/standard/eslintrc.json"
        ]
    }
}

Visual Studio IntelliCode

Nos ayudará con el autocompletado del código.

Remote Development

Este plugin es ideal para hacer coneciones ssh, contenedores docker o wsl.

Para conectar mediante ssh, debemos configurar el fichero ~/.ssh/config

host tudominio.com
    HostName tudominio.com
    User user
    Port 22
    IdentityFile ~/.ssh/id_dsa

Terminal

Para el terminal, nunca termino de decidirme entre Iterm2 o HyperJs, así que instalo ambos 😅

Iterm 2

Theme

HyperJS

Theme

Oh my Zsh

Oh my Zsh! nos permite personalizar el prompt.

Spaceship prompt, nos ayuda añadiendo al prompt lo siguiente.

  • Nombre del directorio
  • Información del repositorio de git (e.g. nombre de la rama, archivos vambiados, etc.)
  • Versión de nodejs
  • Versión del paquete (la que se encuentra en un archivo package.json)

npm install -g spaceship-prompt

Brew:

Instalador de paquetes para Mac OS.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Firacode

Tipografía monoespaciada especial para la programación. Como peculiaridad convierte => en flechas

brew tap homebrew/cask-fonts
brew cask install font-fira-code

Ahora para usarlas abrimos las preferencias de VSCode ⌘ + ,, pulsamos en los corchetes { } y añadimos el siguiente código. Yo uso pantalla retina, asi que lo configuro para tal. Si no dispones de pantalla retina "editor.fontFamily": "Fira Code",

{
    "editor.fontFamily": "FiraCode-Retina",
    "editor.fontLigatures": true,
}