vue-cli 3 の TypeScript環境で Prettier を使う

チーム開発する上で、コーディング規約は重要です。
linter や formatter などを用いてコーディング規約を実装するのが一般的かと思います。

本記事では vue-cli 3 環境での Prettier (code formatter) 実装について説明しています。
とは言っても設定内容を公開するだけですが。

Prettier 環境の準備

Prettier と webpack のプラグインをプロジェクトにインストールします。npmの代わりにyarnでも構いません。

$ npm i -D prettier prettier-webpack-plugin

vue.config.jsを編集

vue-cli 3 で作成したプロジェクトは、webpackの設定をvue.config.jsファイルに記載することができます。

Working with Webpack | Vue CLI 3

下記の記述を行うとbuild毎にPrettierが実行されます。

vue.config.js

const PrettierPlugin = require('prettier-webpack-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new PrettierPlugin({
        singleQuote: true,
        semi: false,
        tabWidth: 2,
        printWidth: 200
      })
    ]
  }
}

備考

Prettierが.vueと.tsに対応しているため、私はこれでTypeScriptで書いた.vueファイルをformatしています。

別途 linter は vue-cli 3 標準の tslint 設定を少しチューニングしたものを利用し、エディタでエラー表示するようにしています。

エディタの formatter 機能を使う手もありますが、チーム開発する場合、個々のエディタを指定するようなことはしたくないので、プロジェクトの方で設定できるのがいいですね。