web-dev-qa-db-ja.com

vue.jsの<テンプレート>内の段落のeslintルールの最大行長を無効にする方法は？

私はairbnb eslintを使用していますが、現在エラーが発生しています：

エラー：行6は、path/to/file.vue：6：1で行の最大長である100（max-len）を超えています：

<template lang="pug">
  div
    .container
      .row
        .col-xl-10.mx-auto
          p Please let us know how you got here, and use the header buttons to navigate back to safe harbor.
</template>

上記のような段落テキストの糸くずを無効にする方法はありますか？
また、ラインの長さを100から120に増やす方法は？

javascriptvue.jsvuejs2eslintairbnb
14
Syed

ために eslint-plugin-vue> = 4.1.0ディレクティブコメントを使用して、eslintを無効にできます。

https://github.com/vuejs/eslint-plugin-vue/commit/ad84e0ba6d81f24583e65fc70b1d9803d73d3ed9

<template>
  <!-- eslint-disable-next-line vue/max-attributes-per-line -->
  <div a="1" b="2" c="3" d="4">
  </div>
</template>
6
Erty Seidohl

私の知る限り、eslintルールをテンプレート、特にテンプレートの1行に適用する方法はありません。私は間違っていると証明されることを願っています。

とにかく、大量のテキストを含むファイルがあるため、それを回避するために、このルールを追加しました'max-len': ["error", { "code": 120 }],私の.eslintrc.jsファイル。

ここに構造があります（他の設定は削除されています）

module.exports {
  rules: {
    'max-len': ["error", { "code": 120 }]
  }
}
19
Daniel

これにより、テンプレートタグ全体のルールが無効になります。 ルールの無効化に関するES Lint公式ドキュメント

<template>
  <!-- eslint-disable max-len -->
  ...

編集：代わりにすべての.vueファイルの行長ルールを無効にする場合は、これを.eslintrc.jsに追加します（これにより、<script>および<style>タグのルールも無効になります）。

module.exports = {
  ...
  overrides: [
    {
      files: ["*.vue"],
      rules: {
        ...
        'max-len': 'off' // disables line length check
      }
    }
  ]
};
7
gedijedi

これをESLintルールに追加できます：

rules: {
  "vue/max-attributes-per-line": "off"
}

これは私にとってはうまくいきました（自分のプロジェクトに設定したとしても）。
詳細情報を参照できます こちら 必要に応じて。

1
Begueradj