フロントエンドやるなら入れておくべきPrettierってなに？

プログラミング勉強日記

2020年11月27日
TwitterでフロントエンドやっててPrettierを入れてない人はいないというツイートを見かけて、Prettierってなんだ？って思ったので調べてみた。

Prettierとは

　Prettier(読み方：「プリティア」)はソースコードを綺麗にしてくれるコードフォーマッターである。
　特に複数人で開発を行っているときに、各自が自由にコードを書いてしまうと、書き方が様々で読みにくくなってしまう。統一されていないコードはメンテナンス性も悪くなり、ミスの原因となる。そこで、コードフォーマッターを利用すると、自動的に決められたコードスタイルにしてくれるので、コードスタイルを意識することなくコーディングすることができる。

Prettierのメリット

　コードフォーマッターはWebStormやVisual Studio CodeといったWeb制作のエディタに付属しているが、これらはユーザ環境に依存するので、開発者によってエディタが違うとコードフォーマットを統一することは難しくなる。PrettierはNode.js上で動作するのでユーザー環境に依存することなく、コードフォーマットを統一できる。

　また、PrettierはJavaScriptだけでなくWebの様々な言語にも対応する。(JSX, Flow, TypeScript, HTML, YAML, CSS, Less. SCSS, JSON, GraphQL, Markdown, styled-components, styled-jsx, Vue, Angular)

導入方法

0. Node.jsをインストールしてコマンドラインを起動する

　これからNode.jsをインストールする。
　Windowsではコマンドプロンプトを起動して、作成したアプリまで移動する。

1. Prettier本体をインストールする

　Prettierを実行するために、以下のコマンドを入力してインストールする

npm install -D prettier

3. package.jsonに追記する

package.json

{
  "scripts": {
    "format": "prettier --write 'src/**/*.js'"
  },
  "devDependencies": {
    "prettier": "^1.10.2"
  }
}

4. コマンドを実行してコードを整形する

npm run format

参考文献

Prettierの導入方法
フロントエンド開発で必須のコード整形ツール
Prettierの使い方解説。フロントエンドで必須のコード整形ツールで、プログラミング学習の効率も上がります。