Zenn
🤖

Prettierってなんだ

2022/05/19に公開
JavaScript
Node.js
環境構築
Prettier
tech

今回の内容

いつもLinuxの環境構築などでお世話になってるここのサイトから今日はPrettierについて( ･ω･ )/

Prettierってなんぞ

Prettierとは
  • ソースコードを自動で整形してくれるツール
  • セミコロンをつけるかつけないか、一行は何文字までか、etc...
  • コードのスタイルに一貫性を保てる

あれ？ESLintとの違い何...？( ´•д•`; )
って思ったの私だけじゃないですよね？ね？汗

ESLintとの違い

ESLint vs Prettier

上の表から分かるように、

  • Prettierはコードの整形に重点を置いている
  • ESLintは構文チェックをしてくれる
    が主な役割なのかな？( •̀ᴗ•́ 人)

ESLint = 構文チェック

Prettier = コードの整形

使ってみる

ディレクトリの作成、Node.jsの初期化
mkdir envader-prettier-test #ディレクトリ作成
cd envader-prettier-test # ディレクトリへ移動
npm init -y # 初期化

★npmはNode.jsインストール時に一緒にインストールされる

Prettierのインストール
npm install prettier --save-dev --save-exact

☆ --save-exactはpackge.jsonの依存関係として、バージョンを明確化することができ、複数人開発時でもコードフォーマットの結果を一致させることが可能

"devDependencies": {
    "prettier": "2.5.1"
  }

--save-exactをオプションにつけたことにより、バージョンの2.5.1の前の「^（キャレット）」がなくなった。
キャレット　＝ 「2.x」の「x」の部分が一致していればどのバージョンでも良し、な設定

コマンド設定

フォーマットを実行するためにpackage.jsonのscriptsに設定を追加

"scripts": {
    "format": "prettier --write 'src/**/*.js'"
},
フォーマットの実行
npm run format

以上、Prettierについてでした( ⁎ᵕᴗᵕ⁎ )❤︎

実際にターミナル操作をやってみたいな〜という方はここのサイトで実際にやってみるのがいいかと( •̀ω•́ )/
実際に仮想環境でコマンドをじゃんじゃん叩けるのでパソコンが壊れる心配がなくて良き★
コース全体はこんな感じ

Discussion