Formatear código con Prettier

Prettier es un formateador de código obstinado que tomará todo su código, eliminará la inconsistencia en la base de código al diseñar el código y garantizará que el código de salida tenga el formato deseado usando los estilos predefinidos en Prettier. La razón por la que se usa más bonito se da a continuación:

• Ayuda a hacer una alineación adecuada junto con el espacio entre las palabras en el código que mejora la legibilidad general del código de gran tamaño.
• El lector puede comprender fácilmente la estructura que le dará una idea de la lógica del código de un vistazo.
• La longitud y el ancho del código general también se reducen debido a la sangría adecuada del código. Normalmente, se derrama el código en el margen derecho, lo que requerirá un desplazamiento horizontal o puede destruir la forma al envolver la línea de texto de una manera no estructurada.
• Proporcionar el mensaje de error si el código no sigue ninguna sintaxis, nos ayudará a crear un código sintácticamente correcto.
• Hace cumplir el estilo coherente adecuado de la base de código en toda la base de código. Por esta razón, la mantenibilidad del código de gran tamaño es mucho más sencilla.
• Idiomas compatibles con Prettier: JavaScript, TypeScript, JSX, Angular, Vue, CSS, HTML, JSON, GraphQL y muchos más.

También hay muchas otras razones para usar Prettier, pero no las cubriremos aquí.

Pero, ¿por qué usar Prettier? En general, se considera una buena práctica si un proyecto tiene una guía de estilo de codificación común. Debido a esto, se vuelve más fácil para los mantenedores mantener la base de código, para que los recién llegados se adapten a esos estilos, lo que eventualmente también resultará en una gran comprensión de la sintaxis. Incluso si tiene su base de código anterior, puede ejecutar Prettier en su base de código, lo que reformateará todos sus archivos de código masivos en cuestión de segundos. Lo que es más importante, le da la libertad de escribir código de la forma que desee, ya que puede formatearlo correctamente de inmediato. Si le preocupa el índice de aceptación, aquí están las posibles estadísticas a continuación:

• Utilizado por varias grandes empresas como Facebook, Spotify, Discord, PayPal, Dropbox, ESLint y muchas más.
• Más de 40k+ estrellas en Github.
• Tiene más de 13 millones de descargas semanales.

Procedimiento de instalación: para implementar Prettier en nuestro código base, debemos seguir ciertos pasos.

Paso 1: Instale Prettier en su proyecto ejecutando el siguiente comando:

npm install -D prettier

Paso 2: después de agregar Prettier como una dependencia de desarrollo, creemos un archivo llamado `. prettierrc ` que es un archivo de configuración para Prettier, en la raíz del directorio del proyecto y simplemente agregue llaves `{}` en ese archivo, para que cualquiera sepa que su proyecto usa Prettier con la configuración predeterminada.

Paso 3: ahora, agreguemos un comando en la propiedad «scripts» de nuestro paquete.json para ejecutar Prettier.

  "scripts": {
    "format": "prettier --write \"src/**/*.{js,jsx}\""
  },

El comando ` npm run format ` formateará cada archivo ` *.js ` o ` *.jsx ` en el «src/», incluso si su carpeta «src/» contiene varios directorios, este comando regex bajará recursivamente en y darles formato.

Producción:

Integración del editor: puede aprovechar al máximo Prettier usándolo con editores de código. Prettier es compatible con muchos editores como Emacs, Atom, VS Code, Sublime Text, Vim, etc. Siga los pasos a continuación para instalar Prettier en el código de Visual Studio:

• En la barra lateral de Extensiones, busque la extensión «Prettier – Code formatter» e instálela o puede descargarla a través de VS Marketplace Link .
• Haga que Prettier sea su formateador de código predeterminado para esto en Configuración, busque esta configuración » editor.defaultFormatter » y configúrela en Prettier.
• Si necesita que Prettier formatee su código automáticamente una vez que se guarde, busque esta configuración » editor.formatOnSave » y márquela para activarla.

A veces, puede suceder que algunos proyectos no usen Prettier, en tales casos, debe deshabilitar esta configuración, ya que formateará su código incluso si su proyecto no tiene una configuración de Prettier. Pero nosotros, los geeks, tenemos una solución para eso. En la configuración, busque en el menú esta configuración » prettier.requireConfig » y márquela para activarla, al hacerlo se asegurará de que Prettier solo formateará el código si hay un Prettier archivo de configuración ( .prettierrc ) presente en el directorio del proyecto.

Integración de ESLint : si su proyecto usa ESLint, entonces puede tener una configuración en la que se usará Prettier para formatear y ESLint hará el trabajo de detectar errores y mantener la calidad del código. Consulte este artículo para configurar ESLint en su proyecto.
Para integrar Prettier con ESLint, siga los pasos a continuación:

Instale eslint-config-prettier, que desactivará algunas reglas de ESLint que entran en conflicto al usar Prettier

npm install -D eslint-config-prettier

Agregue » más bonito » al último en la array extends en su archivo ` .eslintrc.* `

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended",
    "prettier"                        
  ],
  ...
}

Conclusión: después de instalar Prettier e integrarlo con nuestro Code Editor y ESLint, tenemos una configuración de desarrollo perfecta lista, en la que no tenemos que abarrotar nuestra mente preocupándonos por diseñar el código, recordar la sintaxis adecuada o cualquier otra regla de formato. de proyectos mientras escribimos el código porque ESLint y Prettier se encargarán de eso y podemos concentrarnos más en construir nuestro proyecto.