DEV Community: Luis Alvarez

Mis Temas Preferidos | VSCode

Luis Alvarez — Thu, 24 Jun 2021 17:59:51 +0000

Seguramente nosotr@s como developers que pasamos mucho tiempo delante de la computadora haciendo código y desarrollando nuestras aplicaciones queremos cuidar nuestros ojos.

Para eso es que generalmente se utilizan temas de modo oscuro los cuales hacen que pasar mucho tiempo frente a una pantalla y tener menos impacto negativo para nuestra vista.

Y como muchos devs también queremos que nuestro editor VSCode sea lo mas personalizable posible para nuestro gusto, es por eso que quise hacer esta lista con los temas que a mi opinión son muy atractivos a la vista.

⚡ Set Up

Antes de mostrarte los temas quiero mostrarte como puedes cambiar los temas y ver los que ya tengas instalados o por defecto en tu VSCode

Con la combinación de teclas Ctrl + K Ctrl + T y te mostrara los Color Themes disponibles, puedes moverte usando las flechas y tener una preview de como se ve el tema y la sintaxis

Otra manera un poco mas larga en caso no te funcione este comando puedes ir a
File > Preferences > Color Theme

Code > Preferences > Color Theme en MacOs

Cuando encuentres uno de tu agrado solo presiona Enter o da Click sobre el Tema

Tambien si decides colocarlo a un usuario puedes hacerlo en la configuración, utilizando Ctrl + ,

Y te mostrara un archivo JSON donde puedes colocar el nombre del Tema que quieras colocar con el siguiente código:

// Especifica el tema utilizado en el entorno de trabajo
  "workbench.colorTheme": "Default Dark+"

📦 VSCode Marketplace

Bien ahora para descargar nuevos temas, debemos dirigirnos al icono de Extensions de nuestro editor donde podemos buscar Plugins, Snippets, Themes, etc

En este caso solo lo usaremos para los temas que te mostrare para que puedas probarlo en tu VSCode

✨ Lista de Temas

Dark+ (default Dark)

Para mi el temas por defecto de VSCode es muy bueno y con un buen soporte y color de sintaxis para muchos lenguajes como TypeScript

One Dark Pro

Nord

Palenight

Horizon Theme

Tokyo Night

Github Theme

SynthWave'84

Monokai Pro

Outrun

Night Owl

Dobri Next

Ariake Dark

Espero y te haya gustado la lista de los temas que en mi opinión están muy bien hechos :D
Si tienes alguno puedes dejarlo en los comentarios ⭐

Rutas Alias en JavaScript para React, Vuejs...

Luis Alvarez — Sat, 22 May 2021 03:25:11 +0000

Las Path Aliases o rutas relativas como muchos las pueden conocer, nos ayuda cuando tenemos un proyecto utilizando JavaScript o algún Framework como Vuejs o Nextjs(React), utilizamos el import { } from ''

Por ejemplo:

import Component from '../../../components/Component'
// Ö
import Logo from '../../../assets/principal/logo.png'

Lo cual cuando tienes múltiples directorios y archivos se vuelve muy algo tedioso cuando necesitas importar algo

Incluso puede suceder que por algún refactor muevas una carpeta a un nivel mas arriba, por ejemplo:

import Logo from '../../../assets/principal/logo.png'
// Y lo cambian a...
import Logo from '../../../assets/logo.png'

Entonces tendríamos un error en todos los archivos donde importemos este "Logo" o Componente ya que la ruta no funcionara y no encontrara nuestro archivo que deseamos

Por ejemplo, en la imagen de arriba nos mostrara que el modulo no fue encontrado o no se resolvió la ruta de donde importamos el archivo

Por suerte existe una solución :D

Debemos crear en la ruta raiz de nuestro proyecto un archivo jsconfig.json

Y dentro pondremos la siguiente estructura:

{
 "compilerOptions": {},
 "include": [],
 "exclude": []
}

compilerOptions

Son las opciones que le pasaremos al compilador que usemos de nuestro proyecto JavaScript

Como la ruta base de nuestro proyecto, la versión de ecmascript que estemos usando

Esto se refiere a si usamos:

import Foo from './foo'
// Ó
const bar = require('./bar')

Include

Aquí es donde pasaremos la carpeta que hara referencia a nuestra ruta

Por ejemplo si usamos la carpeta comúnmente usada src

Haremos referencia a ese directorio

Exclude

