こんにちは。細田です。
今回はPrettierを開発環境に組み込む方法をやっていきたいと思います。
Prettierとは？
Prettier は JavaScript で書かれたコードフォーマッタです。
JavaScript、React、HTML、CSSなどに対応していて、幅広くサポートしてくれます。
Prettier本体をインストールする
最初にnpmを使って本体をインストールします。
npm i -D prettier以下の画面のようになれば成功です。
package.jsonの設定をする
次にインストールしたpackage.jsonを設定します。
dist配下を対象にする場合は以下のように設定します。
{
“devDependencies”: {
“prettier”: “^3.2.5”
},
“scripts”: {
“format”: “prettier –write ./dist”
}
}
実行する
以上で準備は完了できましたので、コマンドで実装します。
npm run format
以上で簡単ですが、終わりです。
おわりに
Prettierは以前から知っていたもののなかなか導入する機会がなく、最小限の設定のみですが、ようやく導入できました。
distは以下のcssとjsのみ対象にしようと思ったんですが、何故か上手くいかず今回はdist全体を対象にしました。
本当はESLintも導入したかったんですが、こちらも時間かかりそうなのでPrettierのみにしました。
参考
