Dev ContainerにPrettierを設定して自動コード整形をデフォルト有効にする

Dev Containerの気に入っている点の1つとして、VSCodeの設定をバージョン管理に含めることができ、プロジェクト全体で同じ設定・ルールを共有できる点があります。

今回は、あるRailsプロジェクトにおいて、VSCode/Codespacesでファイルを保存する際に、自動でPrettier Formattingを行う方法と、その設定を自動化する方法について紹介します。

Prettier

https://prettier.io/

今回対象とするファイル

• ruby
• javascript
• json
• css

プロジェクトでRubyが不要なら読み飛ばしてください。その他必要なプラグインがあればお好きな物を追加できます。

前提

• Dev Container の設定ができていること
• Dev Container で Ruby および Node.js が利用できること

https://zenn.dev/takeyuweb/articles/fb18d3fb54d369

設定手順

Prettierのインストール

$ npm install --save-dev --save-exact prettier

お好みでFormatterの設定ファイルを作成しておきます。

.prettierrc.json

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 120,
  "tabWidth": 2,
  "endOfLine": "lf"
}

prettier-ruby

PrettierでRubyのコード整形を行うために、@prettier/plugin-rubyをインストールします。

$ npm install --save-dev prettier @prettier/plugin-ruby

prettier-rubyを実行するためには、いくつかのgemのインストールも必要です。（ドキュメントに記載があります）

Gemfile

group :development do
  # Prettier for Ruby [https://github.com/prettier/plugin-ruby]
  gem 'prettier_print'
  gem 'syntax_tree'
  gem 'syntax_tree-haml'
  gem 'syntax_tree-rbs'
end

$ bundle install

stylelint-prettier

今回CSSのFormattingも行いたかったので、stylelint-prettierもインストールしました。

$ npm install --save-dev stylelint-prettier stylelint-config-prettier

Stylelintの設定ファイルを作成します。

.stylelintrc.json

{
  "extends": ["stylelint-prettier/recommended"],
  "plugins": ["stylelint-prettier"],
  "rules": {
    "prettier/prettier": true
  },
  "ignoreFiles": ["**/node_modules/**"]
}

Prettierの実行

以上で今回利用したいPrettierプラグインのインストールができました。
試しにターミナルで実行してみると、コード整形されることを確認できます。

$ npx prettier --write .
.devcontainer/devcontainer.json 53ms
.devcontainer/docker-compose.yml 40ms
.prettierrc.json 4ms
.stylelintrc.json 6ms
app/assets/config/manifest.js 12ms
app/assets/stylesheets/application.css 39ms
# (省略)

自動Prettier Formattingの設定

devcontainer.json に次の設定を追加します。

• "extensions": Dev ContainerにインストールするVSCode拡張機能
  • 今回は prettier-vscode 拡張をインストール
• "settings": VSCode設定。
  • タブサイズをRailsプロジェクトでよく使われる 2
  • 保存時のコード整形を有効
  • Ruby, JavaScript, JSON, CSS で prettier を使う
• "postCreateCommand:" コンテナ作成後最後に実行するコマンド。（後述）

.devcontainer/devcontainer.json

{
  "extensions": ["esbenp.prettier-vscode"],
  "settings": {
    "editor.tabSize": 2,
    "editor.formatOnSave": true,
    "[ruby]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
  },
  "postCreateCommand": "bash .devcontainer/post-create.sh"
}

今回、自動で prettiter などのインストールを行えるように、 postCreateCommand を設定しました。
https://containers.dev/implementors/json_reference/

ここで指定したコマンドは、Dev Containerを作成したとき最後に実行されます。内容は以下の通りです。

.devcontainer/post-create.sh

#!/bin/bash
set -xe

bundle install
npm install

devcontainer.jsonを変更したらコンテナを再構築する

Dev Containerの設定ファイルを変更したら、コンテナの再構築が必要です。
左下の >< をクリックし、 Rebuild Container を実行しましょう。

動作サンプル

↓GitHub Codespacesやお使いのVSCodeで試せるサンプルプロジェクト
https://github.com/takeyuweb/my_app

※Codespacesでプロジェクトが開いてから、コンテナの作成終了処理実行までに少し時間がかかることがあります。

まとめ

開発者個別に設定せずとも自動整形を行えるようにすることで、プロジェクトで一貫したコーディング規約をかんたんに強制することができました。（加えてCIでもPrettierのチェックを実施することでより強固になります）

今回設定した自動整形のほか、プロジェクト固有のエディタの設定はDev Containerに含めておくことで、環境構築時の設定の手間を省き、格段に楽になります。

是非活用してみてください。