Como Criar Facilmente Extensões para o VSCode

☕ Como criar uma extensão para o VSCode que é um Syntax Highlight para a linguagem de programação Mylang que foi desenvolvida no Curso de Criação de Linguagem de Programação com C++. Instale o NPM Via https://nodejs.org/ ou: Via WinGet no Windows com PowerShell: winget install --id=OpenJS.NodeJS -e Ou com o gerenciador de pacotes do seu sistema operacional, exemplo no Ubuntu: sudo apt install npm Crie uma conta no MARKETPLACE da MICROSOFT nesse endereço: https://marketplace.visualstudio.com/vscode Instale os pacotes necessários via npm No caso do Windows não precisa usar o sudo sudo npm install -g yo generator-code vsce Inicie os arquivos para a criação da extensão Rode: yo code Depois responda o Wizard conforme vimos no vídeo: _-----_ ╭──────────────────────────╮ | | │ Welcome to the Visual │ |--(o)--| │ Studio Code Extension │ `---------´ │ generator! │ ( _´U`_ ) ╰──────────────────────────╯ /_A_\ / | ~ | '._.'__ ´ ` |° ´ Y ` ... Edite e crie arquivos README.md copie e modifique de ter-vscode e revise! package.json , também copie de ter-vscode, mas adicione "icon": "images/icon.png", logo após version e use o nome do seu usuário da conta que vc criou! Crie o arquivo: syntaxes/mylang.tmLanguage.json mkdir syntaxes code syntaxes/mylang.tmLanguage.json Copie daqui e modifique conforme necessário: https://github.com/terroo/ter-vscode/blob/main/syntaxes/terlang.tmLanguage.json Crie o arquivo .vsix para publicar vsce package Publique! No site do MARKETPLACE ou via comando: vsce login vsce publish Mas, precisa ter um token gerado no Azure pelo endereço: https://dev.azure.com/. O legal de publicar via linha de comando é que você pode criar novas versões, editar e até excluir extensões! Você também pode instalar localmente com o comando: code --install-extension mylang-0.0.1.vsix Mas, pesquise após publicar no Marketplace: https://marketplace.visualstudio.com/ e também no próprio VSCode Assista ao vídeo Veja também:

May 8, 2025 - 01:03

Como Criar Facilmente Extensões para o VSCode

☕ Como criar uma extensão para o VSCode que é um Syntax Highlight para a linguagem de programação Mylang que foi desenvolvida no Curso de Criação de Linguagem de Programação com C++.

Instale o NPM

Via https://nodejs.org/ ou:

Via WinGet no Windows com PowerShell:

winget install --id=OpenJS.NodeJS  -e

Ou com o gerenciador de pacotes do seu sistema operacional, exemplo no Ubuntu:

sudo apt install npm

Crie uma conta no MARKETPLACE da MICROSOFT nesse endereço:

https://marketplace.visualstudio.com/vscode

Instale os pacotes necessários via `npm`

No caso do Windows não precisa usar o sudo

sudo npm install -g yo generator-code vsce

Inicie os arquivos para a criação da extensão

Rode:

yo code

Depois responda o Wizard conforme vimos no vídeo:


     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 
...

Edite e crie arquivos

README.md copie e modifique de ter-vscode e revise!
package.json , também copie de ter-vscode, mas adicione "icon": "images/icon.png", logo após version e use o nome do seu usuário da conta que vc criou!

Crie o arquivo: syntaxes/mylang.tmLanguage.json

mkdir syntaxes
code syntaxes/mylang.tmLanguage.json

Copie daqui e modifique conforme necessário: https://github.com/terroo/ter-vscode/blob/main/syntaxes/terlang.tmLanguage.json

Crie o arquivo `.vsix` para publicar

vsce package

Publique!

No site do MARKETPLACE ou via comando:

vsce login 
vsce publish

Mas, precisa ter um token gerado no Azure pelo endereço: https://dev.azure.com/. O legal de publicar via linha de comando é que você pode criar novas versões, editar e até excluir extensões!
Você também pode instalar localmente com o comando: code --install-extension mylang-0.0.1.vsix

Mas, pesquise após publicar no Marketplace: https://marketplace.visualstudio.com/ e também no próprio VSCode