Lo que hace esta opción es excluir o ignorar las carpetas que le pasemos dentro de las opciones

Por ejemplo la famosa carpeta de agujero negro, node_modules

Ya que solo queremos que nuestros archivos de desarrollo tengan las rutas relativas

Entonces con todo esto listo nuestro archivo se vería algo así:

{
  "compilerOptions": {
    "baseUrl": "src",
    "target": "es6"
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

Muy entonces dentro de nuestro proyecto podemos importar desde algún directorio que este dentro de src

Con esto estaría listo, cabe resaltar que algunos compiladores aun no aceptan por completo este tipo de archivo lo cual es raro ya que es una configuración de JavaScript pero aun así puedes intentarlo en tu proyecto :D

Tambien puedes establecer rutas especificas dentro de otras carpetas agregando dentro de compilerOptions la propiedad llamada paths

Aquí un ejemplo:

// El nombre de la izquierda puede ser cualquiera
// Solo que sea algo sencillo de entender
"paths": {
  "components": ["src/components"],
  "carpeta": ["src/carpeta/otraCarpeta"]
}

Y en tu archivo jsconfig.json se vería algo así:

No es necesario exportar el archivo, ni importarlo dentro de algún fichero en tu proyecto, generalmente funciona automáticamente

Ahora en caso estés utilizando Typescript el proceso es el mismo solo que tu archivo deberá llamarse: tsconfig.json

Si deseas aprender y conocer muchas mas opciones puedes leer la documentacion oficial y aunque sea de Visual Studio Code, puede ser usada en cualquier editor como Vim, Sublime Text, Atom, etc.

🔗Documentacion Oficial

Dime en los comentarios que te pareció, o si tienes algún error para ayudarte 💫

Configurar EsLint y Prettier junto con VScode

Luis Alvarez — Tue, 04 May 2021 00:19:06 +0000

¿Que es EsLint?

ESLint es una herramienta de código abierto enfocada en el proceso de "lintig" para javascript (o más correctamente para ECMAScript)
ESLint es la herramienta predominante para la tarea de "limpiar" código javascript tanto en el servidor (node.js) como en el navegador

Bueno, ESLint es una herramienta de "linting", por lo que te puede ayudar a:

Mostrarte errores de sintaxis.
Mostrarte errores cuando no se siguen buenas prácticas.
Proveer sugerencias para mejorar tu código.
Mantener un estilo consistente en tu código o reforzar reglas internas de tu propio equipo.

¿Que es Prettier?

Es una herramienta para formatear el código, tiene soporte para HMTL, CSS, JavaScript, JSX, TypeScript, GraphQL, etc.

Se encarga de garantizar que el código se ajuste a un estilo consistente de manera automática. Para ello, analiza el código y lo re-escribe cada vez que se ejecuta.

¿Que es VScode?

Es un editor de código multiplataforma, totalmente gratis desarrollado por Microsoft

Incluye soporte para la depuración, control integrado de Git, resaltado de sintaxis, finalización inteligente de código, fragmentos y refactorización de código.

También es personalizable, por lo que los usuarios pueden cambiar el tema del editor, los atajos de teclado y las preferencias.

Configuración:

Ahora configuraremos las dependencias que necesitaremos, lo primero es crear nuestro proyecto utilizando

# Inicializa un proyecto utilizando npm para instalar paquetes
npm init --yes
# ó
npm init -y

Después de eso instalaremos las dependencias necesarias para empezar a configurar Eslint y Prettier

# --sabe-dev Guarda las dependencia en forma de desarrollo
npm install --save-dev eslint prettier eslint-config-prettier 
eslint-plugin-prettier

EsLint

La forma de configurar esLint es creando un archivo de configuración el cual podemos crear o podemos utilizar un comando para crear este archivo según nuestras necesidades:

# .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended'
  ],
  rules: {
    'prettier/prettier': 'warn',
  },
};

De esta manera será ESLint el que se encargará de ejecutar Prettier.

O podemos utilizar el siguiente comando que nos mostrara unos pasos para tener pre configurado nuestro archivo de EsLint

# Crea el archivo eslint
npx eslint --init

Nos mostrara una pequeña serie de pasos para crear nuestro archivo de EsLint:

Primero seleccionaremos como queremos usar EsLint, si solo para revisar la sintaxis, encontrar problemas o forzar un estilo del codigo

Ahora seleccionaremos el tipo de módulos queremos usar, si utilizar import o require

