feat: Add linting checks to CI/CD and fix code style issues

.github/copilot-instructions.md

@@ -75,6 +75,16 @@ const periodMultiplier = {
 - Pinia: Store initialized in `index.vue` page via `store.initializeStore()`
 - Tailwind CSS + Vite integration (check `@tailwindcss/vite` in config)
 
+### Linting & Formatting (Nuxt 4/Vue 3 Best Practice)
+- Project uses **ESLint flat config** with official `@nuxt/eslint` module. See `eslint.config.mjs` (auto-generated).
+- Formatting rules are enforced by the **ESLint Stylistic** plugin—no `.editorconfig` file is needed or used.
+- No Prettier: all stylistic and layout concerns handled via ESLint rules.
+- **Lint scripts:**
+  - `pnpm lint` — Check entire codebase for lint and style violations
+  - `pnpm lint:fix` — Auto-fix fixable issues (recommended before commit)
+- **CI/CD:** Lint runs automatically in GitHub Actions (`.github/workflows/ci.yml` and `publish.yml`). Commits/PRs failing lint will cause the pipeline to fail.
+- TypeScript and Vue SFCs are deeply integrated in lint setup. Prefer explicit, non-`any` types.
+
 ## Testing Patterns
 - Unit tests in `test/unit/src/` use **Vitest** with `describe`/`it` blocks
 - Example: `finance.spec.ts` tests IR brackets and compound interest edge cases
@@ -88,8 +98,9 @@ const periodMultiplier = {
 - **SonarCloud**: CI/CD quality gates (see badges in README)
 
 ## Key Files Reference
-- `package.json`: Build/test scripts and dependencies
-- `nuxt.config.ts`: Tailwind, SEO meta, static generation config
+- `package.json`: Build/test/lint scripts and dependencies
+- `nuxt.config.ts`: Tailwind, SEO meta, static generation and lint config
+- `eslint.config.mjs`: ESLint flat config entry point (auto-generated)
 - `vitest.config.ts`: Test runner configuration
 - `tsconfig.json`: TypeScript strict mode (recommended)
 - `app/assets/indicadores.json`: Runtime market data (do not commit hardcoded values)

.github/workflows/ci.yml

@@ -9,6 +9,7 @@ jobs:
         uses: actions/checkout@v6
         with:
           fetch-depth: 0
+          show-progress: false
       - uses: pnpm/action-setup@v4
         name: Configure PNPM
       - name: Setup node env 🏗
@@ -19,6 +20,8 @@ jobs:
           cache: 'pnpm'
       - name: Install dependencies 👨🏻‍💻
         run: pnpm install --frozen-lockfile
+      - name: Lint check ✅
+        run: pnpm lint
       - name: Tests 🧑‍🔬
         run: pnpm test
       - name: Deploy 😎

.github/workflows/publish.yml

@@ -32,6 +32,8 @@ jobs:
           cache: 'pnpm'
       - name: Install dependencies 👨🏻‍💻
         run: pnpm install --frozen-lockfile
+      - name: Lint check ✅
+        run: pnpm lint
       - name: Deploy 😎
         run: pnpm generate
       - name: Publish 🍻

app/components/InvestmentInput.vue

@@ -11,7 +11,9 @@ import PeriodTypeInput from './investment/PeriodTypeInput.vue'
 <template>
   <div class="bg-white rounded-lg shadow-md">
     <div class="px-6 py-4 border-b border-gray-200">
-      <h2 class="text-lg font-semibold text-gray-900">Investimento</h2>
+      <h2 class="text-lg font-semibold text-gray-900">
+        Investimento
+      </h2>
     </div>
     <div class="px-6 py-4">
       <form @submit.prevent>
@@ -37,4 +39,3 @@ import PeriodTypeInput from './investment/PeriodTypeInput.vue'
   gap: 1rem;
 }
 </style>
-

app/components/InvestmentResult.vue

@@ -1,8 +1,13 @@
 <template>
   <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100 hover:shadow-xl transition-shadow duration-300">
     <!-- Header with gradient background -->
-    <div class="px-6 py-4 bg-gradient-to-r" :class="headerGradientClass">
-      <h3 class="text-xl font-bold text-white drop-shadow-sm">{{ name }}</h3>
+    <div
+      class="px-6 py-4 bg-gradient-to-r"
+      :class="headerGradientClass"
+    >
+      <h3 class="text-xl font-bold text-white drop-shadow-sm">
+        {{ name }}
+      </h3>
     </div>
 
     <div class="p-6">
@@ -11,64 +16,89 @@
         <!-- Total Amount Card -->
         <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-4 border border-blue-200">
           <div class="flex items-center gap-2 mb-2">
-            <div class="w-3 h-3 rounded-full" :class="colorDotClass"></div>
-            <p class="text-sm font-medium text-gray-600">Valor Total Líquido</p>
+            <div
+              class="w-3 h-3 rounded-full"
+              :class="colorDotClass"
+            />
+            <p class="text-sm font-medium text-gray-600">
+              Valor Total Líquido
+            </p>
           </div>
-          <p class="text-2xl font-bold text-gray-900">{{ totalAmountDisplay }}</p>
+          <p class="text-2xl font-bold text-gray-900">
+            {{ totalAmountDisplay }}
+          </p>
         </div>
 
         <!-- Liquid Profit Card -->
         <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-lg p-4 border border-green-200">
           <div class="flex items-center gap-2 mb-2">
-            <div class="w-3 h-3 rounded-full bg-green-500"></div>
-            <p class="text-sm font-medium text-gray-600">Rendimento Líquido</p>
+            <div class="w-3 h-3 rounded-full bg-green-500" />
+            <p class="text-sm font-medium text-gray-600">
+              Rendimento Líquido
+            </p>
           </div>
-          <p class="text-2xl font-bold text-green-700">{{ liquidAmountDisplay }}</p>
+          <p class="text-2xl font-bold text-green-700">
+            {{ liquidAmountDisplay }}
+          </p>
         </div>
       </div>
 
       <!-- Progress bar showing profitability -->
       <div class="mb-6">
         <div class="flex items-center justify-between mb-2">
           <span class="text-sm font-medium text-gray-600">Rentabilidade</span>
-          <span class="text-sm font-bold" :class="profitabilityTextColor">{{ totalProfitPercentageDisplay }}</span>
+          <span
+            class="text-sm font-bold"
+            :class="profitabilityTextColor"
+          >{{ totalProfitPercentageDisplay }}</span>
         </div>
         <div class="relative h-3 bg-gray-200 rounded-full overflow-hidden">
           <div
             class="absolute inset-y-0 left-0 transition-all duration-500 ease-out rounded-full"
             :class="progressBarColor"
             :style="{ width: `${Math.min(totalProfitPercentage, 100)}%` }"
-          ></div>
+          />
         </div>
       </div>
 
       <!-- Detailed breakdown section -->
       <div>
         <div class="flex items-center justify-between border-b border-gray-100">
           <div class="flex items-center gap-2">
-            <div class="w-2 h-2 rounded-full bg-blue-500"></div>
+            <div class="w-2 h-2 rounded-full bg-blue-500" />
             <span class="text-sm text-gray-600">Valor Investido</span>
           </div>
           <span class="text-sm font-semibold text-gray-900">{{ amountDisplay }}</span>
         </div>
 
-        <div v-if="!!interestAmount" class="flex items-center justify-between py-2 border-b border-gray-100">
+        <div
+          v-if="!!interestAmount"
+          class="flex items-center justify-between py-2 border-b border-gray-100"
+        >
           <div class="flex items-center gap-2">
-            <div class="w-2 h-2 rounded-full bg-green-500"></div>
+            <div class="w-2 h-2 rounded-full bg-green-500" />
             <span class="text-sm text-gray-600">Rendimento Bruto</span>
           </div>
           <span class="text-sm font-semibold text-green-700">{{ interestAmountDisplay }}</span>
         </div>
       </div>
 
       <!-- Deductions section - highlighted -->
-      <div v-if="hasDeductions" class="bg-red-50 rounded-lg p-4 border border-red-100 space-y-3">
+      <div
+        v-if="hasDeductions"
+        class="bg-red-50 rounded-lg p-4 border border-red-100 space-y-3"
+      >
         <div class="flex items-center gap-2 mb-2">
-          <div class="w-3 h-3 rounded-full bg-red-500"></div>
-          <p class="text-sm font-semibold text-gray-700">Deduções</p>
+          <div class="w-3 h-3 rounded-full bg-red-500" />
+          <p class="text-sm font-semibold text-gray-700">
+            Deduções
+          </p>
         </div>
 
-        <div v-if="!!taxAmount" class="flex items-center justify-between">
+        <div
+          v-if="!!taxAmount"
+          class="flex items-center justify-between"
+        >
           <div class="flex items-center gap-2 flex-1">
             <span class="text-sm text-gray-600">Imposto de Renda</span>
             <span
@@ -81,7 +111,10 @@
           <span class="text-sm font-semibold text-red-700">-{{ taxAmountDisplay }}</span>
         </div>
 
-        <div v-if="!!iofAmount" class="flex items-center justify-between">
+        <div
+          v-if="!!iofAmount"
+          class="flex items-center justify-between"
+        >
           <span class="text-sm text-gray-600">IOF</span>
           <span class="text-sm font-semibold text-red-700">-{{ iofAmountDisplay }}</span>
         </div>
@@ -106,50 +139,51 @@ const filters = {
       style: 'currency',
       currency: 'BRL',
       currencyDisplay: 'symbol',
-      minimumFractionDigits: 2
+      minimumFractionDigits: 2,
     })
