アドオン開発のためにエディタ「VS Code」をインストールする

アドオンの開発には専用エディターが不可欠です。「メモ帳」での開発も不可能ではありませんが、あまりにも効率が悪いので、プログラミング用のエディターをインストールしましょう。

エディターには様々な種類がありますが、この記事では近年最も人気のある「VS Code (ヴィエスコード)」のインストールとその設定について解説します。

以降、このサイトでは、エディターとして「VS Code」を使用することを前提にします。

VS Codeとは何か

正式名称は「Visual (ヴィジュアル) Studio (スタジオ) Code (コード)」で、世界中のプロの開発者が使っている無料で使えるプログラミング用のエディターです。

YouTubeでプログラミング関係の動画を見ると、ほとんどの人がVS Codeを使っていることがわかります。もちろん筆者もプログラミングの仕事で使っています。

高機能でありながら、とても軽く操作性が良く、Microsoftが開発しているため、何かとMinecraftと相性が良いことも特徴です。 (Minecraftの開発元のMojangはMicrosoftの子会社)

主にプログラミング用途で使われていますが、純粋にテキストエディターとしても優れているので、これで小説を執筆している方もいるほどです。（この記事もVS Codeを使って執筆されています）

このエディター1つを使いこなせるようになっておけば、アドオン以外の他のプログラミング開発にも使いまわせるので、初心者の方はこのエディターを使えるようになっておきましょう。

Visual Studio Code(VS Code)のインストール

インストール自体は、次の公式サイトからインストーラーをダウンロードし、手順に沿って実行するだけです。

Visual Studio Code

表示を日本語に設定する

Japanese Language Pack for Visual Studio Code

VS Codeは初期状態では英語表示です。日本語設定は拡張機能として公式に用意されているのでこれをインストールします。

システムが日本語環境なら、VS Codeを最初に開いたとき、この日本語化の拡張機能をインストールするか聞かれるので、そのまま入れておきましょう。

邪魔になったら削除して英語に戻すこともできます。

自動でインストールされなかったら、手動で設定しましょう。

Ctrl + Shift + Xで拡張機能枠を開きます（または一番左の四角が4つあるアイコンをクリック）
検索欄に「japasese」と入れて検索します
「Japanese Language Pack for Visual Studio Code」という拡張機能をインストールします
これをインストールし、VS Codeを開き直すと日本語になっています

エディターの設定

設定しておくと便利な箇所をまとめておきます。以降の設定は、必須ではありません。わからなくなったら、設定をとばして先に進んでください。

設定ファイルの開き方

Ctrl + ,で設定欄を開くと、フォームから設定を変更できます。しかし、この場合は細かい設定の仕方が面倒なので（説明も面倒なので）、次の通り、設定ファイルを直接開いて編集します。

Ctrl + Shift + Pでコマンドパレットを開きます。入力欄にsettingsと入力すると、「基本設定：ユーザー設定を開く(JSON)」と表示されます。これを選択し、設定ファイル(settings.json)を開いてください。

こちらの方がコピペするだけで設定できるので簡単です。(JSON構造の理解が怪しい場合は無理に使わないでください)

プログラミング用のフォントを追加する

WindowsにしてもMacにしても、OSが標準で用意しているフォントはプログラミング用途に最適化されていないので、専用のフォントを使うようにしましょう。

例えば「ゼロとオー(0O)」や「アイ・エル・いち(Il1)」など似た形の文字の場合、一般的なフォントでは一瞬で見分けがつきませんが、プログラミング用のフォントではとてもわかりやすくなっています。そのため、間違いに気づきやすくなり、作業効率が向上します。

「プログラミング用　フォント」などで検索するといくつも出てくるので、好みのものを選びインストールしましょう。その際には日本語フォントが含まれているかだけ確認してください。一般的な開発では日本語の文章を書く機会も多いので、良い日本語フォントが入っているかも重要です。

「源ノ角ゴシック」の場合

筆者の場合は「源ノ角ゴシックCode(Source Han Code JP)」を使っています。よくわからない場合は、とりあえずこのフォントを使ってみてください。

