Featured image of post Roblox(Luau)とVSCodeでモダンな開発環境のテンプレート

Roblox(Luau)とVSCodeでモダンな開発環境のテンプレート

Roblox Studio(Luau)とVSCodeを使用した、Seleneリンター、StyLuaフォーマッター、WallyパッケージマネージャーとRokitツールマネージャーのGitHubテンプレートを作成しました

GitHubテンプレート

roblox-rojo-wally-template

これは何?

Roblox(Luau)でVSCodeを使ったモダンな開発環境のテンプレートです。

  • VSCode 👉 Roblox Studioへの同期: Rojo
  • リンター: Selene
  • フォーマッター: StyLua
  • パッケージマネージャー: Wally
  • RojoとWallyのマネージャー: Rokit

ℹ️ Warning

CI/CDは入ってないです: CI/CD

インストール

💡 Tip

“Use this template"ボタンから使えます。

Rokitのインストール

Windows (PowerShell)

1
Invoke-RestMethod https://raw.githubusercontent.com/rojo-rbx/rokit/main/scripts/install.ps1 | Invoke-Expression

macOS / Linux

1
curl -fsSL https://raw.githubusercontent.com/rojo-rbx/rokit/main/scripts/install.sh | sh

RojoやWallyなどのインストール

1
2
3
rokit add rojo
rokit add wally
rokit add wally-package-types

パッケージのインストール

1
2
3
4
5
wally install
rojo sourcemap default.project.json --output sourcemap.json
wally-package-types -s sourcemap.json Packages/
wally-package-types -s sourcemap.json ServerPackages/
wally-package-types -s sourcemap.json DevPackages/

VSCode拡張機能のインストール

このプロジェクトを開くとVSCodeで以下の拡張機能が表示されるのでインストールします。

使い方

VSCodeからRojo

「Ctrl + Shift + P」

「Rojo: Open Menu」

ℹ️ Note

初めてならRoblox Studioを起動して、Install Roblox Studio Plugin

「▶ default.project.json」

VSCodeからRojoの起動方法

Roblox StudioからRojo

「プラグイン」タブ

「Rojo」リボン

「Connect」ボタン

Roblox StudioからRojoの接続方法

Wallyにパッケージを追加

wally.tomlをVSCodeで編集します。

wally.runのサイトで欲しいパッケージを調べて「Install」でパッケージ名をコピーします。

各セクションの分類は

[dependencies]がクライアントとサーバー

[server-dependencies]がサーバーのみ

[dev-dependencies]が開発やテストのみ

書き終えたら、再度パッケージのインストールを行います。

参考

How Big Studios Develop on Roblox

Hugo で構築されています。
テーマ StackJimmy によって設計されています。