docs(react-vue): add mention of graphqlsp to the docs (#9773)

Co-authored-by: Laurin Quast <[email protected]>

website/src/pages/docs/guides/react-vue.mdx

@@ -480,13 +480,43 @@ From simple Queries to more advanced Fragments-based ones, GraphQL Code Generato
 
 **What's next?**
 
-To get the best GraphQL development experience, we recommend installing the [GraphQL VSCode extension](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql) to get:
+To get the best GraphQL development experience, we recommend installing the [GraphQLSP](https://github.com/0no-co/GraphQLSP) package to get:
 
 - syntax highlighting
 - autocomplete suggestions
 - validation against schema
-- snippets
-- go to definition for fragments and input types
+- quick-info on hover
+
+![GraphQLSP](/assets/docs/graphqlsp.png)
+
+`GraphQLSP`s a TypeScript LSP plugin for GraphQL, to get it working, we need to add the following to your `tsconfig.json`
+after installing the package (`npm i -D @0no-co/graphqlsp`):
+
+```json filename="tsconfig.json"
+{
+  "compilerOptions": {
+    "plugins": [
+      {
+        "name": "@0no-co/graphqlsp",
+        "schema": "./schema.graphql",
+        "disableTypegen": true,
+        "templateIsCallExpression": true,
+        "template": "graphql"
+      }
+    ]
+  }
+}
+```
+
+Last but not least you need to ensure that when you're using `VSCode` that the workspace version of TS is used, the following
+config will make a prompt appear to switch it when visiting a TS file
+
+```json filename=".vscode/settings.json"
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}
+```
 
 Also, make sure to follow GraphQL best practices by using [`graphql-eslint`](https://github.com/B2o5T/graphql-eslint) and the [ESLint VSCode extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) to visualize errors and warnings inlined in your code correctly.