Prettier を ESLint と併用して使ってみた

コードフォーマッタである Prettier を使ってみた。ESLint と併用するための環境も作った。

大まかには以下の文献を参考にした。

• 参考 : Prettier 入門 ～ESLintとの違いを理解して併用する～ - Qiita

package.json と .eslintrc.js の内容は次のとおり。

• package.json

{
  "name": "practice-prettier",
  "private": true,
  "devDependencies": {
    "eslint": "5.16.0",
    "eslint-config-prettier": "4.2.0",
    "eslint-plugin-prettier": "3.0.1",
    "prettier": "1.17.0"
  }
}

• .eslintrc.js

module.exports = {
  'extends': [
    'eslint:recommended',
    'plugin:prettier/recommended'  // eslint-plugin-prettier : Prettier を ESLint 上で実行する
  ],
  // env・parserOptions 辺りはお好みで
  'env': {
    'node': true,
    'commonjs': true,
    'es6': true
  },
  'parserOptions': {
    'ecmaVersion': 2017
  },
  'rules': {
    // eslint-config-prettier : eslint --fix 時に Prettier を実行する
    'prettier/prettier': [
      'error',
      // Options : https://prettier.io/docs/en/options.html
      {
        // アロー関数の引数にカッコを必ず付ける
        'arrowParens': 'always',
        // オブジェクトを示すブラケット内にスペースを入れる
        'bracketSpacing': true,
        // 改行コード
        'endOfLine': 'lf',
        // 1行の桁数・'proseWrap' で無効にするが広めにとっておく
        'printWidth': 120,
        // 'printWidth' (1行の桁数) による折り返しをしない
        'proseWrap': 'never',
        // オブジェクトのプロパティをクォート表記にするか : 必要に応じて変えられるようにする
        'quoteProps': 'as-needed',
        // シングルクォートを使用する
        'singleQuote': true,
        // セミコロンを行末に付ける
        'semi': true,
        // タブ幅
        'tabWidth': 2,
        // 複数行に渡る配列などの列挙の際、最終要素の後ろにカンマを付けない
        'trailingComma': 'all',
        // タブを使わない
        'useTabs': false,
      }
    ],
    
    // ESLint ルールがあればココに入れていく
  }
};

結論からいくと、Prettier はインデント用のスペースのみ存在する空行のスペースを強制的に除去してしまうのが耐えられなかったので、使うのを止めた。

ESLint と併用するほどでもなく、ESLint 単体で整形できるレベルで僕の中では十分。ESLint プラグインを入れていくと面倒臭くなるので、Prettier 自体を使わない方針のままで行くことにした。

独特なオレオレスタイルを持ちすぎているので、仕事でチーム開発する場合は使うことにしよう。