mlb-config - Prettier

Esta librería proporciona una configuración optimizada de Prettier para proyectos en TypeScript y Angular, asegurando un código limpio, consistente y formateado de manera automática según las mejores prácticas.

1. Instalación

npm i prettier @atmgrupomaggioli/prettier-config -E -D

2. Uso

• Opción 1 (recomendada): Uso mediante prettier.config.mjs o prettier.config.js

  import prettierConfig from '@atmgrupomaggioli/prettier-config';
  
  /**
   * @type {import("prettier").Config}
   */
  const config = {
  	...prettierConfig,
  	overrides: [
  		{
  			files: '*.html',
  			options: {
  				parser: 'angular',
  			},
  		},
  	],
  };
  
  export default config;

• Opción 2: Usar solo la configuración establecida

  Crea un fichero .prettierrc.json en la raíz del proyecto con lo siguiente:

  "@atmgrupomaggioli/prettier-config"

  o también puedes añadir la configuración directamente en el package.json del proyecto:

  {
  	"name": "mi-proyecto",
  	"version": "0.0.1",
  	"prettier": "@atmgrupomaggioli/prettier-config"
  	//...
  }

• Opción 3: Uso mediante prettier.config.cjs (Angular +15)

  const mlbPrettierConfig = require('@atmgrupomaggioli/prettier-config');
  
  /** @type {import('prettier').Config} */
  const config = {
  	...mlbPrettierConfig.default,
  };
  module.exports = config;

• Opción 4: Uso mediante prettier.config.cjs o .prettierrc.cjs

  const config = require('@atmgrupomaggioli/prettier-config');
  
  module.exports = {
  	...config,
  };

3. Extender configuración

Usando la opción 1, opción 3 o opción 4 del paso 2 puedes extender la configuración con otras reglas o plugins de Prettier de la siguiente manera:

// 📄 Ejemplo con el plugin de Tailwind CSS:

import prettierConfig from '@atmgrupomaggioli/prettier-config';

/**
 * @type {import('prettier').Config}
 */
const config = {
	...prettierConfig,
	plugins: ['prettier-plugin-tailwindcss'],
	overrides: [
		{
			files: '*.html',
			options: {
				parser: 'angular',
			},
		},
	],
};

export default config;