Add prettier and eslint

.eslintrc.cjs

@@ -0,0 +1,58 @@
+module.exports = {
+    // ...
+    env: {
+        es2020: true,
+        node: true,
+        'astro/astro': true,
+    },
+    extends: [
+        // ...
+        'plugin:astro/recommended',
+        'prettier',
+        'eslint:recommended',
+    ],
+    parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+    },
+    // ...
+    overrides: [
+        {
+            // Define the configuration for `.astro` file.
+            files: ['*.astro'],
+            // 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',
+                extraFileExtensions: ['.astro'],
+                sourceType: 'module',
+            },
+            rules: {
+                // override/add rules settings here, such as:
+                // "astro/no-set-html-directive": "error"
+                'astro/no-conflict-set-directives': 'error',
+                'astro/no-unused-define-vars-in-style': 'error',
+            },
+        },
+        {
+            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',
+            },
+        },
+    ],
+}

.prettierrc.cjs

@@ -0,0 +1,15 @@
+module.exports = {
+    plugins: [require.resolve('prettier-plugin-astro')],
+    overrides: [
+        {
+            files: '*.astro',
+            options: {
+                parser: 'astro',
+            },
+        },
+    ],
+    trailingComma: 'es5',
+    tabWidth: 4,
+    semi: false,
+    singleQuote: true,
+}

README.md

@@ -12,7 +12,6 @@ npm create astro@latest -- --template basics
 
 ![basics](https://user-images.githubusercontent.com/4677417/186188965-73453154-fdec-4d6b-9c34-cb35c248ae5b.png)
 
-
 ## 🚀 Project Structure
 
 Inside of your Astro project, you'll see the following folders and files:

astro.config.mjs

@@ -1,8 +1,8 @@
-import { defineConfig } from 'astro/config';
+import { defineConfig } from 'astro/config'
 
-import tailwind from "@astrojs/tailwind";
+import tailwind from '@astrojs/tailwind'
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind()]
+    integrations: [tailwind()],
-});
+})

package.json

@@ -12,11 +12,13 @@
   "dependencies": {
     "@astrojs/tailwind": "^3.1.3",
     "astro": "^2.5.0",
+    "bun-types": "^0.6.3",
     "tailwindcss": "^3.0.24eslint-plugin-jsx-a11y"
   },
   "devDependencies": {
     "@typescript-eslint/parser": "^5.59.7",
     "eslint": "^8.41.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-astro": "^0.27.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "prettier": "^2.8.8",

src/components/Card.astro

@@ -1,11 +1,11 @@
 ---
 export interface Props {
-	title: string;
+    title: string
-	body: string;
+    body: string
-	href: string;
+    href: string
 }
 
-const { href, title, body } = Astro.props;
+const { href, title, body } = Astro.props
 ---
 
 <li class="link-card">
@@ -30,7 +30,8 @@ const { href, title, body } = Astro.props;
         border-radius: 0.6rem;
         background-position: 100%;
         transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+            0 2px 4px -2px rgba(0, 0, 0, 0.1);
     }
 
     .link-card > a {

src/layouts/Layout.astro

@@ -1,16 +1,16 @@
 ---
 export interface Props {
-	title: string;
+    title: string
 }
 
-const { title } = Astro.props;
+const { title } = Astro.props
 ---
 
 <!DOCTYPE html>
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
-		<meta name="description" content="Astro description">
+        <meta name="description" content="Astro description" />
         <meta name="viewport" content="width=device-width" />
         <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
         <meta name="generator" content={Astro.generator} />
@@ -23,14 +23,19 @@ const { title } = Astro.props;
 <style is:global>
     :root {
         --accent: 124, 58, 237;
-		--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%);
+        --accent-gradient: linear-gradient(
+            45deg,
+            rgb(var(--accent)),
+            #da62c4 30%,
+            white 60%
+        );
     }
     html {
         font-family: system-ui, sans-serif;
-		background-color: #F6F6F6;
+        background-color: #f6f6f6;
     }
     code {
-		font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+        font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
-			Bitstream Vera Sans Mono, Courier New, monospace;
+            DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
     }
 </style>