Como utilizar o Visual Studio Code para programar no Roblox

Olá! Ultimamente descobri que há uma forma de usar o VScode como editor para o Roblox (Também tem como usar outros vários editores, mas só testei ele), graças ao Rojo.

Plugins

Para isso, vamos precisar instalar um plugin para o Roblox e outro para o VScode:

Preparação

Ao instalar o plugin para o VScode, vai aparacer uma tela de boas vindas e você já pode ver um botão para iniciar o Rojo no canto inferior direito:

image

Quando você reabre o editor, o botão talvez não apareça, então você pode pressionar ctrl + shift + p e clicar em Rojo: Start server:

image

Mas antes, precisamos estar dentro da pasta que vamos criar o projeto e selecionar Rojo: Initialize:
image
Esse comando criará um arquivo default.project.json, que é a configuração do projeto, mas depois vou falar mais dele.

E como padrão, criar uma pasta chamada src que será o ReplicatedStorage
image

Conexão

Essa parte é muito simples, basta clicar no botão "Start Rojo" ou rodar o comando "Rojo: Start server", se tudo estiver certo, uma mensagem de conexão vai aparecer.

image

Agora no Roblox Studio, basta clicar no plugin e em “Connect” e pronto!
image

Já podemos ver que no ReplicatedStorage foi criado uma pasta “Source”
image

Agora vamos criar o primeiro script:
Dentro da pasta src, criei um arquivo chamado MeuScript.server.lua

image

Já aparece no ReplicatedStorage:
image

Basicamente, o nome dos arquivos:
NomeDoScript.server.lua: Script
NomeDoScript.client.lua: LocalScript
NomeDoScript.lua: ModuleScript

Toda vez que salvarmos o arquivo no VScode, ele mudará no Roblox
image

Mudando as configurações

Vamos supor que eu queira criar um script no ServerScriptService, como faço isso?
Primeiro, temos que abrir o default.project.json.
Olhando para o objeto ReplicatedStorage, podemos notar duas principais propriedades: $className e $path:

"ReplicatedStorage": {
      "$className": "ReplicatedStorage",
      "Source": {
        "$path": "src"
      }
}

$className é o nome do objeto no Roblox:
image

E $path é o nome da pasta do projeto

Agora, vamos trocar as propriedades:

"ServerScriptService": {
      "$className": "ServerScriptService",
      "Source": {
        "$path": "Server"
      }
}

(É preciso desconectar e conectar o plugin no Roblox para aplicar a configuração.)
image
image
Você pode criar quantos objetos quiser.

Caso você queira que o script fique dentro do ServerScriptService, não dentro de uma pasta Source, dentro do ServerScriptService.
Basta tirar o $path de dentro da Source(que é o nome da pasta):

"ServerScriptService": {
   "$className": "ServerScriptService",
   "$path": "Server"
},

image
image

Para acessar, por exemplo o StarterPlayerScripts, é só criar o objeto:

"ServerScriptService": {
   "$className": "ServerScriptService",
   "$path": "Server"
},
"StarterPlayer": {
    "$className": "StarterPlayer",
     "StarterPlayerScripts": {
         "$className": "StarterPlayerScripts",
         "$path": "Client"
     }
}

image

image

O JSON Padrão
{
  "name": "Meu Jogo",
  "tree": {
    "$className": "DataModel",
    "HttpService": {
      "$className": "HttpService",
      "$properties": {
        "HttpEnabled": true
      }
    },
    "Lighting": {
      "$className": "Lighting",
      "$properties": {
        "Ambient": [
          0.0,
          0.0,
          0.0
        ],
        "Outlines": false,
        "GlobalShadows": true,
        "Brightness": 2.0,
        "Technology": "Voxel"
      }
    },
    "ReplicatedStorage": {
      "$className": "ReplicatedStorage",
      "Source": {
        "$path": "src"
      }
    },
    "SoundService": {
      "$className": "SoundService",
      "$properties": {
        "RespectFilteringEnabled": true
      }
    },
    "Workspace": {
      "$className": "Workspace",
      "$properties": {
        "FilteringEnabled": true
      },
      "Baseplate": {
        "$className": "Part",
        "$properties": {
          "Size": [
            512.0,
            20.0,
            512.0
          ],
          "Locked": true,
          "Color": [
            0.38823,
            0.37254,
            0.38823
          ],
          "Anchored": true,
          "Position": [
            0.0,
            -10.0,
            0.0
          ]
        }
      }
    }
  }
}
O JSON Final
{
  "name": "Meu Jogo",
  "tree": {
    "$className": "DataModel",
    "HttpService": {
      "$className": "HttpService",
      "$properties": {
        "HttpEnabled": true
      }
    },
    "Lighting": {
      "$className": "Lighting",
      "$properties": {
        "Outlines": false,
        "Brightness": 2.0,
        "Ambient": [
          0.0,
          0.0,
          0.0
        ],
        "GlobalShadows": true,
        "Technology": "Voxel"
      }
    },
    "ServerScriptService": {
      "$className": "ServerScriptService",
      "$path": "Server"
    },
    "StarterPlayer": {
      "$className": "StarterPlayer",
      "StarterPlayerScripts": {
        "$className": "StarterPlayerScripts",
        "$path": "Client"
      }
    },
    "SoundService": {
      "$className": "SoundService",
      "$properties": {
        "RespectFilteringEnabled": true
      }
    },
    "Workspace": {
      "$className": "Workspace",
      "$properties": {
        "FilteringEnabled": true
      },
      "Baseplate": {
        "$className": "Part",
        "$properties": {
          "Locked": true,
          "Position": [
            0.0,
            -10.0,
            0.0
          ],
          "Anchored": true,
          "Size": [
            512.0,
            20.0,
            512.0
          ],
          "Color": [
            0.38823,
            0.37254,
            0.38823
          ]
        }
      }
    }
  }
}

Para finalizar, essas são as extensões que uso no Visual Studio Code para programar no Roblox:

E duas votações:

Você acha legal poder usar um editor externo?

  • Programar em um editor externo é melhor para mim, pois acabo tendo mais escolhas de extensões e uso a fonte e tema de cor que estou acostumado.
  • Prefiro programar no próprio editor do Roblox, pois é mais fácil de preparar e tem um autocomplete melhor.
  • Gosto dos dois.

0 votantes

Ficou fácil de entender o tutorial?

  • Sim, consegui entender de boa.
  • Não, está difícil de entender, vou tentar comentar minha dificuldade.

0 votantes

4 Curtidas

As imagens estavam cortadas, não sei se era só para mim, mas já arrumei.

1 Curtida

Ótima dica! Isso realmente facilita nosso trabalho!

2 Curtidas

Caso alguém esteja usando VS Code para programar no Roblox, recomendo fortemente que dê uma olhada aqui:

1 Curtida

Melhor e mais bem feito artigo que já vi aqui, parabéns Gaffal! Acho que ajuda muito, apesar de eu já ter largado o roblox, ainda assim me deu uma curiosidade de programar em VScode no roblox!

2 Curtidas

Que bom! E muito obrigado! Fico muito feliz em ter contribuído :slight_smile:

2 Curtidas