Prettierを開発環境に組み込む

アバター画像 hosoda

5

こんにちは。細田です。
今回は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のみにしました。
参考

アバター画像

ぽちっとおうえん!

シェア

  • Facebook
  • LINE
  • X
SVGとCSSで作る手書き風テキストアニメ【後編】 WPで画像をアップロードしたときにWebpを作成する方法