Visual Studio Code

此页面提供在使用带有 Wails 的 Visual Studio Code 时的各种提示和技巧。

Vetur 配置

非常感谢 @Lyimmi 的这个提示。 最初张贴 在这里。

Vetur 是一个流行的 Visual Studio Code 插件，它为 Vue 项目提供语法高亮和代码完成。 在 VSCode 中加载 Wails 项目时，Vetur 会抛出错误，因为它期望在根目录中找到前端项目。 要解决此问题，您可以执行以下操作：

在项目根目录创建一个以 vetur.config.js 命名的文件。

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

接下来，配置 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"
  ]
}

这应该使您现在可以按预期使用 Vetur。