源ノ角ゴシック

リンク先の右側の「Release」から最新版を選択。

「SourceHanCodeJP.ttc」をクリックしてダウンロード。

ダウンロードしたファイル(SourceHanCodeJP.ttc)をダブルクリックして、開いたウィンドウの指示に従ってフォントをインストールします。

インストールしたら、VS Codeの設定ファイルを更新しましょう。

{
  // ...
  // 自分でインストールしたフォント名を入力する
  // この場合は'Source Han Code JP'
  "editor.fontFamily": "'Source Han Code JP', Menlo, Monaco, 'Courier New', monospace",
  // ...
}

フォントを複数設定すると、左から優先的に使います。もしそのフォントに含まれていない場合は、その次のフォントから探すという意味ですが、特殊な文字を使わない限りは気にする必要はないでしょう。

ルーラー（定規）を設定する

エディター上に、その行の何文字目かの位置に縦線を引きます。これは、改行位置の目安として設定します。

一般的な文章とは異なり、プログラミングのコードは改行されると、途端に全体像が把握しづらくなります。そのため、適切な文字数以内で改行させることが推奨されています。

筆者の場合は、[80, 100, 120]の3つを指定しています。

{
  // ...
  "editor.rulers": [80, 100, 120],
  // ...
}

80文字以内:目標

かつてコマンドライン上で80文字制限があった時の名残が基準となっています。「Prettier」の初期値が80文字になっていることからもわかる通り、現在でも理想的な改行位置とされる場合が多いです。 80文字以内で改行できるほど、綺麗で簡潔なコードを目指してみましょう。

100文字以内:推奨

現在では80文字にこだわる必要は何もないので、短すぎると感じたら100文字以内などに伸ばしてください。実際に、上級者の書いたコードでも80文字以内で改行していない例がいくらでもあり、無理に短くする必要はありません。

120文字以内:上限

120文字を超える場合は、次のようにコードに何かしらの問題があると考えられます。

変数名が長すぎる
条件式が長すぎる
入れ子構造が何重にもなっている
...など

絶対に改行しないといけないわけではありませんが、コードを見直して調整することが推奨されます。

ファイルの末尾に改行を追加する

ファイルの最後を改行で終わらせるための設定です。また改行が複数ある場合は1つだけにします。

No Newline at End of Fileって何？どう対策するの？

{
  // ...
  "files.trimFinalNewlines": true,
  "files.insertFinalNewline": true,
  // ...
}

余分な余白を削除する

その行の最後に空白が入っていると自動で削除する設定です。

マークダウン(.md)の場合など、末尾の余白に意味がある場合は、拡張子別の設定で解除します。

{
  // ...
  "files.trimTrailingWhitespace": true,
  "[markdown]": {
    "files.trimTrailingWhitespace": false
  },
  // ...
}

対になるカッコを強調する

選択中の開きカッコがどの閉じカッコと対になっているかをわかりやすくしてくれます。初心者の方は、対になるカッコを見失いやすいので、特にオススメの設定です。

{
  // ...
  "editor.guides.bracketPairs": true,
  // ...
}

半角スペースをわかりやすくする

半角スペースを見やすくします。これがあることで何文字分の空白かを認識しやすくなります。

{
  // ...
  "editor.renderWhitespace": "all",
  // ...
}

拡張機能を追加する

VS Codeは「拡張機能」によって便利な機能を追加していくことができます。（最初に設定した日本語化も拡張機能です）

アドオン開発は基本機能だけで行うことができるので、拡張機能の追加は必須でありません。もし、下の説明で導入方法がわからなかったらとばしても構いません。

UUID Generator: UUIDをクリックだけで追加する

UUID Generatorで検索してインストールしてください。

アドオン開発ではUUIDを何度も追加・する必要が出てきますが、その度に専用の生成サイトを開くのは面倒です。

この拡張機能をインストールすると、右クリックで開いたメニューにGenerate UUID at cursorが追加されます。

これを使うと、カーソルが合わさっている箇所にUUIDを生成して追加してくれます。