Add prettier and eslint

2023-05-24 15:37:45 -05:00 · 2023-05-24 15:37:45 -05:00 · 3b6dcd02c3
parent 5eee44c205
commit 3b6dcd02c3
11 changed files with 176 additions and 96 deletions
--- a/.eslintrc.cjs
+++ b/.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',
+            },
+        },
+    ],
+}
--- a/.prettierrc.cjs
+++ b/.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,
+}
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -1,4 +1,4 @@
 {
-  "recommendations": ["astro-build.astro-vscode"],
-  "unwantedRecommendations": []
+    "recommendations": ["astro-build.astro-vscode"],
+    "unwantedRecommendations": []
 }
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@ -1,11 +1,11 @@
 {
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "command": "./node_modules/.bin/astro dev",
-      "name": "Development server",
-      "request": "launch",
-      "type": "node-terminal"
-    }
-  ]
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "command": "./node_modules/.bin/astro dev",
+            "name": "Development server",
+            "request": "launch",
+            "type": "node-terminal"
+        }
+    ]
 }
--- a/README.md
+++ b/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:
--- a/astro.config.mjs
+++ b/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()],
+})
--- a/bun.lockb
+++ b/bun.lockb
--- a/package.json
+++ b/package.json
@ -12,14 +12,16 @@
  "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",
    "prettier-plugin-astro": "^0.9.0"
  }
-}
+}
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@ -1,63 +1,64 @@
 ---
 export interface Props {
-	title: string;
-	body: string;
-	href: string;
+    title: string
+    body: string
+    href: string
 }

-const { href, title, body } = Astro.props;
+const { href, title, body } = Astro.props
 ---

 <li class="link-card">
-	<a href={href}>
-		<h2>
-			{title}
-			<span>&rarr;</span>
-		</h2>
-		<p>
-			{body}
-		</p>
-	</a>
+    <a href={href}>
+        <h2>
+            {title}
+            <span>&rarr;</span>
+        </h2>
+        <p>
+            {body}
+        </p>
+    </a>
 </li>
 <style>
-	.link-card {
-		list-style: none;
-		display: flex;
-		padding: 0.25rem;
-		background-color: white;
-		background-image: none;
-		background-size: 400%;
-		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);
-	}
+    .link-card {
+        list-style: none;
+        display: flex;
+        padding: 0.25rem;
+        background-color: white;
+        background-image: none;
+        background-size: 400%;
+        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);
+    }

-	.link-card > a {
-		width: 100%;
-		text-decoration: none;
-		line-height: 1.4;
-		padding: 1rem 1.3rem;
-		border-radius: 0.35rem;
-		color: #111;
-		background-color: white;
-		opacity: 0.8;
-	}
-	h2 {
-		margin: 0;
-		font-size: 1.25rem;
-		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-	}
-	p {
-		margin-top: 0.5rem;
-		margin-bottom: 0;
-		color: #444;
-	}
-	.link-card:is(:hover, :focus-within) {
-		background-position: 0;
-		background-image: var(--accent-gradient);
-	}
-	.link-card:is(:hover, :focus-within) h2 {
-		color: rgb(var(--accent));
-	}
+    .link-card > a {
+        width: 100%;
+        text-decoration: none;
+        line-height: 1.4;
+        padding: 1rem 1.3rem;
+        border-radius: 0.35rem;
+        color: #111;
+        background-color: white;
+        opacity: 0.8;
+    }
+    h2 {
+        margin: 0;
+        font-size: 1.25rem;
+        transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    p {
+        margin-top: 0.5rem;
+        margin-bottom: 0;
+        color: #444;
+    }
+    .link-card:is(:hover, :focus-within) {
+        background-position: 0;
+        background-image: var(--accent-gradient);
+    }
+    .link-card:is(:hover, :focus-within) h2 {
+        color: rgb(var(--accent));
+    }
 </style>
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@ -1,36 +1,41 @@
 ---
 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="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="generator" content={Astro.generator} />
-		<title>{title}</title>
-	</head>
-	<body>
-		<slot />
-	</body>
+    <head>
+        <meta charset="UTF-8" />
+        <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} />
+        <title>{title}</title>
+    </head>
+    <body>
+        <slot />
+    </body>
 </html>
 <style is:global>
-	:root {
-		--accent: 124, 58, 237;
-		--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%);
-	}
-	html {
-		font-family: system-ui, sans-serif;
-		background-color: #F6F6F6;
-	}
-	code {
-		font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-			Bitstream Vera Sans Mono, Courier New, monospace;
-	}
+    :root {
+        --accent: 124, 58, 237;
+        --accent-gradient: linear-gradient(
+            45deg,
+            rgb(var(--accent)),
+            #da62c4 30%,
+            white 60%
+        );
+    }
+    html {
+        font-family: system-ui, sans-serif;
+        background-color: #f6f6f6;
+    }
+    code {
+        font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
+            DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
+    }
 </style>
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,3 +1,3 @@
 {
-  "extends": "astro/tsconfigs/strict"
-}
+    "extends": "astro/tsconfigs/strict"
+}