🧹 @cajuinasi/prettier-config

Configuração oficial do Prettier usada nos projetos da CajuinaSI, padronizada com as regras do ESLint e com suporte para projetos Front-end (Astro, Next.js) e Back-end (NestJS).

✨ Características

• ⚙️ Três configurações especializadas: Default, Frontend e Backend
• 🎯 Compatível com ESLint - Indentação de 2 espaços, sem espaços múltiplos
• 💨 Plugins para Front-end: Tailwind CSS e Astro
• 🚀 Suporte universal: CommonJS (.js), ESM (.mjs), TypeScript (.d.ts)
• 🔄 Plug-and-play - Zero configuração adicional necessária

📦 Instalação

pnpm add -D @cajuinasi/prettier-config
# ou
npm install -D @cajuinasi/prettier-config
# ou
yarn add -D @cajuinasi/prettier-config

🎯 Configurações Disponíveis

1. Default (Balanceada para Front e Back)

Configuração padrão que combina o melhor dos dois mundos.

Características:

• ✅ Indentação: 2 espaços
• ✅ Aspas simples
• ✅ Vírgulas finais em todos os lugares
• ✅ Linha máxima: 120 caracteres
• ✅ Ponto e vírgula obrigatório

2. Frontend (Astro, Next.js, React)

Otimizada para projetos front-end com plugins para Tailwind e Astro.

Características:

• ✅ Tudo da configuração Default
• ✅ Plugin Tailwind CSS (ordena classes automaticamente)
• ✅ Plugin Astro (formata arquivos .astro)
• ✅ Configurações JSX otimizadas

3. Backend (NestJS, Node.js)

Otimizada para projetos back-end em Node.js.

Características:

• ✅ Indentação: 2 espaços
• ✅ Linha máxima: 100 caracteres (melhor para logs)
• ✅ Line ending: LF (Unix)
• ✅ Ideal para APIs e serviços

🚀 Uso

Opção 1: Configuração Default

CommonJS (prettier.config.js ou .prettierrc.js):

module.exports = require("@cajuinasi/prettier-config");

ESM (prettier.config.mjs):

export { default } from "@cajuinasi/prettier-config";

JSON (.prettierrc):

"@cajuinasi/prettier-config"

Opção 2: Frontend (Astro, Next.js)

CommonJS:

module.exports = require("@cajuinasi/prettier-config/frontend");

ESM:

export { default } from "@cajuinasi/prettier-config/frontend.mjs";

Com import específico:

import config from "@cajuinasi/prettier-config/frontend.mjs";
export default config;

Opção 3: Backend (NestJS)

CommonJS:

module.exports = require("@cajuinasi/prettier-config/backend");

ESM:

export { default } from "@cajuinasi/prettier-config/backend.mjs";

Opção 4: Extender e Personalizar

Você pode extender qualquer configuração:

CommonJS:

const cajuinaConfig = require("@cajuinasi/prettier-config");

module.exports = {
  ...cajuinaConfig,
  printWidth: 100, // Override específico
  semi: false, // Seu override
};

ESM:

import cajuinaConfig from "@cajuinasi/prettier-config";

export default {
  ...cajuinaConfig,
  printWidth: 100,
  semi: false,
};

📋 Configurações Detalhadas

Default Config

{
  semi: true,
  singleQuote: true,
  trailingComma: 'all',
  printWidth: 120,
  tabWidth: 2,
  useTabs: false,
  bracketSpacing: true,
  arrowParens: 'always',
  endOfLine: 'auto',
  quoteProps: 'as-needed',
  jsxSingleQuote: false,
  bracketSameLine: false,
}

Frontend Config

{
  plugins: [
    'prettier-plugin-tailwindcss',
    'prettier-plugin-astro',
  ],
  // ... (mesmas configs do Default)
  overrides: [
    {
      files: '*.astro',
      options: { parser: 'astro' },
    },
  ],
}

Backend Config

{
  semi: true,
  singleQuote: true,
  trailingComma: 'all',
  printWidth: 100,          // 100 ao invés de 120
  tabWidth: 2,
  useTabs: false,
  bracketSpacing: true,
  arrowParens: 'always',
  endOfLine: 'lf',         // LF ao invés de auto
  quoteProps: 'as-needed',
}

🤝 Compatibilidade com ESLint

Esta configuração é 100% compatível com as regras do ESLint da CajuinaSI:

| Regra ESLint | Configuração Prettier | Status | | ----------------------------------- | ----------------------------- | ------ | | indent: ["error", 2] | tabWidth: 2, useTabs: false | ✅ | | "no-multi-spaces": "error" | Formatação automática | ✅ | | @typescript-eslint/no-unused-vars | N/A (não conflita) | ✅ |

🔧 Suporte a Runtimes

Este pacote suporta todos os principais runtimes do JavaScript:

| Runtime | Formato | Import | | ---------------------- | ------- | ------------------------------------------ | | Node.js (CommonJS) | .js | require('@cajuinasi/prettier-config') | | Node.js (ESM) | .mjs | import from '@cajuinasi/prettier-config' | | TypeScript | .d.ts | Tipos incluídos automaticamente | | Bun, Deno | .mjs | import from '@cajuinasi/prettier-config' |

📂 Estrutura de Exports

{
  "exports": {
    ".": {
      "types": "./src/index.d.ts",
      "require": "./src/index.js",
      "import": "./src/index.mjs"
    },
    "./frontend": {
      "types": "./src/frontend/index.d.ts",
      "require": "./src/frontend/index.js",
      "import": "./src/frontend/index.mjs"
    },
    "./backend": {
      "types": "./src/backend/index.d.ts",
      "require": "./src/backend/index.js",
      "import": "./src/backend/index.mjs"
    }
    // ... compatibilidade com extensões diretas
  }
}

🛠️ Integração com VSCode

Crie um arquivo .vscode/settings.json:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[astro]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

🎭 Casos de Uso

Para um projeto Astro com Tailwind:

# Instalar
pnpm add -D @cajuinasi/prettier-config

# Criar prettier.config.js
echo 'module.exports = require("@cajuinasi/prettier-config/frontend");' > prettier.config.js

Para um projeto NestJS:

# Instalar
pnpm add -D @cajuinasi/prettier-config

# Criar prettier.config.js
echo 'module.exports = require("@cajuinasi/prettier-config/backend");' > prettier.config.js

Para um monorepo (Front + Back):

Use a configuração default na raiz e override por pacote se necessário.

🔄 Versionamento

• v1.5.0: Reestruturação completa, renomeação para frontend/backend
• v1.4.0: Padronização com ESLint
• v1.3.x: Suporte inicial a Tailwind e Astro

📝 Licença

MIT © CajuinaSI