Bye bye prettier, fixed all with eslint

.vscode/settings.json

@@ -1,8 +1,9 @@
 {
 	"editor.codeActionsOnSave": {
-		"source.formatDocument": "explicit"
+		"source.fixAll": "explicit"
 	},
+	"editor.defaultFormatter": "dbaeumer.vscode-eslint",
 	"editor.formatOnSave": true,
 	"editor.tabSize": 2,
-	"eslint.validate": ["javascript", "javascriptreact", "svelte"],
+	"eslint.validate": ["javascript", "javascriptreact", "typescript", "svelte"],
 }

e2e/paises.test.ts

@@ -1,19 +1,19 @@
 import { expect, test } from '@playwright/test'
 
 test('flujo principal: buscamos un país y al hacer click nos dirige a la página con la información de dicho país', async ({
-	page
+  page
 }) => {
-	await page.goto('/')
-	await expect(page.locator('h2')).toBeVisible()
-	await page.getByTestId('paisBusqueda').fill('ARGENTINA')
-	await page.getByTestId('buscar').click()
-	const unPais = await page.getByTestId('pais-0')
-	await expect(unPais).toBeVisible()
-	unPais.click()
-	await expect(page).toHaveURL('/pais/ARG')
-	await expect(page.locator('h2')).toHaveText('Argentina')
-	// podríamos eventualmente testear otros atributos
-	await page.getByTestId('volver').click()
-	await expect(page).toHaveURL('/')
-	await expect(page.getByTestId('paisBusqueda')).toHaveText('')
+  await page.goto('/')
+  await expect(page.locator('h2')).toBeVisible()
+  await page.getByTestId('paisBusqueda').fill('ARGENTINA')
+  await page.getByTestId('buscar').click()
+  const unPais = await page.getByTestId('pais-0')
+  await expect(unPais).toBeVisible()
+  unPais.click()
+  await expect(page).toHaveURL('/pais/ARG')
+  await expect(page.locator('h2')).toHaveText('Argentina')
+  // podríamos eventualmente testear otros atributos
+  await page.getByTestId('volver').click()
+  await expect(page).toHaveURL('/')
+  await expect(page.getByTestId('paisBusqueda')).toHaveText('')
 })

eslint.config.js

@@ -1,54 +1,57 @@
 // eslint.config.cjs
 
