NodeCGでスポーツコーダ#3:環境構築(Prettierの設定)

概要

NodeCGを使ってスポーツコーダが作れるか検証していきます。
今回はコード整形ツール"Prettier"をインストールして設定を行います。
なお、文章が冗長にならないようにコマンドによる実行手順は使わないので省略しています

Prettierとは

Prettierは、コードを自動でフォーマット（整形）してくれるコードフォーマッターです。インデントや改行、スペースなどのスタイルを統一し、コードを見やすく整えるのに使われます。
Javascriptの場合、"セミコロンが必要か?", "文字列はシングルクォーテーションかダブルクォーテーションか?", "タブ文字は2文字か4文字か?"など、人によってコードの書き方が異なります。
コードフォーマッターを使うことで、誰がコードを書いても設定値に基づき自動的に整形してくれます。
なお、Prettierはプロジェクトごとに設定可能です。プロジェクトで異なるルールでもそれぞれに適した整形をしてくれるので安心です。

Prettierのインストール方法と設定

NodeCGにPrettierを導入するにはnpmパッケージをインストールして、設定ファイルを作成します

プロジェクトにPrettierをインストール

VSCodeのターミナルからルートフォルダに移動してPrettierを開発環境のみ使用でインストールする

npm install -D prettier

Prettierのルールを設定(.prettierrcの作成)

Prettierで整形するルールは.prettierrcというファイルに記述します。
ここでは最低限の設定を紹介します。

1. ルートフォルダ(nodecg直下)に.prettierrcファイルを作成する
2. .prettierrcを次のように編集する(自身の環境に変更してください)

    {
      "printWidth": 120,
      "tabWidth": 2,
      "singleQuote": true,
      "semi": false
    }
   

   設定名	設定値	説明
   printWidth	120	1行あたりの文字数を120文字までにする。超えると改行する
   tabWidth	2	Tabキーを押したときのインデントを2文字にする
   singleQuote	true	文字列を囲むときははシングルクォーテーションに変換する
   semi	false	文末のセミコロンを削除する

VSCodeプラグインの追加

Prettierを使って整形するときはターミナルからコマンドを実行しますが、VSCodeでは拡張機能を追加することで保存時に自動で整形できます。

VSCode拡張機能:Prettierのインストール

VSCodeの拡張機能画面で"prettier"で検索を行い、Prettier - Code formatter をインストールする。設定変更は不要です

VSCode保存時にPrettierで自動整形するように設定する

保存時にPrettierで自動整形するには、VSCodeの設定ファイルを編集します

1. VSCoceのメニューバー[表示]->[コマンドパレット]の順に押下する
2. 検索バーに"settings.json"と入力して、"基本設定:ユーザー設定を開く(JSON)"を押下する
3. JSONに"editor.formatOnSave": trueを追加する

   {
       ...
       editor.formatOnSave": true,  // Add
       ...
   }
   

Prettierによるコード整形の実行

保存時に自動的にコード整形が実行されます。ダミーファイルを作り確認してください。

留意点や感想など

• プロジェクトに.prettierrcがない状態でVSCodeのPrettierを使うとエラーになることがあります
• 私はコーディング時に文字列はダブルクォーテーションで囲みますが、Prettierでシングルクォーテーションに変換されます。だからといってシングルクォーテーションで書くことはあまりありません。理由はシングルクォーテーションはキーボードの位置が打ちにくい場所にあるからです。