Pular para o conteúdo principal
Versão: v2.8.0

Visual Studio Code

Esta página é para dicas e truques diversos ao usar o Visual Studio Code com Wails.

Configuração do Vetur

Muito obrigado @Lyimmi por esta dica. Originalmente publicada aqui.

Vetur é um popular plugin para o Visual Studio Code que fornece realce de sintaxe e conclusão de código para projetos Vue. Ao carregar um projeto Wails no VSCode, Vetur lançará um erro já que está esperando para encontrar o projeto frontend no diretório raiz. Para consertar isso, você pode fazer o seguinte:

Crie um arquivo chamado vetur.config.js na raiz do projeto.

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

Agora, configure 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"
]
}

Isso deve permitir que você use Vetur como esperado.