vue.js
ESLint
prettier

ESLintからPrettierメインの環境構築に変更した話

PrettierとESLintについて

Prettierはフォーマッターで、ESLintは構文チェックとフォーマットチェッカーです。Prettierはコード成型に特化しているのに対して、ESLintは使われていない変数のチェックなども行ってくれます。

最近はエディタにESLintを食わせて、PrettierはWebpackに食わせることで運用しています。っていうのは、ESLintは最終的に無くして開発をしたいってのと、Prettierはチーム間で共通化して使えるようにしていきたいので、こういう構成でなりました。

今回、Prettierの導入を中心に話します。ESLintの設定に関しては、ほかの記事を当たってください笑

Prettierの導入 / prettier-webpack-plugin

webpackとの連携はprettier-webpack-pluginを利用しました。

npm i -D prettier prettier-webpack-plugin
yarn add -D prettier prettier-webpack-plugin

どっちかでインストール。

webpack.config.js
const PrettierPlugin = require('prettier-webpack-plugin')


export default {
  ...
  plugins: [
    new PrettierPlugin()
  ]
  ...
}

これでwebpackを動かしたときに自動成型できるようになります。dev-serverを動かしたときも自動成型してくれるので多少のずれとかを気にしないでガンガン開発できるようになる。

このライブラリでprettierのルールについても細かく設定できるので、詳しくはリファレンス参照。

VueCLIで立てたプロジェクトにも適用

普段Vue.jsで開発しているのでこっちもメモ。
VueCLIで立ち上げたプロジェクト(vue init webpack <project_name>)にも適用。

build/webpack.base.conf.js
const PrettierPlugin = require('prettier-webpack-plugin')


export default {
  ...
  plugins: [
    new PrettierPlugin()
  ]
  ...
}

やってることは同じです。webpack.prod.conf.jsでuglifyされるので、webpack.dev.conf.jsに適用してprecommitでprettier走らせるのでもいいかも。