"Prettier" でググった記事を参考に、雰囲気で導入していたPrettier、
公式ドキュメントを読んでみると、きちんと腹落ち＆導入することができましたが、typescript-eslintとprettierの設定が競合する状態となってしまいました。
この記事では、その競合を解決したときの方法について、メモしていきたいと思います。
はじめに
typescript-eslintとprettierについて、簡単に触れておきたいと思います。
typescript-eslint とは？ 🤔
ざっくり説明すると、
eslintのTypeScript版tslintからtypescript-eslintに移行している
以前に導入したときの記事も書きましたので、もしよければ参考にしていただければと思います。🙏
- 【eslint】 JavaScript (*.js) と TypeScript (*.ts) が混同しているプロジェクトに typescript-eslint を導入した際のメモ - zackey推し
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によるエラーが出力されます。
競合した内容は、以下のように表示されます。
セミコロンを削除してみると...
と、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' (＝区切り文字無し)とするという設定で対処しました。
実際に、上記のような対処をしたとあるコミット履歴がありますので、よければ参考にしていただければと思います。
おわり
以上になります。 何か気になる点等ありましたら、FBいただけると助かります。🙏
