はじめに
テスト環境
- Visual Studio Code 1.100.2
- Argon v2.0.24（Visual Studio Code）
- Argon v2.0.18（Roblox Studio）
前提条件
- Visual Studio Code をインストールしてある事
- Roblox Studio をインストールして Place を作成してある事
手順
Visual Studio Code への Argon のインストール
手順1
Visual Studio Code を開き、拡張機能で「argon」と検索して Argon をインストールする。
手順2
「Trust Publisher & Install」を押してインストール完了後に Visual Studio Code を再起動する。
ローカルのプロジェクトの作成
手順3
Roblox Studio の Place 用のフォルダをエクスプローラーで作成する。
手順4
Visual Studio Code を開き、「File ＞ Open Folder…」で Roblox Studio の Place 用のフォルダを開く。
手順5
「Ctrl + Shift + P」でコマンドパレットを開き、「Argon: Open Menu」を押す。
手順6
「Init」を押してプロジェクトの作成を開始する。
手順7
プロジェクト名が「default」の状態で Enter を押す。
手順8
プロジェクトのテンプレートで「Place」を押す。
手順9
プロジェクトのオプションを選択して「OK」を押す。
（今回は全てのチェックを外した状態で進めるが、こちらを参考にして必要なオプションを選択する）
必要なフォルダの作成
手順10
作成された「default.project.json」を以下のように書き換える。
（「name」の「{Place 名}」は Roblox Studio の Place 名などに変える）
{
"name": "{Place 名}",
"tree": {
"$className": "DataModel",
"Lighting": {
"$path": "src/Lighting"
},
"MaterialService": {
"$path": "src/MaterialService"
},
"NetworkClient": {
"$path": "src/NetworkClient"
},
"Players": {
"$path": "src/Players"
},
"ReplicatedFirst": {
"$path": "src/ReplicatedFirst"
},
"ReplicatedStorage": {
"$path": "src/ReplicatedStorage"
},
"ServerScriptService": {
"$path": "src/ServerScriptService"
},
"ServerStorage": {
"$path": "src/ServerStorage"
},
"SoundService": {
"$path": "src/SoundService"
},
"StarterGui": {
"$path": "src/StarterGui"
},
"StarterPack": {
"$path": "src/StarterPack"
},
"StarterPlayer": {
"StarterCharacterScripts": {
"$path": "src/StarterPlayer/StarterCharacterScripts"
},
"StarterPlayerScripts": {
"$path": "src/StarterPlayer/StarterPlayerScripts"
}
},
"Teams": {
"$path": "src/Teams"
},
"TextChatService": {
"$path": "src/TextChatService"
},
"Workspace": {
"$path": "src/Workspace"
}
}
}手順11
エクスプローラーで「default.project.json」と同じディレクトリにテキストファイルを作成し、メモ帳などで内容を以下のように変更してテキストファイルの拡張子を「.txt」から「.bat」に変え、バッチファイルを作成する。
mkdir src
mkdir src\Workspace
mkdir src\Players
mkdir src\Lighting
mkdir src\MaterialService
mkdir src\NetworkClient
mkdir src\ReplicatedFirst
mkdir src\ReplicatedStorage
mkdir src\ServerScriptService
mkdir src\ServerStorage
mkdir src\StarterGui
mkdir src\StarterPack
mkdir src\StarterPlayer
mkdir src\StarterPlayer\StarterPlayerScripts
mkdir src\StarterPlayer\StarterCharacterScripts
mkdir src\Teams
mkdir src\SoundService
mkdir src\TextChatService手順12
作成したバッチファイルをダブルクリックして実行し、必要なフォルダを作成する。
Roblox Studio の Argon のセットアップ
手順13
Roblox Studio で Place を開き、「PLUGINS ＞ Argon」から Argon の設定を開く。
（Visual Studio Code に Argon の拡張機能をインストールすると、Roblox Studio にも Argon のプラグインがインストールされる）
手順14
「1. General ＞ Initial Sync Priority」を「Client」に変更し、初回接続時にクライアント側（Roblox Studio 側）の状態が最新の状態として扱われるようにする。
手順15
Roblox Studio と Visual Studio Code の双方向で変更を同期し、コード以外にもオブジェクトのプロパティの値も同期したい場合は「3. Syncback」で「Two-Way Sync」と「Syncback Properties」にチェックを付けて「Only Code Mode」のチェックを外す。
（個人的には事故防止のため「2. Automation ＞ Auto Connect」のチェックを外して、Roblox Studio が Visual Studio Code に自動的に接続されないようにするのもオススメ ）
Roblox Studio と Visual Studio Code の接続
手順16
Visual Studio Code に戻って「Ctrl + Shift + P」でコマンドパレットを開き、「Argon: Open Menu ＞ Serve」を押してサーバーの起動を開始する。
手順17
「default.project.json」を押す。
手順18
「Generate sourcemap」のチェックを外して「OK」を押す。
（Visual Studio Code で Luau LSP を使用している場合はチェックを付けたまま「OK」を押した方が良い）
手順19
Roblox Studio に戻り、Argon の「Connect」を押して Visual Studio Code に接続する。
Visual Studio Code でコードがハイライトされるようにする
手順20
Visual Studio Code でコードがハイライトされない場合は Roblox LSP や StyLua 等の拡張機能を Visual Studio Code にインストールして Visual Studio Code を再起動する。
