Vasp Brain
Suporte completo ao vasp no VS Code — snippets, IntelliSense e configuração automática. Instale a extensão e comece a usar: nenhum arquivo precisa ser criado manualmente.
O que é o vasp?
vasp é um framework leve que conecta ES6 modules com páginas ASP.NET Web Forms que usam Vue.js via CDN. Permite escrever componentes, mixins, enums e helpers em arquivos JavaScript separados, com registro automático no app Vue — mesmo que o arquivo execute antes de window.app existir.
O que esta extensão faz
IntelliSense automático
Ao abrir qualquer workspace com arquivos .js, a extensão configura automaticamente o IntelliSense para todas as funções globais do vasp:
- Assinatura dos parâmetros de
Component(), Mixin(), Enum(), Helper(), Directive(), UsePlugin()
- Autocomplete das opções Vue (
data, methods, props, computed, mounted…)
- Documentação inline ao passar o mouse sobre as funções
- Suporte a
Vasp.init(), Vasp.ready(), Vasp.inspect()
Nenhum npm install necessário. Os tipos são baixados automaticamente pelo VS Code.
Configuração automática
A extensão cria e mantém o jsconfig.json na raiz do workspace automaticamente. Se o arquivo já existir, apenas adiciona a entrada do vasp sem alterar o restante.
Snippets
Gatilhos disponíveis em arquivos .js e .html:
| Gatilho |
Gera |
vasp-c |
Componente Vue completo (props, data, methods, template) |
vasp-cs |
Componente Vue minimalista |
vasp-m |
Mixin com variável capturada |
vasp-e |
Enum global |
vasp-h |
Helper objeto |
vasp-hf |
Helper função |
vasp-d |
Directive com mounted / updated / unmounted |
vasp-p |
Plugin anônimo |
vasp-pn |
Plugin nomeado |
vasp-init |
Bloco de inicialização para a página ASPX |
Uso básico
1. Instalar a extensão
Instale pelo VS Code Marketplace ou via .vsix. O IntelliSense e os snippets ficam disponíveis imediatamente.
2. Adicionar o vasp à página ASPX
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.../vasp.js"></script>
3. Escrever componentes como arquivos JS normais
// components/cliente-card.js
Component('cliente-card', {
props: {
nome: { type: String, required: true },
},
template: `
<div class="cliente-card">{{ nome }}</div>
`
})
4. Inicializar na página
const app = Vue.createApp({})
Vasp.init(app)
app.mount('#app')
Primitivos disponíveis
| Função |
Descrição |
Component(name, options) |
Registra um componente Vue |
Mixin(name, options) |
Registra um mixin Vue |
Enum(name, values) |
Declara um enum global imutável |
Helper(name, value) |
Expõe uma função ou objeto globalmente |
Directive(name, definition) |
Registra uma directive Vue |
UsePlugin(plugin, options?) |
Instala um plugin Vue |
Vasp.init(app, options?) |
Inicializa o vasp com o app Vue |
Vasp.ready(callback) |
Callback quando o app estiver pronto |
Vasp.inspect() |
Inspeciona o estado do runtime no console |
Vasp.version |
Versão do vasp em execução |
Debug
Ative os warnings em desenvolvimento adicionando antes do vasp.js:
<script>window.VASP_DEBUG = true</script>
Ou via Vasp.init():
Vasp.init(app, { debug: true })
