typescript-eslint + prettier を併用する際は member-delimiter-style の設定に気をつける

"Prettier" でググった記事を参考に、雰囲気で導入していたPrettier、

公式ドキュメントを読んでみると、きちんと腹落ち＆導入することができましたが、typescript-eslintとprettierの設定が競合する状態となってしまいました。

この記事では、その競合を解決したときの方法について、メモしていきたいと思います。

はじめに

typescript-eslintとprettierについて、簡単に触れておきたいと思います。

typescript-eslint とは？ 🤔

ざっくり説明すると、

• eslintのTypeScript版
• tslintからtypescript-eslintに移行している
  • 移行状況は→ typescript-eslint/ROADMAP.md at master · typescript-eslint/typescript-eslint · GitHub

以前に導入したときの記事も書きましたので、もしよければ参考にしていただければと思います。🙏

• 【eslint】 JavaScript (*.js) と TypeScript (*.ts) が混同しているプロジェクトに typescript-eslint を導入した際のメモ - zackey推し

prettierとは？ 🤔

簡単にいうと、コードフォーマッタです。

「eslintとどう違うの？」といった疑問は、以下記事を読むことで解決できますので、ぜひ一読いただければと思います。🙏

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

本題

実際に発生した競合内容と解決方法を書いていきます。

prettier「semi」と typescript-eslint「member-delimiter-style」が競合した

以下設定内容にすると、

セミコロンがない(semi: false)と指定しているのに、interface等のメンバーの区切り文字にセミコロンを使う

という内容で、競合が発生しています。

設定内容

// .prettierrc.js
module.exports = {
  semi: false,
  tabWidth: 2,
  singleQuote: true
}

// .eslintrc.js
module.exports = {
  // 共通の設定
  env: {
    es6: true,
    node: true
  },
  extends: ['eslint:recommended', 'plugin:prettier/recommended'],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly'
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module'
  },
  plugins: ['prettier'],
  rules: {
    // 共通のルールを設定
    'prettier/prettier': 'error'
  },
  overrides: [
    // TypeScript系ファイルへのルールを設定
    {
      files: ['**/*.ts'],
      extends: [
        'plugin:@typescript-eslint/eslint-recommended',
        'plugin:@typescript-eslint/recommended'
      ],
      parser: '@typescript-eslint/parser',
      parserOptions: {
        sourceType: 'module',
        project: './tsconfig.json'
      },
      plugins: ['@typescript-eslint'],
      rules: {
      }
    }
  ]
}

発生した競合内容

VSCodeの拡張機能「ESLint」をインストールすることで、コンソールにESLintによるエラーが出力されます。

競合した内容は、以下のように表示されます。

セミコロンを削除してみると...

と、prettier「semi」と typescript-eslint「member-delimiter-style」が競合していることがわかります。

解決方法

自分の場合、セミコロンをつけない方向で統一したかったため、member-delimiter-styleの設定を変更することにしました。

• typescript-eslint/member-delimiter-style.md at master · typescript-eslint/typescript-eslint · GitHub

設定内容

// .eslintrc.js
module.exports = {
  // 共通の設定
  env: {
    es6: true,
    node: true
  },
  extends: ['eslint:recommended', 'plugin:prettier/recommended'],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly'
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module'
  },
  plugins: ['prettier'],
  rules: {
    // 共通のルールを設定
    'prettier/prettier': 'error'
  },
  overrides: [
    // TypeScript系ファイルへのルールを設定
    {
      files: ['**/*.ts'],
      extends: [
        'plugin:@typescript-eslint/eslint-recommended',
        'plugin:@typescript-eslint/recommended'
      ],
      parser: '@typescript-eslint/parser',
      parserOptions: {
        sourceType: 'module',
        project: './tsconfig.json'
      },
      plugins: ['@typescript-eslint'],
      rules: {
+       // interface等のメンバーを定義する際、複数行にまたがる場合はデミリタ無しとする (prettierとの競合解消)
+       '@typescript-eslint/member-delimiter-style': [
+         'error',
+         {
+           multiline: {
+             delimiter: 'none',
+             requireLast: false
+           },
+           singleline: {
+             delimiter: 'comma',
+             requireLast: false
+           }
+         }
+       ]
      }
    }
  ]
}

multiline (＝複数行にまたがるメンバーを定義する)の際は、
delimiter: 'none' (＝区切り文字無し)とするという設定で対処しました。

実際に、上記のような対処をしたとあるコミット履歴がありますので、よければ参考にしていただければと思います。

• feat: prettier · zakizaki-ri9/slack-app-project-firebase-typescript@5aba75e · GitHub

おわり

以上になります。 何か気になる点等ありましたら、FBいただけると助かります。🙏