zackey推し

IT系のこと書くぞい

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

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


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

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

はじめに

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

typescript-eslint とは? 🤔

ざっくり説明すると、

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

prettierとは? 🤔

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

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

本題

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

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によるエラーが出力されます。

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

f:id:kic-yuuki:20191019140409p:plain

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

f:id:kic-yuuki:20191019140426p:plain

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

解決方法

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

設定内容

// .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' (=区切り文字無し)とするという設定で対処しました。

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

おわり

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