reactのコードの整形を自分でしてるの？！ 面倒なコード整形を自動化したいあなたのためのprettier入門

動機

割愛

prettierとは？

割愛

早速使ってみよう！！

###prettierのinstall

yarn add prettier
  or
npm install prettier

これでprettierのコマンドが使えるようになります！！
（もしかしたら、パスを通す必要があるかも。下記のprettierのコマンドでエラーが出たら、この記事にコメント！！）

prettierの実行

prettier [opts] [filename ...]

とすると、ファイルを整形してくれたり、整形できてないところのチェックをしてくれます！

exaple

prettier --wire App.js
→App.jsファイルを自動整形してくれます！
prettier --check App.js
→App.jsファイルでおかしなコードがあるところを教えてくれます！

prettier --wire App.jsの例文 \の箇所が変わっています！！ インデントが７個くらいあるとこを２個に変更してくれました！！（めちゃ嬉しい）

App.js

import React from "react";
import Test from "./components/Test";
import SimpleSlider from "./components/SimpleSlider";
import "./App.css";

function App() {
  return (
    // この配下にrootコンポーネントを書いていく
            <SimpleSlider />
  );
}

export default App;

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

import React from "react";
import Test from "./components/Test";
import SimpleSlider from "./components/SimpleSlider";
import "./App.css";

function App() {
  return (
    // この配下にrootコンポーネントを書いていく
    <SimpleSlider />
  );
}

export default App;

けどさ、毎回prettierコマンド打つのだるくない？yarnでやってるんやけ、yarnコマンド使いたくない？？

はい。yarn devやyarn start等のコマンドを皆さんも打ってますよね？
そっちの方がスタイリッシュで格好よくないですか？
yarnコマンドの設定に関しては、package.jsonのscriptsの箇所の役割です！
このセクションでは、package.jsonを少し見てみましょう！！

"yarn run fmt"でprettierの自動整形を行う

まずは、Qiitaの記事を参考にして、上記のコマンドでprettierを使えるようにしましょう！！
何事も小さいところから少しずつ試すことが大事です。

ブリボンのreact練習ディレクトリ

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "fmt": "prettier --write \"src/App.js\""  →→→ ここのところがprettierのコマンドのところ！！
  },

scriptsの"fmt"の箇所を上記のようにします！
すると、App.jsファイルのみ、prettierで自動成形されます！！

ブリボンあほか？App.jsファイルだけ整形しても意味ないやん

はい。すみません。
全ファイルを自動整形しないと意味ないですよね。。
下記のようにscriptsの箇所を変更ください。

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "fmt": "prettier --write \"src/**/*.js\""
  },

さらなる高みへ！VSCodeでsave時にprettierを走らせる！

やることは二つです。
一つ目はプラグインでPrettier Pluginのインストール
二つ目はVSCodeのsettings.jsonで下記のコマンドを追加

 "editor.formatOnSave": true

あとがき

ブリボンは、タスクで初めて使うパッケージを導入する時、自分のローカル環境を使います。
practice-reactというプロジェクトを立ち上げて、そこにパッケージをインストールして遊んでいます。
今回のprettierも例外ではなく、自分のローカルを爆速で開発できるようにすること、prettierのお勉強をすること、以上2点の目的により、ローカル環境をいじってみました！！

随時変更・追加していきます！！
（6/9日曜に作成）
（6/9日曜に修正）

参考文献

公式ドキュメント
Qiita記事１（prettierをyarn run コマンドでできる箇所の参考）