Ahora podemos seleccionar el Framework que utilizaremos en nuestro proyecto, si React, VueJs o Vanilla Javascript

También podemos seleccionar si queremos o estamos utilizando TypeScript

Y ahora podemos seleccionar el tipo de Enviroment o Entorno para la ejecución de nuestro proyecto si en el Navegador o entorno de NodeJs

Y ahora una parte un tanto importante.

Podemos utilizar una guía de estilo ya definida, inspeccionar nuestros archivos JavaScript, etc

En este caso utilizaremos una style guide ya definida

Ahora puedes seleccionar que guía de estilo quieres utilizar en tu proyecto, siendo estas las mas populares, están muy bien construidas y con buenas configuraciones

Note:

Si estas utilizando React, una recomendación es utilizar la guía de Airbnb

Seleccionaremos el formato que queremos utilizar para nuestro archivo de configuración.

Esto es basado en gustos o preferencias de cada proyecto, en este caso utilizaremos JSON pero cualquier otro formato funciona de la misma manera

Después de estas opciones comprobara las dependencias necesarias, y si no están te mostrara que puedes instalar las dependencias necesarias dependiendo de la configuración antes hecha, y las colocara como dependencia de desarrollo.

Con esto tendremos nuestro archivo .eslintrc.json

Prettier

Ahora configuremos Prettier, en la misma documentacion se ha recomendado usar un diferentes formatos como JSON, YAML, TOML y JS
En este ejemplo usaremos JSON que es lo mas sencillo para empezar a configurar

Entonces crearemos un archivo .prettierrc y dentro del archivo colocaremos las opciones que necesitamos en nuestro proyecto

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

Si tenemos un archivo especifico que queremos o no formatear, por ejemplo los archivos de Test
Podemos colocar en expresiones regulares, que se ignore todos los archivos con cierta extensión

Inclusive dentro de cada cierto archivo puedes colocar ciertas opciones especificas

{
  "semi": false,
  "overrides": [
    {
      "files": "*.test.js",
      "options": {
        "semi": true,"tabWidth": 2
      }
    },
    {
      "files": ["*.html", "legacy/**/*.js"],
      "options": {
        "tabWidth": 4
      }
    }
  ]
}

Ahora dentro de nuestro archivo de configuración podemos crear diferentes reglas las cuales ayudaran a dar un mejor estilo a nuestro código o para seguir buenas practicas

Scripts

Con todo listo podemos crear scripts lo cual nos ayudara a automatizar el "linteo" o formatear nuestros archivos simplemente con un comando

Dentro de nuestro package.json vamos a la sección de scripts, tendremos uno llamado "test" que no utilizaremos por el momento, o si ya tienes mas scripts en tu proyecto, simplemente agrega una coma y puedes colocar estas 3 opciones que explicaremos cada una de sus funciones

Lint
Ejecuta eslint para "lintear" y revisar la sintaxis de todos nuestros archivos en nuestro proyecto
Lint-fix

Ejecuta eslint con el flag —fix que hace que si encuentra un estilo que no se sigue una regla la cual causa un conflicto con eslint, la corrige
Format

Ejecuta Prettier para formatear todos nuestros archivos

Ahora solo ejecuta npm nombreDelComando

npm run lint
npm run lint-fix
npm run format

VScode

Si estas utilizando el editor de código Visual Studio Code o VScode

Puedes integrar EsLint y Prettier dentro del mismo editor utilizando las extensiones con el mismo nombre:

Probablemente te aparezca con la palabra Install le darás click ahí para instalarlas

Después de que estén instaladas, nos iremos a la configuración de Visual Studio Code

Puedes presionar el shortcut ctrl + , o en la esquina inferior donde hay un símbolo de una tuerca, darás click y darás en settings

Te saldrá una ventana nueva, y arriba a la derecha estará un símbolo o icono el cual debes presionar para abrir la configuración en formato JSON ya que así es como se configura VScode

Y agregaremos estas configuraciones básicas para tener funcionando las extensiones de Eslint y Prettier en nuestro editor sin necesidad de crear los archivos, lo cual es mas recomendable utilizar en proyectos con mas personas ya que cada desarrollador y desarrolladora tiene su propia configuración

"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
 },

También podemos definir estilos en nuestra configuración para un lenguaje especifico:

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.tabSize": 2
},
"[python]": {
    "editor.tabSize": 4
},

Y con esto tendremos listo nuestra integración de eslint y prettier en vscode :D