
# Visual Studio Code

Cette page est destinée à divers trucs et astuces lors de l'utilisation de Visual Studio Code avec Wails.

## Configuration Vetur

Un grand merci à [@Lyimmi](https://github.com/Lyimmi) pour ce conseil. A initialement posté [ici](https://github.com/wailsapp/wails/issues/1791#issuecomment-1228158349).

Vetur est un plugin populaire pour Visual Studio Code qui fournit la coloration syntaxique et la complétion du code pour les projets Vue. Lors du chargement d'un projet Wails en VSCode, Vetur lancera une erreur car il attend de trouver le projet frontend dans le répertoire racine. Pour résoudre ce problème, vous pouvez faire ce qui suit :

Créer un fichier nommé `vetur.config.js` à la racine du projet.

```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'
            ]
        }
    ]
}
```

Ensuite, configurez `frontend/tsconfig.json`:

```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"
  ]
}
```
Cela devrait vous permettre d'utiliser Vetur comme prévu.
