⌨

インフラエンジニアに捧ぐ！フォーマッターのススメ VSCode編

2023/11/01に公開

VS Code

Linter / Formatter に初めて触れたインフラエンジニアが自身の周りの考察も含め、VSCode の設定をご紹介します！

はじめに

この記事では VSCode に Formatter を導入します。ただし Linter と明確に区別しているわけではありません。両方の機能を併せ持つツールも多くあります。

Linter とは

文法誤りや推奨されない書き方をチェックするツールです。

Formatter とは

スペースや改行など、コードのスタイルを修正するツールです。

インフラエンジニアの環境考察

私は Next.js に入門し、初めて Linter / Formatter に触れました。
Ctrl + S するだけで適切にコードがフォーマットされる経験は、とにかく強烈でした。
「この気持ち良さをいろんな人に味わってほしい！」と思いました。

一方で周りのエンジニアが Linter / Formatter を使っているところをほとんど見かけません。
「せっかく便利なものがあるのに…」と思いこの理由について考えてみました。

設定が面倒くさい

かなりの割合を占めると思われます。「別に設定しなくても困らない」という状況。
設定さえしてしまえば今後の開発にずっと効いてくるので、一度やってみましょう！

貸与 PC がすぐ変わる

設定が面倒くさい、の亜種です。半年ごとに案件（お客様）が変わり、貸与 PC や各種アカウントが毎度まっさらになるようなケース。SIer あるあるかもしれません。
VSCode にサインインすれば設定を引き継げますし、「客先アカウントだから無理！」という場合も設定ファイルをコピーするなど対策があります。

VCS を使っていない

VCS (Version Control System; Git, SVN など) を使っていないケース。
Excel 設計書の巨大なセルやテキストボックスにコードが貼ってある、またはコードをサーバーの実ファイルで直接編集するなど。
コードがあまり見られることがないために、Formatter の出番がないということです。
チームで VCS の導入をおすすめしますが、自身のコーディングだけでもスタイルへの意識配分をしなくて済むため Formatter を導入しましょう！

Excel
Excel による管理例（見たくない！）

チームでコードを見ない

VCS を使っていない、の亜種です。コードを見る人がいないので必要ないというケース。
設計書は OK でも、コードが OK とは限らないはずです。
チームでコードをチェックする習慣を少しずつ作ることをおすすめします。
コードを見れる人がいないとよく聞きますが、いないなりに人を育てていく必要があります。

コードを書かない

そもそもコードを書かないから必要ないというケース。書くのは使い切りのシェルスクリプトだけ、という人もいるかも。
最近は IaC が広まりつつあり、Terraform や CDK で構築する機会が増えています。
クラウドでなくても Ansible による構成管理や Python による運用自動化などにも活かせます。
ぜひコードを書いて、現場のトイルを撲滅していきましょう！

Linter / Formatter を知らない

知らないものは導入できません。ですが、コード（もしくは Word 文書など）を書いていて波線で注意されたことはあるのではないでしょうか。
自動で修正できるものは、自動で直すべきです。この記事を読んだ皆さんは導入しましょう！

自由にソフトをインストールできない

悲しいことに、こうした現場は多々あります。まずオンボーディング時にインストール申請や設定が漏れないよう、チームで手順化を行いましょう。
できれば制度の再考や自由に導入してもよいソフトにできないか、お客様や情報システム部に掛け合ってみましょう。

インターネット接続がない

インターネットに繋げられない、もしくはソフトのインストール許可がおりないケースです。
このような環境でコーディングさせるのは、もはや拷問と言っても過言ではないでしょう。
こちらもお客様や情報システム部と会話したことがなければ、まず相談しましょう。
最終手段は異動もしくは転職になりますが…

設定

VSCode で Formatter を有効化する設定です。

設定方針

デフォルトの Formatter を Prettier に
Prettier 非対応の言語は個別設定
Formatter は常に動作を ON に

Prettier は多くの言語に対応した Formatter です。フロントエンドのファイルを中心に動作するため、インフラエンジニアが使用する言語には対応していない場合があります。
今回は Terraform の利用を想定して追加設定します。その他言語も同様の手順で設定可能です。

https://prettier.io/

拡張機能インストール

左ペインの「拡張機能」から Prettier と Terraform を検索し、インストールしてください。

Prettier
Terraform

設定ファイル編集

左上のメニューから「ファイル」＞「ユーザー設定」＞「設定」を開きます。
左下の歯車アイコンから「設定」でも開けます。
その後、右上の「設定(JSON)を開く」をクリックし、以下設定を記載します。

settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "[terraform]": {
    "editor.defaultFormatter": "hashicorp.terraform"
  }
}

使用例

Terraform

保存をするだけで、綺麗にフォーマットされています！

terraform-fmt

JavaScript

Prettier と ESLint を組み合わせると強力です。
詳細は割愛しますが、セミコロンの有無、クォーテーションの種類統一、末尾カンマ付与など様々な修正が自動で可能です！

js-fmt

まとめ

Linter / Formatter を使うと、コード作成・修正・コピペ等の際にインデント等のスタイルを意識する必要がなくなります。
また、レビューする・される際の不毛なスタイル議論・やりとりも減らすことができ、良いことづくめです。
インフラエンジニアの皆さん、ぜひ、今日から導入してみませんか？

GitHubで編集を提案