はじめに
この記事は 岩手県立大学 Advent Calendar 2022 の 19 日目のものです。
現在、岩手県立大学の修士2年なんですけど、Web フロント好きな現役県大生ってどのくらいいるんでしょうか… 🤔
大学内で Web フロント好きな人が少しでも増えればいいなと思いつつ、記事を書きます。
（ちなみに今日誕生日です！！誕生日おめでとう！！自分！！）
この記事を読んで知れること
Prettier を使って、綺麗なコードをいい感じに保つ方法。
（追記）一応、参考リポジトリも貼っておきます。
この記事では知れないこと
ESLint、StyleLint などのリンターと Prettier を共存する環境を実現する方法。
Prettier とは？
Prettier とは、コードを整形してくれるフォーマッターの一つです。
対応形式は以下の通り。
- JavaScript (including experimental features)
- JSX
- Angular
- Vue
- Flow
- TypeScript
- CSS, Less, and SCSS
- HTML
- Ember/Handlebars
- JSON
- GraphQL
- Markdown, including GFM and MDX
- YAML
コードフォーマット機能自体は、普通にエディタとか IDE にも搭載されている場合が多いと思います。
これを使うと何が嬉しいの？
コードフォーマッターを使うことの大きな理由は、コードに一貫性が生まれること が挙げられます。
例えば、JavaScript では、「"」と「'」のどっちを使うのが良いのか問題。大体は「あなたの好みでいいよ！！」となるケースが多い印象ですが、これをどちらかに統一することができるようになります。これによって、一貫性が生まれ読みやすいコードになっていきます。
とりあえず導入してみる
今回は適当に、React（TypeScript）の環境に Prettier を導入してみたいと思います。
（今回は npm を使っていますが、yarn などを使いたい場合は適宜置き換えてください）
npx create-react-app prettier-tutorial --template typescript
cd prettier-tutorial
一部省略していますが、下記のようなファイルが生成されるはず。
├── README.md
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── src
│ ├── App.css
│ ├── App.test.tsx
│ ├── App.tsx
│ ├── index.css
│ ├── index.tsx
│ ├── logo.svg
│ ├── react-app-env.d.ts
│ ├── reportWebVitals.ts
│ └── setupTests.ts
└── tsconfig.json
ここから実際に、Prettier を導入していきます。
npm install --save-dev --save-exact prettier
これで Prettier の導入は完了です 🙆🏻
実際に Prettier を使ってみる
実行コマンドは以下のとおりです。
# 指定したファイルをフォーマットする場合
prettier src/App.tsx --write
# src 直下のファイルをフォーマットする場合
prettier './src/**/*.{js,jsx,ts,tsx,json}' --write
これで、コードをフォーマットすることができます！
また、npm-scripts で実行できるようにしておくと便利になります 👀
{
...
"scripts": {
...
"prettier": "prettier './src/**/*.{js,jsx,ts,tsx,json}' --write"
},
...
}
こうすることで、npm run prettier でコード整形が行えるようになります。
保存のたびに自動でコードを整形してくれるようにする
JetBrains 系では、保存を行うたびに、自動で Prettier が実行されるようにすることもできます！
（WebStorm、RubyMine、IntelliJ IDEA Ultimate あたりが対応しています。）
Preferences > Languages&Framworks > JavaScript > Prettier
（左上の検索バーで Prettier と検索したほうが早いかも）
On 'Reformat Code' action と On Save にチェックを入れれば完了です。
これで、保存するたびに Prettier が実行さえ、コードフォーマットが行われます。
VSCode も同じような設定が行えるみたいです。
https://zenn.dev/k_kazukiiiiii/articles/670ebae0005872
コミット時にコードを整形してくれるようにする
また、コミット時に Prettier を実行することも可能です。
Husky をインストールします。
npx husky-init && npm install
上記のコマンド実行後、.husky/pre-commit を更新します
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
- npm test
+ npm run prettier
すると、コミット時に Prettier が実行されるようになります！
import の順番を自動で並び替えるようにする
最後に、Prettier を使ってコード内の import を並び替える方法を説明します。
まずは、該当のライブラリをインストールします。
npm install --save-dev @trivago/prettier-plugin-sort-imports
その後、.prettierrc を作成し、以下の内容を明記します。
{
"importOrder": ["^@foo/(.*)$", "^[./]"],
"importOrderSeparation": true
}
すると、自動で import 順をソートしてくれるようになります！
おわりに
今回は Prettier を使ってコードをきれいに保ちつつ、開発を行う方法について書かせていただきました！
普段から Web 系に触れられている方々は既に周知の内容だったかも知れませんが、学部生などが Web 系の技術に興味を持ってくれるきっかけになってくれればと思います！