VuexにおけるPrettierの80文字改行とESLintの角カッコ改行禁止との競合

前提となる条件

Vuexには以下のように角カッコを用いた記法がある

code:TypeScript

const addressName: IMapReverseGeoCoder = this.$store.getters'map/mapReverseGeoCoderInfo'

NuxtにはESLintが導入されており、これは [] が改行により分離することを禁止する

Expected "[" and "]" to be on the same line standard/computed-property-even-spacing

VSCodeではPrettierが導入されており、これは1行が80文字以上になると改行する

発生する問題

Vuexの記法で80文字を超える行を書いた場合、lintfixの際に次のようなエラーが発生し、commitが通らなくなる

code:bash

583:52 error Expected "and "" to be on the same line standard/computed-property-even-spacing

Prettierによって構文を破壊され、挙句ESLintによって非文扱いされたGetters君

code:TypeScript

const addressName: IMapReverseGeoCoder = this.$store.getters[

'map/mapReverseGeoCoderInfo'

]

解決策

ESLintの standard/computed-property-even-spacing を off にする

code: .eslintrc.js

// add your custom rules here

rules: {

"standard/computed-property-even-spacing": "off",