docs: add Custom contexts chapter

docs/.vitepress/config.ts

@@ -38,6 +38,7 @@ export default defineConfig({
             { text: 'Configurations', link: '/guide/config' },
             { text: 'Editor & Document', link: '/guide/editor' },
             { text: 'Window & Workspace', link: '/guide/window' },
+            { text: 'Custom contexts', link: '/guide/context' },
             { text: 'Disposables', link: '/guide/disposable' },
             { text: 'Events', link: '/guide/event' },
             { text: 'VueUse Integration', link: '/guide/vueuse' },

docs/guide/context.md

@@ -0,0 +1,19 @@
+# Custom contexts
+
+VSCode's [when clause contexts](https://code.visualstudio.com/api/references/when-clause-contexts) can be used to selectively enable or disable extension commands and UI elements, such as menus and views. <ReactiveVscode /> provides `reactive::useVscodeContext` to define custom contexts in a reactive way.
+
+```ts
+import { computed, defineExtension, ref, useVscodeContext } from 'reactive-vscode'
+
+export = defineExtension(() => {
+  const contextA = useVscodeContext('demo.fromValue', true)
+  //     ^?
+
+  const contextB = useVscodeContext('demo.fromRef', contextA)
+
+  const contextC = useVscodeContext('demo.fromGetter', () => !contextA.value)
+  //     ^?
+})
+```
+
+For more information about when clause contexts, please refer to the [official documentation](https://code.visualstudio.com/api/references/when-clause-contexts).