feat: configure prettier and eslint and format the code

.eslintignore

@@ -0,0 +1,2 @@
+# tailwind
+tailwind.config.ts

.prettierignore

@@ -0,0 +1,6 @@
+# lockfiles
+package-lock.json
+pnpm-lock.yaml
+
+# dependencies
+node_modules

.prettierrc.mjs

@@ -0,0 +1,16 @@
+/** @type {import("prettier").Config} */
+export default {
+  semi: false,
+  singleQuote: false,
+  trailingComma: "all",
+  endOfLine: "lf",
+  plugins: ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
+  overrides: [
+    {
+      files: "*.astro",
+      options: {
+        parser: "astro",
+      },
+    },
+  ],
+}

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "always"
+  }
+}

astro.config.mjs

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

eslint.config.cjs

@@ -0,0 +1,41 @@
+const eslintPluginAstro = require("eslint-plugin-astro")
+module.exports = [
+  // add more generic rule sets here, such as:
+  // js.configs.recommended,
+  ...eslintPluginAstro.configs["flat/recommended"], // In CommonJS, the `flat/` prefix is required.
+  {
+    rules: {
+      // override/add rules settings here, such as:
+      // "astro/no-set-html-directive": "error"
+      // JavaScript rules
+      "prefer-const": "error",
+      // TypeScript rules
+      "@typescript-eslint/array-type": "off",
+      "@typescript-eslint/consistent-type-definitions": "off",
+      "@typescript-eslint/consistent-type-imports": [
+        "warn",
+        {
+          prefer: "type-imports",
+          fixStyle: "inline-type-imports",
+        },
+      ],
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        {
+          argsIgnorePattern: "^_",
+        },
+      ],
+      "@typescript-eslint/require-await": "off",
+      "@typescript-eslint/no-misused-promises": [
+        "error",
+        {
+          checksVoidReturn: {
+            attributes: false,
+          },
+        },
+      ],
+      // React rules
+      "react/self-closing-comp": ["error"],
+    },
+  },
+]

package.json

@@ -6,7 +6,8 @@
     "dev": "astro dev",
     "build": "astro check && astro build",
     "preview": "astro preview",
-    "astro": "astro"
+    "astro": "astro",
+    "format": "prettier --write ."
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
@@ -19,5 +20,14 @@
     "react-dom": "^18.3.1",
     "tailwindcss": "^3.4.15",
     "typescript": "^5.7.2"
+  },
+  "devDependencies": {
+    "@typescript-eslint/parser": "^8.16.0",
+    "eslint": "^9.15.0",
+    "eslint-plugin-astro": "^1.3.1",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "prettier": "^3.4.0",
+    "prettier-plugin-astro": "^0.14.1",
+    "prettier-plugin-tailwindcss": "^0.6.9"
   }
 }

src/components/test.tsx

@@ -1,5 +1,5 @@
 export function Test() {
   return (
     <div className="text-3xl text-blue-500">Test React and TailwindCSS</div>
-  );
+  )
 }

src/pages/index.astro

@@ -1,6 +1,6 @@
 ---
-import Layout from "../layouts/layout.astro";
-import { Test } from "../components/test";
+import Layout from "../layouts/layout.astro"
+import { Test } from "../components/test"
 ---
 
 <Layout>

tailwind.config.mjs

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
   theme: {
     extend: {},
   },

tsconfig.json

@@ -1,12 +1,7 @@
 {
   "extends": "astro/tsconfigs/strict",
-  "include": [
-    ".astro/types.d.ts",
-    "**/*"
-  ],
-  "exclude": [
-    "dist"
-  ],
+  "include": [".astro/types.d.ts", "**/*", "eslint.config.cjs"],
+  "exclude": ["dist"],
   "compilerOptions": {
     "jsx": "react-jsx",
     "jsxImportSource": "react",
@@ -16,5 +11,5 @@
     "paths": {
       "~/*": ["./src/*"]
     }
-  },
+  }
 }