アジェンダ
Prettierを導入し、適用する手順を以下にまとめました。
これにより、コードフォーマットを統一し、コーディングスタイルを維持することができます。
Prettierの導入手順
1. プロジェクトのルートディレクトリで、Prettierをインストール
まず、Prettierをインストールします。プロジェクトのルートディレクトリで以下のコマンドを実行してください。
npm i -D prettier
2. スクリプトをpackage.json に追加
package.json ファイルにPrettierを実行するスクリプトを追加します。
{
"scripts": {
"format": "prettier --write ."
}
}
これにより、npm run format コマンドでプロジェクト全体のコードをフォーマットできるようになります。
3. Prettierの設定ファイルを作成
プロジェクトのルートディレクトリに .prettierrc というファイルを作成し、以下の内容を追加します。
{
"bracketSpacing": true,
"semi": true,
"singleQuote": true,
"useTabs": false
}
この設定は以下を意味します：
-
bracketSpacing: true: オブジェクトリテラルの括弧内にスペースを入れる ({ foo: bar })。 -
semi: true: ステートメントの最後にセミコロンを付ける。 -
singleQuote: true: 文字列リテラルにシングルクォートを使用する。 -
useTabs: false: インデントにタブではなくスペースを使用する。
4. .prettierignore ファイルを作成
プロジェクトのルートディレクトリに .prettierignore というファイルを作成し、フォーマットの対象外にしたいファイルやディレクトリを指定します。例えば、以下のように設定します。
node_modules
build
dist
5. フォーマットの実行
設定が完了したら、プロジェクトのルートディレクトリで以下のコマンドを実行することで、npm run format を使ってプロジェクト全体のコードをフォーマットできます
npm run format
オプション: エディタの設定
VSCodeなどのエディタを使用している場合、保存時に自動でPrettierが実行されるように設定できます。settings.json ファイルに以下を追加します。
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
まとめ
これで、Prettierを導入し、指定された設定をプロジェクトに適用することができます。エディタの設定を行うことで、保存時に自動的にコードがフォーマットされるため、コーディングの効率が向上します。