mirror of
https://github.com/wavetermdev/wails.git
synced 2026-08-05 13:53:43 -07:00
Misite BaoandGitHub
91de3ab0c5
* docs: update options documentation * docs: sync documents * docs: sync Korean, Russian, French and Portuguese documents * docs: sync Chinese, Japanese and Korean documents
83 lines
2.8 KiB
Plaintext
83 lines
2.8 KiB
Plaintext
|
|
# 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](https://github.com/Lyimmi) por esta dica. Originalmente publicada [aqui](https://github.com/wailsapp/wails/issues/1791#issuecomment-1228158349).
|
|
|
|
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.
|
|
|
|
```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'
|
|
]
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
Agora, configure `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"
|
|
]
|
|
}
|
|
```
|
|
Isso deve permitir que você use Vetur como esperado.
|