solved eslint prettier issues

.eslintrc.cjs

@@ -1,5 +1,14 @@
 module.exports = {
-  extends: ['airbnb-base', 'plugin:tailwindcss/recommended', 'plugin:prettier/recommended'],
+  extends: [
+    'plugin:astro/recommended',
+    'plugin:tailwindcss/recommended',
+    'plugin:prettier/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: './tsconfig.json',
+    extraFileExtensions: ['.astro'], // This is a required setting in `@typescript-eslint/parser` v5.
+  },
   plugins: ['@typescript-eslint', 'import', 'tailwindcss'],
   env: {
     browser: true,
@@ -27,12 +36,7 @@ module.exports = {
   overrides: [
     {
       files: ['./**/*.ts', './**/*.tsx'],
-      extends: [
-        'airbnb-base',
-        'airbnb-typescript/base',
-        'plugin:tailwindcss/recommended',
-        'plugin:prettier/recommended',
-      ],
+      extends: ['plugin:tailwindcss/recommended', 'plugin:prettier/recommended'],
       parser: '@typescript-eslint/parser',
       parserOptions: {
         project: 'tsconfig.json',
@@ -75,12 +79,24 @@ module.exports = {
         'astro/astro': true,
         es2020: true,
       },
+      settings: {
+        'import/parsers': {
+          '@typescript-eslint/parser': ['.ts', '.astro'],
+        },
+        'import/resolver': {
+          typescript: {
+            alwaysTryTypes: true,
+            project: './',
+          },
+        },
+      },
       // Allows Astro components to be parsed.
       parser: 'astro-eslint-parser',
       // Parse the script in `.astro` as TypeScript by adding the following configuration.
       // It's the setting you need when using TypeScript.
       parserOptions: {
         parser: '@typescript-eslint/parser',
+        project: 'tsconfig.json',
         extraFileExtensions: ['.astro'],
         // The script of Astro components uses ESM.
         sourceType: 'module',
@@ -89,30 +105,10 @@ module.exports = {
         // Enable recommended rules
         'astro/no-conflict-set-directives': 'error',
         'astro/no-unused-define-vars-in-style': 'error',
-
+        'import/no-unresolved': [2, { ignore: ['astro-icon'] }],
         // override/add rules settings here, such as:
         // "astro/no-set-html-directive": "error"
       },
     },
-    {
-      // Define the configuration for Astro's `<script>` tag.
-      // Script in `<script>` is assigned a virtual file name with the `.js` extension.
-      files: ['**/*.astro/*.js', '*.astro/*.js'],
-      env: {
-        browser: true,
-        es2020: true,
-      },
-      parserOptions: {
-        sourceType: 'module',
-      },
-      rules: {
-        // override/add rules settings here, such as:
-        // "no-unused-vars": "error"
-
-        // If you are using "prettier/prettier" rule,
-        // you don't need to format inside <script> as it will be formatted as a `.astro` file.
-        'prettier/prettier': 'off',
-      },
-    },
   ],
 };

.nvmrc

@@ -1 +1 @@
-16
+18

.prettierignore

@@ -0,0 +1 @@
+node_modules/

.prettierrc

@@ -1,4 +1,5 @@
 {
   "printWidth": 100,
-  "singleQuote": true
+  "singleQuote": true,
+  "trailingComma": "all"
 }

package.json

@@ -1,9 +1,9 @@
 {
   "name": "astro",
   "type": "module",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "engines": {
-    "node": "^16.0.0"
+    "node": "^18.0.0"
   },
   "scripts": {
     "dev": "astro dev",
@@ -12,8 +12,8 @@
     "preview": "astro preview",
     "lint": "yarn lint:js && yarn lint:css",
     "lint:js": "eslint --cache --cache-location node_modules/.cache/eslint/ .",
-    "lint:css": "stylelint \"src/**/*.scss\"",
-    "lint:css:fix": "stylelint --fix \"src/**/*.scss\"",
+    "lint:css": "stylelint \"src/**/*.{css,scss,sass}\"",
+    "lint:css:fix": "stylelint --fix \"src/**/*.{css,scss,sass}\"",
     "export": "yarn build && next export",
     "resume": "yarn export && concurrently --raw --kill-others --success first npm:serve npm:resume:export",
     "resume:export": "node --trace-warnings -r esm cli/export-pdf-resume.js"
@@ -35,22 +35,24 @@
     "@typescript-eslint/parser": "^6.3.0",
     "concurrently": "^8.2.0",
     "eslint": "^8.46.0",
-    "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-config-prettier": "^9.0.0",
+    "eslint-import-resolver-typescript": "^3.5.5",
     "eslint-plugin-astro": "^0.28.0",
     "eslint-plugin-import": "^2.28.0",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-tailwindcss": "^3.13.0",
-    "prettier": "^3.0.1",
-    "prettier-plugin-astro": "^0.11.0",
+    "prettier": "2.8.8",
+    "prettier-plugin-astro": "0.10.0",
     "puppeteer": "^14.1.0",
     "sass": "^1.64.2",
     "stylelint": "^15.10.2",
     "stylelint-config-sass-guidelines": "^10.0.0",
     "tasuku": "^2.0.1",
     "vite-remark-html": "^1.1.1"
   },
+  "resolutions": {
+    "prettier": "2.8.8"
+  },
   "license": "MIT",
   "repository": {
     "type": "git",

src/components/Hero.astro

@@ -1,31 +1,21 @@
 ---
-const a = 'asdasd'
 ---
+
 <div class="mx-auto px-10 md:px-24 lg:max-w-screen-xl">
-  <div
-    class="flex min-h-[calc(100vh-6rem)] max-w-2xl flex-col justify-center py-28"
-  >
+  <div class="flex min-h-[calc(100vh-6rem)] max-w-2xl flex-col justify-center py-28">
     <p class="pb-2 text-xl text-black">Hi, my name is</p>
     <h1
       class="py-2 font-display text-[clamp(3rem,8vw,4.5rem)] font-semibold leading-tight text-black"
     >
       Vitor Mello,
     </h1>
-    <h2
-      class="py-2 font-display text-[clamp(1.75rem,5vw,3rem)] leading-tight text-gray"
-    >
+    <h2 class="py-2 font-display text-[clamp(1.75rem,5vw,3rem)] leading-tight text-gray">
       I build things for the web.
     </h2>
     <p class="pt-4 text-xl leading-normal text-gray">
-      I&apos;m a full-stack software engineer specializing in building digital
-      experiences. Previously, I was focused on building a global, connected and
-      sustainable food system at{" "}
-      <a
-        class="link"
-        target="_blank"
-        href="https://www.choco.com"
-        rel="noreferrer"
-      >
+      I&apos;m a full-stack software engineer specializing in building digital experiences.
+      Previously, I was focused on building a global, connected and sustainable food system at{' '}
+      <a class="link" target="_blank" href="https://www.choco.com" rel="noreferrer">
         <span>Choco</span>
       </a>
       .

src/layouts/Layout.astro

@@ -76,24 +76,21 @@ const { title } = Astro.props;
 
   @font-face {
     font-family: Biotif;
-    src:
-      url('/assets/fonts/biotif.woff2') format('woff2'),
+    src: url('/assets/fonts/biotif.woff2') format('woff2'),
       url('/assets/fonts/biotif.woff') format('woff');
   }
 
   @font-face {
     font-family: Bogart;
     font-weight: bold;
-    src:
-      url('/assets/fonts/bogart-semi.woff2') format('woff2'),
+    src: url('/assets/fonts/bogart-semi.woff2') format('woff2'),
       url('/assets/fonts/bogart-semi.woff') format('woff');
   }
 
   @font-face {
     font-family: Bogart;
     font-weight: normal;
-    src:
-      url('/assets/fonts/bogart.woff2') format('woff2'),
+    src: url('/assets/fonts/bogart.woff2') format('woff2'),
       url('/assets/fonts/bogart.woff') format('woff');
   }
 

tailwind.config.cjs → tailwind.config.mjs

@@ -1,7 +1,7 @@
-const colors = require('tailwindcss/colors');
+import colors from 'tailwindcss/colors';
 
 /** @type {import('tailwindcss').Config} */
-module.exports = {
+export default {
   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
   theme: {
     minHeight: {

tsconfig.json

@@ -9,5 +9,6 @@
       "src/*": ["src/*"]
     }
   },
+  "exclude": ["/node_modules"],
   "include": ["**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.astro", "**/*.yml"]
 }