Vetur documentation

website/docs/guides/vscode.mdx

@@ -0,0 +1,85 @@
+
+# Visual Studio Code
+
+This page is for miscellaneous tips and tricks when using Visual Studio Code with Wails.
+
+## Vetur Configuration
+
+Many thanks to [@Lyimmi](https://github.com/Lyimmi) for this tip. Originally posted 
+[here](https://github.com/wailsapp/wails/issues/1791#issuecomment-1228158349).
+
+Vetur is a popular plugin for Visual Studio Code that provides syntax highlighting and code completion
+for Vue projects. When loading a Wails project in VSCode, Vetur will throw an error as it is expecting 
+to find the frontend project in the root directory. To fix this, you can do the following:
+
+Create a file named `vetur.config.js` in the project's root.
+
+```javascript
+// vetur.config.js
+/** @type {import('vls').VeturConfig} */
+module.exports = {
+    // **optional** default: `{}`
+    // override vscode settings
+    // Notice: It only affects the settings used by Vetur.
+    settings: {
+        "vetur.useWorkspaceDependencies": true,
+        "vetur.experimental.templateInterpolationService": true
+    },
+    // **optional** default: `[{ root: './' }]`
+    // support monorepos
+    projects: [
+        {
+            // **required**
+            // Where is your project?
+            // It is relative to `vetur.config.js`.
+            // root: './packages/repo1',
+            root: './frontend',
+            // **optional** default: `'package.json'`
+            // Where is `package.json` in the project?
+            // We use it to determine the version of vue.
+            // It is relative to root property.
+            package: './package.json',
+            // **optional**
+            // Where is TypeScript config file in the project?
+            // It is relative to root property.
+            tsconfig: './tsconfig.json',
+            // **optional** default: `'./.vscode/vetur/snippets'`
+            // Where is vetur custom snippets folders?
+            snippetFolder: './.vscode/vetur/snippets',
+            // **optional** default: `[]`
+            // Register globally Vue component glob.
+            // If you set it, you can get completion by that components.
+            // It is relative to root property.
+            // Notice: It won't actually do it. You need to use `require.context` or `Vue.component`
+            globalComponents: [
+                './src/components/**/*.vue'
+            ]
+        }
+    ]
+}
+```
+
+Next, configure `frontend/tsconfig.js`:
+
+```javascript
+{
+  "compilerOptions": {
+    "module": "system",
+    "noImplicitAny": true,
+    "removeComments": true,
+    "preserveConstEnums": true,
+    "sourceMap": true,
+    "outFile": "../../built/local/tsc.js",
+    "allowJs": true
+  },
+  "exclude": [
+    "node_modules",
+    "**/*.spec.ts"
+  ],
+  "include": [
+    "src/**/*",
+    "wailsjs/**/*.ts"
+  ]
+}
+```
+This should enable you to now use Vetur as expected.