当サイトはInternet Explorerに対応しておりません。より性能のよい、下記のようなブラウザを使ってみませんか?

IE in the grave
記事一覧に戻る

Prettierをサクッと使ってみる

絶賛シェア拡大中の人気コードフォーマッター「Prettier」に乗り換えてみました。

設定

下記の設定でできるようになること

  • エディタ上で、Prettierのルールに沿っていないコード部分に警告を表示
  • エディタ上で、必要に応じてコードを自動成形
  • yarn prettier コマンドで、特定フォルダ内の特定拡張子を持つファイルを一発で整形

手順

  1. 関連パッケージをインストール

    yarn add prettier eslint-config-prettier eslint-plugin-prettier
  2. 設定ファイルをルートフォルダに作成

    .eslintrc.yml (例)

    extends: prettier
    parser: babel-eslint
    rules:
      prettier/prettier: error
    plugins:
      - prettier

    .prettierrc.yml (例)

    trailingComma: all
    singleQuote: true
  3. お好みでnpm scriptを作成します。下記の例では、yarn prettierを実行したときに、srcフォルダ内の(js|jsx|ts|tsx|css)の拡張子を持つファイルを整形し、上書きします。

    "scripts": {
      "prettier": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css}\""
    },
  4. お好みでエディタの機能拡張をインストールします。私はVSCodeを使っているので、VSCode用の拡張機能をインストールしました。Ctrl + Shift + Pを押した後、Format Document(全体を成形)かFormat Code(選択範囲を成形)を選べばエディタ上で整形が行われます。

所感

Prettierはセットアップが簡単なので、特にこだわりがなければプロジェクトの最初から組み込んでおくのがよいと思います。

私は、Prettierに加え、Airbnb Style Guideを組み合わせて使うことにしました。一部の設定がAirbnbとPrettierでバッティングするので、下記のように.eslint.ymlのルールで調整しています。

.eslintrc.yml

extends: airbnb
parser: babel-eslint
rules:
  arrow-parens: 0
  function-paren-newline: 0
  linebreak-style: 0
  object-curly-newline: 0
  prettier/prettier: 2

plugins:
  - prettier

参考

profile

田村 翔太

Yuuniworks 代表。島根県浜田市を拠点に主にフロントエンド開発のお手伝いをしているフリーランスエンジニアです。React/Vue.jsを用いたSPAの開発や、NodeJSを使ったAPI開発を得意としています。

記事一覧に戻る