Usar ESLint y Prettier en Astro

Domina la configuración de ESLint y Prettier para tus proyectos Astro con esta guía detallada. Aprende a tener un entorno de desarrollo eficiente y libre de conflictos llevando tu proyecto Astro al siguiente nivel.

Una de las mejores cosas que tiene ESLint junto a Prettier es que, una vez que te acostumbras, es muy cómodo trabajar con estas herramientas cuando desarrollas proyectos solo pero, se vuelve obligatorio cuando quieres trabajar en equipo. Cada uno tiene sus propias configuraciones locales lo que hace que, cuando esta código se sube a algún repositorio, sea un baile de cambios.

Para evitar este problema y que todos hablen el mismo idioma es necesario establecer ciertas reglas que ayudaran no solo a mantener un código más limpio sino que, ayudará a que hayan menos conflictos a la hora de crear un proyecto mediano/grande.

Siguiendo esta guía, será más sencillo que lleves tus proyectos de Astro a otro nivel.

Instalación de paquetes:

Para comenzar, utiliza el siguiente comando para agregar las herramientas necesarias. Esta vez, utilizaremos el gestor de paquetes de PNPM :

pnpm install --save-dev -E @eslint/js @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-astro eslint-plugin-import eslint-plugin-prettier eslint-plugin-unused-imports globals prettier prettier-plugin-astro typescript-eslint

Nota:

Si estas usando PNPM de la misma forma que yo, deberas añadir este parametro a .npmrc antes de instalar los paquetes para que se instalen los peerDependencies como por ejemplo tslib

echo "auto-install-peers=true" >> .npmrc

Es importante que revises las versiones de los paquetes antes de instalarlos para asegurarte de que no haya incompatibilidades.

En el momento de escribir esta guía, las versiones de los paquetes son:

"@eslint/js": "9.22.0",
"@typescript-eslint/eslint-plugin": "8.26.1",
"@typescript-eslint/parser": "8.26.1",
"eslint": "9.22.0",
"eslint-config-prettier": "10.1.1",
"eslint-plugin-astro": "1.3.1",
"eslint-plugin-import": "2.31.0",
"eslint-plugin-prettier": "5.2.3",
"eslint-plugin-unused-imports": "4.1.4",
"globals": "16.0.0",
"prettier": "3.5.3",
"prettier-plugin-astro": "0.14.1",
"prettier-plugin-tailwindcss": "0.6.11",
"typescript-eslint": "8.26.1"

Configuración inicial:

Una vez instalados los paquetes, es crucial establecer la configuración necesaria. Para ello, vamos a crear los archivos de configuración necesarios.

touch eslint.config.mjs prettier.config.mjs

Luego, agrega la siguiente configuración al archivo:

eslint.config.mjs

import eslint from '@eslint/js'
import eslintPluginAstro from 'eslint-plugin-astro'
import importPlugin from 'eslint-plugin-import'
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
import unusedImports from 'eslint-plugin-unused-imports'
import globals from 'globals'
import tseslint from 'typescript-eslint'
 
export default tseslint.config(
  {
    ignores: ['**/public', '**/dist', '**/dist/*', '**/tests/*', 'coverage', '.astro/*', 'node_modules/*'],
  },
  eslint.configs.recommended,
  tseslint.configs.recommended,
  eslintPluginPrettierRecommended,
  eslintPluginAstro.configs.recommended,
  {
    files: ['**/*.{mjs,cjs,js,ts,astro}'],
    languageOptions: { ecmaVersion: 'latest', globals: globals.browser },
    plugins: {
      import: importPlugin,
      'unused-imports': unusedImports,
    },
    rules: {
      'no-unused-vars': 'off', // Disable the base rule, redundant with unused-imports plugin
      '@typescript-eslint/no-unused-vars': 'off', // Disable the base rule, redundant with unused-imports plugin
      'unused-imports/no-unused-imports': 'error',
      'unused-imports/no-unused-vars': [
        'warn',
        {
          vars: 'all',
          varsIgnorePattern: '^_',
          args: 'after-used',
          argsIgnorePattern: '^_',
        },
      ],
      'import/order': [
        'warn',
        {
          alphabetize: { caseInsensitive: true, order: 'asc' },
          groups: ['builtin', 'external', 'sibling', 'parent'],
          'newlines-between': 'always',
          pathGroupsExcludedImportTypes: ['builtin'],
          pathGroups: [
            {
              group: 'external',
              pattern: '@/**',
              position: 'after',
            },
          ],
        },
      ],
    },
  },
)

Y, por último, agrega la siguiente configuración:

prettier.config.mjs

/**
 * @see https://prettier.io/docs/configuration
 * @type {import("prettier").Config}
 */
const config = {
  semi: false,
  trailingComma: 'all',
  singleQuote: true,
  arrowParens: 'always',
  jsxSingleQuote: false,
  printWidth: 120,
  plugins: ['prettier-plugin-astro'],
  overrides: [{ files: '*.astro', options: { parser: 'astro' } }],
}
 
export default config

Bonus Track: configuración con Tailwindcss v4

Si también utilizas Tailwindcss es recomendable usar el paquete prettier-plugin-tailwindcss para ordenar las clases de forma automática . Lo instalaremos tal que así:

Para comenzar, utiliza el siguiente comando para agregar el paquete necesario:

pnpm install --save-dev -E prettier-plugin-tailwindcss

En el momento de escribir esta guía, las versiones de los paquetes son:

"prettier-plugin-tailwindcss": "0.6.11",

Y por último, añade la siguiente configuración:

prettier.config.mjs

const config = {
  ...,
  tailwindStylesheet: './src/styles/global.css',
  tailwindFunctions: ['class', 'className', 'ngClass', 'class:list', '.*Cn'],
  plugins: [..., 'prettier-plugin-tailwindcss'],
}