-  }
+  },
 }
 
 const props = defineProps({
   loading: Boolean,
   name: {
     type: String,
     required: true,
-    validator: (content: string) => !!content
+    validator: (content: string) => !!content,
   },
   amount: {
     type: Number,
     required: true,
-    validator: (value: number) => parseFloat(value.toString()) > 0
+    validator: (value: number) => parseFloat(value.toString()) > 0,
   },
   interestAmount: {
     type: Number,
-    required: true
+    required: true,
   },
   taxAmount: {
     type: Number,
     required: false,
-    default: null
+    default: null,
   },
   taxPercentage: {
     type: Number,
     required: false,
     default: null,
-    validator: (value: number | null) => (value !== null ? parseInt(value.toString()) > 0 : true)
+    validator: (value: number | null) => (value !== null ? parseInt(value.toString()) > 0 : true),
   },
   iofAmount: {
     type: Number,
     required: false,
-    default: null
+    default: null,
   },
   color: {
     type: String,
     required: false,
-    default: 'amber'
-  }
+    default: 'amber',
+  },
 })
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const hasAmount = computed(() => !!props.amount)
 const hasDeductions = computed(() => !!props.taxAmount || !!props.iofAmount)
 
@@ -168,40 +202,40 @@ const totalProfitPercentageDisplay = computed(() => filters.percent(totalProfitP
 
 const progressBarColor = computed(() => {
   const colorMap: Record<string, string> = {
-    'amber': 'bg-amber-400',
-    'green': 'bg-green-400',
-    'blue': 'bg-blue-400',
-    'red': 'bg-red-400',
+    amber: 'bg-amber-400',
+    green: 'bg-green-400',
+    blue: 'bg-blue-400',
+    red: 'bg-red-400',
   }
   return colorMap[props.color] || 'bg-amber-400'
 })
 
 const headerGradientClass = computed(() => {
   const gradientMap: Record<string, string> = {
-    'amber': 'from-amber-400 to-amber-500',
-    'green': 'from-green-400 to-green-500',
-    'blue': 'from-blue-400 to-blue-500',
-    'red': 'from-red-400 to-red-500',
+    amber: 'from-amber-400 to-amber-500',
+    green: 'from-green-400 to-green-500',
+    blue: 'from-blue-400 to-blue-500',
+    red: 'from-red-400 to-red-500',
   }
   return gradientMap[props.color] || 'from-amber-400 to-amber-500'
 })
 
 const colorDotClass = computed(() => {
   const dotMap: Record<string, string> = {
-    'amber': 'bg-amber-500',
-    'green': 'bg-green-500',
-    'blue': 'bg-blue-500',
-    'red': 'bg-red-500',
+    amber: 'bg-amber-500',
+    green: 'bg-green-500',
+    blue: 'bg-blue-500',
+    red: 'bg-red-500',
   }
   return dotMap[props.color] || 'bg-amber-500'
 })
 
 const profitabilityTextColor = computed(() => {
   const textColorMap: Record<string, string> = {
-    'amber': 'text-amber-700',
-    'green': 'text-green-700',
-    'blue': 'text-blue-700',
-    'red': 'text-red-700',
+    amber: 'text-amber-700',
+    green: 'text-green-700',
+    blue: 'text-blue-700',
+    red: 'text-red-700',
   }
   return textColorMap[props.color] || 'text-amber-700'
 })