Add prettier and eslint tooling

.vitepress/config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vitepress'
+import { defineConfig } from "vitepress";
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -7,22 +7,22 @@ export default defineConfig({
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     nav: [
-      { text: 'Home', link: '/' },
+      { text: "Home", link: "/" },
-      { text: 'Examples', link: '/markdown-examples' }
+      { text: "Examples", link: "/markdown-examples" },
     ],
 
     sidebar: [
       {
-        text: 'Examples',
+        text: "Examples",
         items: [
-          { text: 'Markdown Examples', link: '/markdown-examples' },
+          { text: "Markdown Examples", link: "/markdown-examples" },
-          { text: 'Runtime API Examples', link: '/api-examples' }
+          { text: "Runtime API Examples", link: "/api-examples" },
-        ]
+        ],
-      }
+      },
     ],
 
     socialLinks: [
-      { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
+      { icon: "github", link: "https://github.com/vuejs/vitepress" },
-    ]
+    ],
-  }
+  },
-})
+});

.vitepress/theme/index.ts

@@ -1,17 +1,17 @@
 // https://vitepress.dev/guide/custom-theme
-import { h } from 'vue'
+import { h } from "vue";
-import type { Theme } from 'vitepress'
+import type { Theme } from "vitepress";
-import DefaultTheme from 'vitepress/theme'
+import DefaultTheme from "vitepress/theme";
-import './style.css'
+import "./style.css";
 
 export default {
   extends: DefaultTheme,
   Layout: () => {
     return h(DefaultTheme.Layout, null, {
       // https://vitepress.dev/guide/extending-default-theme#layout-slots
-    })
+    });
   },
-  enhanceApp({ app, router, siteData }) {
+  enhanceApp(/*{ app, router, siteData }*/) {
     // ...
-  }
+  },
-} satisfies Theme
+} satisfies Theme;

.vitepress/theme/style.css

@@ -43,7 +43,7 @@
  *   in custom container, badges, etc.
  * -------------------------------------------------------------------------- */
 
- :root {
+:root {
   --vp-c-default-1: var(--vp-c-gray-1);
   --vp-c-default-2: var(--vp-c-gray-2);
   --vp-c-default-3: var(--vp-c-gray-3);
@@ -136,4 +136,3 @@
 .DocSearch {
   --docsearch-primary-color: var(--vp-c-brand-1) !important;
 }
-

api-examples.md

@@ -18,12 +18,15 @@ const { theme, page, frontmatter } = useData()
 ## Results
 
 ### Theme Data
+
 <pre>{{ theme }}</pre>
 
 ### Page Data
+
 <pre>{{ page }}</pre>
 
 ### Page Frontmatter
+
 <pre>{{ frontmatter }}</pre>
 ```
 
@@ -36,12 +39,15 @@ const { site, theme, page, frontmatter } = useData()
 ## Results
 
 ### Theme Data
+
 <pre>{{ theme }}</pre>
 
 ### Page Data
+
 <pre>{{ page }}</pre>
 
 ### Page Frontmatter
+
 <pre>{{ frontmatter }}</pre>
 
 ## More

eslint.config.js

@@ -0,0 +1,13 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+import pluginVue from "eslint-plugin-vue";
+
+export default [
+  { files: ["**/*.{js,mjs,cjs,ts,vue}"] },
+  { ignores: [".vitepress/dist", ".vitepress/cache"] },
+  { languageOptions: { globals: globals.browser } },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  ...pluginVue.configs["flat/essential"],
+];

index.md

@@ -22,4 +22,3 @@ features:
   - title: Feature C
     details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
 ---
-

package.json

@@ -3,7 +3,13 @@
   "module": "index.md",
   "type": "module",
   "devDependencies": {
+    "@eslint/js": "^9.5.0",
     "@types/bun": "latest",
+    "eslint": "9.x",
+    "eslint-plugin-vue": "^9.26.0",
+    "globals": "^15.6.0",
+    "prettier": "^3.3.2",
+    "typescript-eslint": "^7.13.1",
     "vitepress": "^1.2.3",
     "vue": "^3.4.29"
   },
@@ -13,6 +19,8 @@
   "scripts": {
     "dev": "vitepress dev",
     "build": "vitepress build",
-    "preview": "vitepress preview"
+    "preview": "vitepress preview",
+    "format": "prettier -w .",
+    "lint": "eslint ."
   }
 }