prettierで始める自動コード整形

旅するエンジニアの三宅です。前回の週末は和歌山へ行ってました。

さて、今回は開発ネタということでJavaScriptのコードを自動整形する方法について紹介したいと思います。

お品書き

複数人で開発を行っていると人によってコードスタイルに癖があり、コードの統一性が取れなくなってきます。

実際に動くときには関係ないのですが、やはり実際にコードを書く時に読みづらいコードというのはメンテナンスもやりにくいです。

ただ、こういったことは人の手に任せていると何時まで経っても改善できないので、機械に矯正してもらうことにします。

今回紹介するのはprettierというツールです。

さっそくインストールしてみましょう。今回の内容は全てバージョン1.7.0を前提に話を進めます。

npm install --save-dev prettier

TimeCrowdではReactを利用しているのでサンプルのjsxファイルを整形してみたいと思います。

修正前

import React, { Component } from "react";

export default class Sample extends Component {
  render() {
    return Sample;
  }
}

コマンド実行

./node_modules/prettier/bin/prettier.js --single-quote --trailing-comma es5 --no-semi --write src/components/Sample.jsx

修正後

import React, { Component } from 'react'

export default class Sample extends Component {
  render() {
    return Sample
  }
}

見事に整形されていますね！

オプションの内容はREADMEのOptionsを参照して下さい。

今回はvimを利用してみたいと思います。私が使用しているvimはバージョン8.0.55でした。

まずaleというプラグインをインストールします。

以前までneomakeというプラグインを使っていたのですが、VimでESLintとFlowを使うためにNeomakeからALEに乗り換えるという記事でaleを知って今回の記事を機会に乗り換えてみました。

NeoBundle 'w0rp/ale'

そして.vimrcに以下のように設定します。

let g:ale_fixers = {
      \ 'javascript': ['prettier']
      \ }
let g:ale_fix_on_save = 1
let g:ale_javascript_prettier_use_local_config = 1

これでvimでファイルを保存した時に自動で整形処理が行われるようになります。

各種設定項目の意味はこちら。

その他の設定についてはaleのリポジトリ内にあるドキュメントを参考にして下さい。

今回はコード整形の自動化行うことで属人的なコードスタイルを廃止することができるようになりました。

あとは整形ルールを調教していけば、プロジェクトで統一されたルールの元開発を進めることができるようになります。

TimeCrowdではプログラマーの美徳である「怠惰」「短気」「傲慢」を備えていて、なんでも効率化してくれるエンジニアを募集しています！

Personer, som lider meget af til site bindingsaffinitet. That dont come Sildenafil in form of viagra piller online the heart.