矛盾した？eslintのルールを解決したい

Question

eslintのルール設定

現在、Nuxt.jsを用いて開発をしています。
eslintを導入しているのですが、そこで下記のような状況が発生しています。

発生していること

SFCファイルのテンプレート部に以下のような部分があります。

<template>
  ...中略
  <div class="hoge">タイトル</div>
</template>

このdivタグの「タイトル」という部分に黄色いニョロニョロが出て、

Expected 1 line break after opening tag (`<div>`), but no line breaks found.eslint(vue/singleline-html-element-content-newline)
Expected 1 line break before closing tag (`</div>`), but no line breaks found.eslint(vue/singleline-html-element-content-newline)

というeslintの warn が表示されています。
これはdivタグで囲むなら改行してねみたいなことだと思うのですが、

<template>
  ...中略
  <div class="hoge">
    タイトル
  </div>
</template>

のようにすると今度は

Replace `⏎············内容⏎··········` with `内容`eslint(prettier/prettier)

という error が出ます。
こっちは120文字にみたないから1行で！みたいなことですよね・・・？

前者の方はwarnなので、前者のようにすれば一応問題はないのですが、こういった黄色いニョロニョロが各所に出現するのがとても気になります。
こちらを解消する方法はありますでしょうか？ご教示頂けると幸いです。

設定など

他にも必要なファイルや情報があればご指摘お願いいたします。

• 使用エディタ: VSCode
• .eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  extends: ['@nuxtjs/eslint-config-typescript', 'plugin:prettier/recommended', 'eslint:recommended'],
  plugins: ['prettier'],
  // add your custom rules here
  rules: {
    'no-console': 'off',
    'vue/max-attributes-per-line': 'off',
    'dot-notation': 'off',
    '@typescript-eslint/ban-ts-ignore': 'off',
    'vue/html-self-closing': [
      'error',
      {
        html: {
          void: 'always'
        }
      }
    ]
  }
}

• .prettierrc

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "arrowParens": "avoid",
  "printWidth": 120
}

• package.json

{
"devDependencies": {
    "@nuxt/types": "^2.14.6",
    "@nuxt/typescript-build": "^2.0.3",
    "@nuxtjs/dotenv": "^1.4.1",
    "@nuxtjs/eslint-config": "^3.1.0",
    "@nuxtjs/eslint-config-typescript": "^3.0.0",
    "@nuxtjs/eslint-module": "^2.0.0",
    "@nuxtjs/vuetify": "^1.11.2",
    "@vue/test-utils": "^1.1.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.5.0",
    "eslint": "^7.10.0",
    "eslint-config-prettier": "^6.12.0",
    "eslint-plugin-nuxt": "^1.0.0",
    "eslint-plugin-prettier": "^3.1.4",
    "jest": "^26.5.0",
    "prettier": "^2.1.2",
    "ts-jest": "^26.4.1",
    "vue-jest": "^3.0.4"
  }
}

Answer 1

.eslintrc.jsのrulesに、

  'vue/singleline-html-element-content-newline': ['error', {
    'ignores': ['div', 'pre', 'textarea', ...INLINE_ELEMENTS]
  }]

を追加すれば(直前のデータの末尾に,を忘れずに)、div要素を1行に書いても文句を言わなくなるかと。

eslint-plugin-vue/singleline-html-element-content-newline.md at master · vuejs/eslint-plugin-vue

Comments

[kkmts]

ありがとうございます！解決できました！