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 pour ce conseil. A initialement posté ici.

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.

// 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:

{
  "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.