-import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
+// import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
 import eslintPluginSvelte from 'eslint-plugin-svelte'
 import js from '@eslint/js'
 import svelteParser from 'svelte-eslint-parser'
 import tsEslint from 'typescript-eslint'
 import tsParser from '@typescript-eslint/parser'
 
 export default [
-	js.configs.recommended,
-	...tsEslint.configs.strict,
-	...eslintPluginSvelte.configs['flat/recommended'],
-	eslintPluginPrettierRecommended, // must be last to override conflicting rules.
-	{
-		rules: {
-			quotes: ['warn', 'single', { avoidEscape: true, allowTemplateLiterals: true }],
-			semi: ['error', 'never'],
-			'no-nested-ternary': 'error',
-			'linebreak-style': ['error', 'unix'],
-			'no-cond-assign': ['error', 'always'],
-			'no-console': 'error',
-			'@typescript-eslint/sort-type-constituents': 'error',
-			'sort-imports': [
-				'error',
-				{
-					ignoreCase: true,
-					ignoreDeclarationSort: false,
-					ignoreMemberSort: false,
-					memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'],
-					allowSeparatedGroups: true
-				}
-			]
-		}
-	},
-	{
-		files: ['**/*.svelte'],
-		languageOptions: {
-			parser: svelteParser,
-			parserOptions: {
-				parser: tsParser
-			}
-		},
-		rules: {
-			'svelte/no-target-blank': 'error',
-			'svelte/no-at-debug-tags': 'error',
-			'svelte/no-reactive-functions': 'error',
-			'svelte/no-reactive-literals': 'error',
-			'svelte/ignore-warnings': (warning) => {
-				return warning.code.startsWith('a11y')
-			}
-		}
-	}
+  js.configs.recommended,
+  ...tsEslint.configs.strict,
+  ...eslintPluginSvelte.configs['flat/recommended'],
+  // eslintPluginPrettierRecommended, // must be last to override conflicting rules.
+  {
+    rules: {
+      quotes: [
+        'warn',
+        'single',
+        { avoidEscape: true, allowTemplateLiterals: true },
+      ],
+      semi: ['error', 'never'],
+      indent: ['warn', 2],
+      'no-extra-parens': 'warn',
+      'no-nested-ternary': 'error',
+      'linebreak-style': ['error', 'unix'],
+      'no-cond-assign': ['error', 'always'],
+      'no-console': 'error',
+      '@typescript-eslint/sort-type-constituents': 'error',
+      'sort-imports': [
+        'error',
+        {
+          ignoreCase: true,
+          ignoreDeclarationSort: false,
+          ignoreMemberSort: false,
+          memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'],
+          allowSeparatedGroups: true,
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.svelte'],
+    languageOptions: {
+      parser: svelteParser,
+      parserOptions: {
+        parser: tsParser,
+      },
+    },
+    rules: {
+      'svelte/no-target-blank': 'error',
+      'svelte/no-at-debug-tags': 'error',
+      'svelte/no-reactive-functions': 'error',
+      'svelte/no-reactive-literals': 'error',
+    },
+  },
 ]

package.json

@@ -9,27 +9,27 @@
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"format": "prettier --write .",
-		"lint": "prettier --check .",
-		"lint:fix": "prettier --write .",
+		"lint": "eslint src",
+		"lint:fix": "eslint src --fix",
 		"test:e2e": "playwright test --ui",
 		"test": "npm run test:e2e",
 		"test:ci": "playwright test"
 	},
 	"devDependencies": {
 		"@eslint/compat": "^1.2.3",
 		"@playwright/test": "^1.45.3",
+		"@stylistic/eslint-plugin": "^2.11.0",
+		"@stylistic/eslint-plugin-js": "^2.11.0",
+		"@stylistic/eslint-plugin-ts": "^2.11.0",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.9.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
 		"@types/eslint": "^9.6.1",
+		"@typescript-eslint/parser": "^8.17.0",
 		"eslint": "^9.7.0",
-		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.36.0",
 		"globals": "^15.0.0",
 		"jsdom": "^25.0.1",
-		"prettier": "^3.3.2",
-		"prettier-plugin-svelte": "^3.2.6",
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
 		"typescript": "^5.0.0",
@@ -39,7 +39,6 @@
 	"dependencies": {
 		"axios": "^1.7.9",
 		"date-fns": "^4.1.0",
-		"date-fns-tz": "^3.2.0",
-		"eslint-plugin-prettier": "^5.2.1"
+		"date-fns-tz": "^3.2.0"
 	}
 }

playwright.config.ts

@@ -1,10 +1,10 @@
 import { defineConfig } from '@playwright/test'
 
 export default defineConfig({
-	webServer: {
-		command: 'npm run build && npm run preview',
-		port: 4173
-	},
+  webServer: {
+    command: 'npm run build && npm run preview',
+    port: 4173
+  },
 
-	testDir: 'e2e'
+  testDir: 'e2e'
 })

src/lib/pais.ts

@@ -2,22 +2,22 @@ import { format } from 'date-fns'
 import { toZonedTime } from 'date-fns-tz'
 
 export class Pais {
-	constructor(
-		public nombre: string,
-		public bandera: string,
-		public moneda: string,
-		public codigo: string,
-		public poblacion: number,
-		public area: number,
-		public capital: string,
-		public timezone: string
-	) {}
+  constructor(
+    public nombre: string,
+    public bandera: string,
+    public moneda: string,
+    public codigo: string,
+    public poblacion: number,
+    public area: number,
+    public capital: string,
+    public timezone: string,
+  ) {}
 
-	superpoblado() {
-		return this.poblacion / this.area > 100
-	}
+  superpoblado() {
+    return this.poblacion / this.area > 100
+  }
 
-	queHoraEs() {
-		return format(toZonedTime(new Date(), this.timezone.slice(3)), 'HH:mm:ss')
-	}
+  queHoraEs() {
+    return format(toZonedTime(new Date(), this.timezone.slice(3)), 'HH:mm:ss')
+  }
 }

src/lib/paisService.ts

@@ -5,28 +5,28 @@ const BASE_URL = 'https://restcountries.com'
 const VERSION = 'v3.1'
 
 class PaisService {
-	async buscarPais(paisBusqueda: string): Promise<Pais[]> {
-		const response = await axios.get(`${BASE_URL}/${VERSION}/name/${paisBusqueda}`)
-		return response.data.map(toPais)
-	}
+  async buscarPais(paisBusqueda: string): Promise<Pais[]> {
+    const response = await axios.get(`${BASE_URL}/${VERSION}/name/${paisBusqueda}`)
+    return response.data.map(toPais)
+  }
 
-	async datosDePais(codigoDePais: string): Promise<Pais> {
-		const response = await axios.get(`${BASE_URL}/${VERSION}/alpha/${codigoDePais}`)
-		return toPais(response.data[0])
-	}
+  async datosDePais(codigoDePais: string): Promise<Pais> {
+    const response = await axios.get(`${BASE_URL}/${VERSION}/alpha/${codigoDePais}`)
+    return toPais(response.data[0])
+  }
 }
 
 const toPais = ({
-	flag,
-	name,
-	translations,
-	currencies,
-	cioc,
-	ccn3,
-	population,
-	area,
-	capital,
-	timezones
+  flag,
+  name,
+  translations,
+  currencies,
+  cioc,
+  ccn3,
+  population,
+  area,
+  capital,
+  timezones
 }: {
 	flag: string
 	name: { common: string }
@@ -39,20 +39,20 @@ const toPais = ({
 	capital: string
 	timezones: string[]
 }): Pais => {
-	const keysCurrencies = Object.keys(currencies ?? {})
-	const countryName = translations['spa']?.common ?? name?.common
-	const currency = keysCurrencies?.length ? currencies[keysCurrencies[0]].name : ''
-	const pais = new Pais(
-		countryName,
-		flag,
-		currency,
-		cioc ?? ccn3,
-		population,
-		area,
-		capital,
-		timezones[0]
-	)
-	return pais
+  const keysCurrencies = Object.keys(currencies ?? {})
+  const countryName = translations['spa']?.common ?? name?.common
+  const currency = keysCurrencies?.length ? currencies[keysCurrencies[0]].name : ''
+  const pais = new Pais(
+    countryName,
+    flag,
+    currency,
+    cioc ?? ccn3,
+    population,
+    area,
+    capital,
+    timezones[0]
+  )
+  return pais
 }
 
 export const paisService = new PaisService()

src/lib/utils.ts

@@ -1,2 +1,2 @@
 export const formatearEntero = (numero: number) =>
-	new Intl.NumberFormat('es-AR', { minimumFractionDigits: 0 }).format(numero)
+  new Intl.NumberFormat('es-AR', { minimumFractionDigits: 0 }).format(numero)