Zenn
🎾

Racket: Visual Studio Codeで快適なRacket開発環境を構築する

2024/05/04に公開
VS Code
#
開発環境
#
環境構築
Visual Studio Code
#
racket
tech

はじめに

この記事では、VS Code (Visual Studio Code) を使用して、Racketの開発環境を最適化する方法を解説します。
Racket専用プロファイルを設定し、タブ補完やコードフォーマットなど、開発効率を高める機能を導入します。

Racket で関数型プログラミングを学び、プログラマーとしてのスキルを向上させましょう。

1. 前提条件

1.1 Racketのセットアップ

Racket がすでにインストールされていることを前提としています。
Racket インストールがまだの場合は、Racket のセットアップに関する以下の記事を参照してください。

1.2 VS Code設定

VS Code にprogramming プロファイルが設定されていることを前提としています。
この設定がまだの場合は、以下のリンクからVS Codeでのプログラミング環境の設定方法を確認してください。

2. Racket拡張機能のインストール

2.1 Racket LSP設定

Racket用のコード補完機能、エラーチェック機能を実現するために、LSP (Language Server Protocol)を利用します。
Racket側では、Racket用 LSPサーバ racket-langserver をセットアップします。

次の手順で、racket-langserver をインストールし、動作チェックします:

  1. racket-langserverのインストール
    次のコマンドを実行し、racket-langserverをインストールする。

    raco pkg install --auto --scope installation racket-langserver

  2. racket-langserverの起動
    動作チェックのため、racket-langserverを起動する。

    racket --lib racket-langserver

  3. racket-langserverの動作チェック
    適当なコマンドを入力し、エラーが出力されるかチェックする。

    content-length: 5

hello
[EOF][EOF] ← Ctrl+D(WSL)/Ctrl+Z(Windows)でEOFを入力

  4. エラーチェック
    エラーメッセージが出力されるかをチェックする。

    Unexpected EOF

2.2 fmtインストール手順

Racket用のコードフォーマッタ fmt をインストールします。

次のコマンドで、fmt をインストールします:

raco pkg install --auto --scope installation fmt

fmtを使用するには、つぎのようにソースコードファイルを指定します:

raco fmt helloworld.rkt

fmtは、フォーマットされたコードを標準出力に出力します。

helloworld.rkt
#lang racket

(display '("Hello," "my first racket!"))
(newline)

3. VS Code環境設定詳細

3.1 プロファイル作成

Racket専用のプロファイル racket-programming を VS Code に設定します。

次の手順で、プロファイルを作成します:

  1. [プロファイルの作成]を開く
    [⚙ (歯車の記号)]-[プロファイル]-[プロファイルの作成]を選択し、[プロファイルの作成]ダイアログを開きます。
    create-profile menu

  2. プロファイルを作成する
    プロファイル名を racket-programming として入力し、[コピー元]に programming を選んで、[作成]をクリックします。
    create-profile create profile

3.2 VS Code拡張機能インストール

次の手順で、Racket用の拡張機能をインストールします:

  1. 拡張機能画面を開く
    アクティビティバーの拡張機能アイコンをクリックし、拡張機能画面を開きます。
    拡張機能マーケットプレイス

  2. Magic Racketをインストール
    検索ウィンドウに Magic Racket と入力し、表示された Magic Racket をインストールします。

  3. racket-fmtをインストール
    検索ウィンドウに racket-fmt と入力し、表示された racket-fmt をインストールします。

以上で、`コード補完、エラー検出、コードフォーマットなどの機能が利用できます。

3.3 Code Runner設定

拡張機能Code Runnerに、Racketプログラミング実行用の設定を追加します。

次の手順で、設定を追加します:

  1. ユーザー用設定ファイルを開く
    [Ctrl+Shift+P]→open user settingsとして、ユーザー用のsettings.jsonファイルを開きます。

  2. Executor Mapを追加
    settings.jsonファイルに、次のようにexecutorMapを追加します。

settings.json
"code-runner.executorMap": {
  "racket": "cd $dir && racket $fileName",
}

4. 追加設定ファイル

4.1 editorconfig設定

Racketコードの書式設定に、editorconfig を使用します。
VS Code は、Editorconfig拡張機能により、editorconfig の設定を適用します。

次のように、.editorconfigを設定します:

おわりに

以上で、VS CodeにRacket用のプロファイルが設定できました。
れにより、Racketソースファイルでのプログラミングがスムーズに行えます。

より実践的なプログラミング体験を通じて、関数型プログラミングのスキルを向上させましょう。

それでは、Happy Hacking!

技術用語と注釈

  • Racket:
    教育や研究、実用的なアプリケーション開発で使用される関数型プログラミング言語

  • VS Code (Visual Studio Code):
    多様なプログラミング言語を拡張機能によってサポートした、Microsoft製のソースコードエディタ

  • LSP (Language Server Protocol):
    エディタと通信して、コード補完、エラー検出、コードフォーマット機能などを提供するプロトコル

  • racket-langserver:
    Racket用にパッケージとして提供され、Racketのコード補完機能などを提供する LSP の実装

  • fmt:
    Racket用に提供されるコードフォーマッタ

  • Code Runner:
    VS Code において、様座なプログラミング言語を直接実行する機能を提供するVS Code格調機能

  • editorconfig:
    エディタ、IDE でコードの統一した書式設定で適用するための設定ファイル

参考資料

Webサイト

GitHubで編集を提案

Discussion