feat: use prettier to lint docs

.prettierignore

@@ -1,3 +1,10 @@
+# VuePress files
+docs/.vuepress/.temp/
+docs/.vuepress/.cache/
+docs/.vuepress/dist/
+
+# Node modules
+node_modules/
+
+# pnpm lockfile
 pnpm-lock.yaml
-*.html
-*.md

docs/.vuepress/public/new.html

@@ -1 +1,3 @@
-<script>window.location = 'https://stackblitz.com/fork/vuepress'</script>
+<script>
+  window.location = 'https://stackblitz.com/fork/vuepress'
+</script>

docs/advanced/cookbook/markdown-and-vue-sfc.md

@@ -27,13 +27,14 @@ _Current count is: {{ count }}_
 <script setup>
 import { h, ref } from 'vue'
 
-const RedDiv = (_, ctx) => h(
-  'div',
-  {
-    class: 'red-div',
-  },
-  ctx.slots.default()
-)
+const RedDiv = (_, ctx) =>
+  h(
+    'div',
+    {
+      class: 'red-div',
+    },
+    ctx.slots.default(),
+  )
 const msg = 'Vue in Markdown'
 const count = ref(0)
 </script>

docs/advanced/cookbook/passing-data-to-client-code.md

@@ -43,7 +43,10 @@ First, write a temp file `foo.js`, which will be generated in the [temp](../../r
 export default (options) => ({
   async onPrepared(app) {
     // write temp file
-    await app.writeTemp('foo.js', `export const foo = ${JSON.stringify(options.foo)}`)
+    await app.writeTemp(
+      'foo.js',
+      `export const foo = ${JSON.stringify(options.foo)}`,
+    )
   },
 })
 ```

docs/advanced/plugin.md

@@ -6,7 +6,7 @@ Before reading this guide, you'd better learn the VuePress [architecture](./arch
 
 ## Create a Plugin
 
-A plugin should be a plain JavaScript object that satisfies the [Plugin API](../reference/plugin-api.md), which is called a *Plugin Object*:
+A plugin should be a plain JavaScript object that satisfies the [Plugin API](../reference/plugin-api.md), which is called a _Plugin Object_:
 
 ```ts
 const fooPlugin = {
@@ -15,7 +15,7 @@ const fooPlugin = {
 }
 ```
 
-A plugin could also be a function that receives the [app instance](../reference/node-api.md#app) as the param and returns a *Plugin Object*, which is called a *Plugin Function*:
+A plugin could also be a function that receives the [app instance](../reference/node-api.md#app) as the param and returns a _Plugin Object_, which is called a _Plugin Function_:
 
 ```ts
 const barPlugin = (app) => {
@@ -26,7 +26,7 @@ const barPlugin = (app) => {
 }
 ```
 
-A plugin usually needs to allow user options, so we typically provide users with a function to receive options, and returns a *Plugin Object* or a *Plugin Function*. Then your plugin should be converted like this:
+A plugin usually needs to allow user options, so we typically provide users with a function to receive options, and returns a _Plugin Object_ or a _Plugin Function_. Then your plugin should be converted like this:
 
 ```ts
 const fooPlugin = (options) => {
@@ -53,11 +53,9 @@ After creating a plugin, you should follow some conventions in the [package.json
 ```json
 {
   "name": "vuepress-plugin-foo",
-  "keywords": [
-    "vuepress-plugin"
-  ]
+  "keywords": ["vuepress-plugin"]
 }
 ```
 
-- Set `name` to follow the naming convention, i.e. `vuepress-plugin-xxx` or `@org/vuepress-plugin-xxx`, which should be consistent with the [name](../reference/plugin-api.md#name) field of the *Plugin Object*.
+- Set `name` to follow the naming convention, i.e. `vuepress-plugin-xxx` or `@org/vuepress-plugin-xxx`, which should be consistent with the [name](../reference/plugin-api.md#name) field of the _Plugin Object_.
 - Set `keywords` to include `vuepress-plugin`, so that users can search your plugin on NPM.

docs/advanced/theme.md

@@ -6,7 +6,7 @@ Before reading this guide, you'd better learn the guide of [Writing a Plugin](./
 
 ## Create a Theme
 
-A VuePress theme is a special plugin, which should satisfy the [Theme API](../reference/theme-api.md). Like plugins, a theme should also be a *Theme Object* or a *Theme Function*, and could be wrapped with a function to receive options:
+A VuePress theme is a special plugin, which should satisfy the [Theme API](../reference/theme-api.md). Like plugins, a theme should also be a _Theme Object_ or a _Theme Function_, and could be wrapped with a function to receive options:
 
 ```ts
 import { getDirname, path } from '@vuepress/utils'
@@ -90,11 +90,9 @@ Also, there are some conventions for theme in [package.json](https://docs.npmjs.
 ```json
 {
   "name": "vuepress-theme-foo",
-  "keywords": [
-    "vuepress-theme"
-  ]
+  "keywords": ["vuepress-theme"]
 }
 ```
 
-- Set `name` to follow the naming convention: `vuepress-theme-xxx` or `@org/vuepress-theme-xxx`, which should be consistent with the [name](../reference/theme-api.md#name) field of the *Theme Object*.
+- Set `name` to follow the naming convention: `vuepress-theme-xxx` or `@org/vuepress-theme-xxx`, which should be consistent with the [name](../reference/theme-api.md#name) field of the _Theme Object_.
 - Set `keywords` to include `vuepress-theme`, so that users can search your theme on NPM.

docs/guide/assets.md

@@ -60,14 +60,15 @@ In most cases, you don't need to worry about the reference path of those public
 
 ```md
 <!-- you don't need to prepend `/bar/` to `/images/hero.png` manually -->
+
 ![VuePress Logo](/images/hero.png)
 ```
 
 However, sometimes you may have some dynamical links referencing public files, especially when you are authoring a custom theme. In such case, the `base` could not be handled automatically. To help with that, VuePress provides a [withBase](../reference/client-api.md#withbase) helper to prepend `base` for you:
 
 ```vue
 <template>
-  <img :src="withBase(logoPath)">
+  <img :src="withBase(logoPath)" />
 </template>
 
 <script setup>

docs/guide/deployment.md

@@ -28,6 +28,7 @@ The following guides are based on some shared assumptions:
    Create `.github/workflows/docs.yml` to set up the workflow.
 
 ::: details Click to expand sample config
+
 ```yaml
 name: docs
 
@@ -81,6 +82,7 @@ jobs:
           # @see https://docs.github.com/en/actions/reference/authentication-in-a-workflow#about-the-github_token-secret
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 ```
+
 :::
 
 ::: tip
@@ -98,6 +100,7 @@ Please refer to [GitHub Pages official guide](https://pages.github.com/) for mor
 2. Create `.gitlab-ci.yml` to set up [GitLab CI](https://about.gitlab.com/stages-devops-lifecycle/continuous-integration/) workflow.
 
 ::: details Click to expand sample config
+
 ```yaml
 # choose a docker image to use
 image: node:18-buster
@@ -129,6 +132,7 @@ pages:
     paths:
       - public
 ```
+
 :::
 
 ::: tip

docs/guide/markdown.md

@@ -48,14 +48,19 @@ Take our documentation source files as an example:
 
 ```md
 <!-- relative path -->
+
 [Home](../README.md)  
 [Config Reference](../reference/config.md)  
-[Getting Started](./getting-started.md)  
+[Getting Started](./getting-started.md)
+
 <!-- absolute path -->
+
 [Guide](/guide/README.md)  
-[Config Reference > markdown.links](/reference/config.md#links)  
+[Config Reference > markdown.links](/reference/config.md#links)
+
 <!-- URL -->
-[GitHub](https://github.com)  
+
+[GitHub](https://github.com)
 ```
 
 **Converted to**
@@ -66,8 +71,12 @@ Take our documentation source files as an example:
   <RouterLink to="/reference/config.html">Config Reference</RouterLink>
   <RouterLink to="/guide/getting-started.html">Getting Started</RouterLink>
   <RouterLink to="/guide/">Guide</RouterLink>
-  <RouterLink to="/reference/config.html#links">Config Reference &gt; markdown.links</RouterLink>
-  <a href="https://github.com" target="_blank" rel="noopener noreferrer">GitHub</a>
+  <RouterLink to="/reference/config.html#links"
+    >Config Reference &gt; markdown.links</RouterLink
+  >
+  <a href="https://github.com" target="_blank" rel="noopener noreferrer"
+    >GitHub</a
+  >
 </template>
 ```
 
@@ -78,7 +87,7 @@ Take our documentation source files as an example:
 [Getting Started](./getting-started.md)  
 [Guide](/guide/README.md)  
 [Config Reference > markdown.links](/reference/config.md#links)  
-[GitHub](https://github.com)  
+[GitHub](https://github.com)
 
 **Explanation**
 
@@ -254,6 +263,7 @@ If you want to make Vue syntax work in those languages anyway, try to disable th
 ````md
 ```md
 <!-- This will be kept as is by default -->
+
 1 + 2 + 3 = {{ 1 + 2 + 3 }}
 ```
 
@@ -272,6 +282,7 @@ const onePlusTwoPlusThree = {{ 1 + 2 + 3 }}
 
 ```md
 <!-- This will be kept as is -->
+
 1 + 2 + 3 = {{ 1 + 2 + 3 }}
 ```
 
@@ -302,27 +313,31 @@ You can import code blocks from files with following syntax:
 
 ```md
 <!-- minimal syntax -->
+
 @[code](../foo.js)
 ```
 
 If you want to partially import the file:
 
 ```md
 <!-- partial import, from line 1 to line 10 -->
+
 @[code{1-10}](../foo.js)
 ```
 
 The code language is inferred from the file extension, while it is recommended to specify it explicitly:
 
 ```md
 <!-- specify the code language -->
+
 @[code js](../foo.js)
 ```
 
 In fact, the second part inside the `[]` will be treated as the mark of the code fence, so it supports all the syntax mentioned in the above [Code Blocks](#code-blocks) section:
 
 ```md
 <!-- line highlighting -->
+
 @[code js{2,4-5}](../foo.js)
 ```
 
@@ -356,6 +371,7 @@ export default {
 
 ```md
 <!-- it will be resolved to 'path/to/src/foo.js' -->
+
 @[code](@src/foo.js)
 ```
 

docs/guide/page.md

@@ -20,7 +20,7 @@ Assuming this is the directory structure of your markdown files:
 Take the `docs` directory as your [sourceDir](../reference/cli.md), e.g. you are running `vuepress dev docs` command. Then the route paths of your markdown files would be:
 
 | Relative Path               | Route Path                    |
-|-----------------------------|-------------------------------|
+| --------------------------- | ----------------------------- |
 | `/README.md`                | `/`                           |
 | `/index.md`                 | `/`                           |
 | `/contributing.md`          | `/contributing.html`          |

docs/guide/plugin.md

@@ -38,9 +38,7 @@ But if you have too many things to do in your config file, you can consider to e
 import myPlugin from './path/to/my-plugin.js'
 
 export default {
-  plugins: [
-    myPlugin(),
-  ],
+  plugins: [myPlugin()],
 }
 ```
 

docs/reference/cli.md

@@ -21,8 +21,8 @@ For more info, run any command with the `--help` flag:
   $ vuepress info --help
 
 Options:
-  -v, --version  Display version number 
-  -h, --help     Display this message 
+  -v, --version  Display version number
+  -h, --help     Display this message
 ```
 
 ::: tip
@@ -40,17 +40,17 @@ Usage:
   $ vuepress dev [sourceDir]
 
 Options:
-  -c, --config <config>  Set path to config file 
-  -p, --port <port>      Use specified port (default: 8080) 
-  -t, --temp <temp>      Set the directory of the temporary files 
-  --host <host>          Use specified host (default: 0.0.0.0) 
-  --cache <cache>        Set the directory of the cache files 
-  --clean-temp           Clean the temporary files before dev 
-  --clean-cache          Clean the cache files before dev 
-  --open                 Open browser when ready 
-  --debug                Enable debug mode 
+  -c, --config <config>  Set path to config file
+  -p, --port <port>      Use specified port (default: 8080)
+  -t, --temp <temp>      Set the directory of the temporary files
+  --host <host>          Use specified host (default: 0.0.0.0)
+  --cache <cache>        Set the directory of the cache files
+  --clean-temp           Clean the temporary files before dev
+  --clean-cache          Clean the cache files before dev
+  --open                 Open browser when ready
+  --debug                Enable debug mode
   --no-watch             Disable watching page and config files (default: true)
-  -v, --version          Display version number 
+  -v, --version          Display version number
   -h, --help             Display this message
 ```
 
@@ -67,14 +67,14 @@ Usage:
   $ vuepress build [sourceDir]
 
 Options:
-  -c, --config <config>  Set path to config file 
-  -d, --dest <dest>      Set the directory build output (default: .vuepress/dist) 
-  -t, --temp <temp>      Set the directory of the temporary files 
-  --cache <cache>        Set the directory of the cache files 
-  --clean-temp           Clean the temporary files before build 
-  --clean-cache          Clean the cache files before build 
-  --debug                Enable debug mode 
-  -v, --version          Display version number 
+  -c, --config <config>  Set path to config file
+  -d, --dest <dest>      Set the directory build output (default: .vuepress/dist)
+  -t, --temp <temp>      Set the directory of the temporary files
+  --cache <cache>        Set the directory of the cache files
+  --clean-temp           Clean the temporary files before build
+  --clean-cache          Clean the cache files before build
+  --debug                Enable debug mode
+  -v, --version          Display version number
   -h, --help             Display this message
 ```
 

docs/reference/components.md

@@ -24,6 +24,7 @@
 ## Content
 
 - Props:
+
   - pageKey
     - Type: `string`
     - Required: `false`

docs/reference/default-theme/components.md

@@ -5,6 +5,7 @@
 ## Badge <Badge text="badge" />
 
 - Props:
+
   - type
     - Type: `'tip' | 'warning' | 'danger'`
     - Default: `'tip'`
@@ -40,6 +41,7 @@
 ## CodeGroupItem
 
 - Props:
+
   - title
     - Type: `string`
     - Required: `true`

docs/reference/default-theme/extending.md

@@ -78,7 +78,10 @@ const __dirname = getDirname(import.meta.url)
 export default defineUserConfig({
   theme: defaultTheme(),
   alias: {
-    '@theme/HomeFooter.vue': path.resolve(__dirname, './components/MyHomeFooter.vue'),
+    '@theme/HomeFooter.vue': path.resolve(
+      __dirname,
+      './components/MyHomeFooter.vue',
+    ),
   },
 })
 ```
@@ -106,7 +109,10 @@ export const childTheme = (options: DefaultThemeOptions): Theme => {
 
     // override component alias
     alias: {
-      '@theme/HomeFooter.vue': path.resolve(__dirname, './components/MyHomeFooter.vue'),
+      '@theme/HomeFooter.vue': path.resolve(
+        __dirname,
+        './components/MyHomeFooter.vue',
+      ),
     },
   }
 }