Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Conflict with eslint-plugin-vue recommended rules

See original GitHub issue

Prettier 1.15.1 Playground link

--html-whitespace-sensitivity ignore
--parser vue
--single-quote

Input:

<template>
  <article class="e-cInput">
    <header class="e-cInput__header">
      <h3 class="e-cInput__title">{{ $t(title) }}</h3>
      <div class="e-cInput__actions">
        <div class="e-cInput__action e-cInput__action--settings">
          <el-dropdown
            trigger="click"
            @command="handleCommand"
          >
            <button
              type="button"
            >
              <svg :viewBox="icons.settings.viewBox">
                <use :xlink:href="`#${icons.settings.id}`" />
              </svg>
            </button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="delete">{{ $t('delete') }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div  v-if="!isFirst" class="e-cInput__action e-cInput__action--move"
        >
          <button

            type="button"
            @click="$emit('move-up')"
          >
            <svg :viewBox="icons.arrowUp.viewBox">
              <use :xlink:href="`#${icons.arrowUp.id}`" />
            </svg>
          </button>
        </div>
        <div
          v-if="!isLast"
          class="e-cInput__action e-cInput__action--move"
        >
          <button
            type="button"
            @click="$emit('move-down')"
          >
            <svg :viewBox="icons.arrowDown.viewBox">
              <use :xlink:href="`#${icons.arrowDown.id}`" />
            </svg>
          </button>
        </div>
      </div>
    </header>
    <div class="e-cInput__content">
      <slot />
    </div>
  </article>
</template>

Output:

<template>
  <article class="e-cInput">
    <header class="e-cInput__header">
      <h3 class="e-cInput__title">{{ $t(title) }}</h3>
      <div class="e-cInput__actions">
        <div class="e-cInput__action e-cInput__action--settings">
          <el-dropdown trigger="click" @command="handleCommand">
            <button type="button">
              <svg :viewBox="icons.settings.viewBox">
                <use :xlink:href="`#${icons.settings.id}`" />
              </svg>
            </button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="delete">
                {{ $t('delete') }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div v-if="!isFirst" class="e-cInput__action e-cInput__action--move">
          <button type="button" @click="$emit('move-up');">
            <svg :viewBox="icons.arrowUp.viewBox">
              <use :xlink:href="`#${icons.arrowUp.id}`" />
            </svg>
          </button>
        </div>
        <div v-if="!isLast" class="e-cInput__action e-cInput__action--move">
          <button type="button" @click="$emit('move-down');">
            <svg :viewBox="icons.arrowDown.viewBox">
              <use :xlink:href="`#${icons.arrowDown.id}`" />
            </svg>
          </button>
        </div>
      </div>
    </header>
    <div class="e-cInput__content"><slot /></div>
  </article>
</template>

Expected behavior:

<template>
  <article class="e-cInput">
    <header class="e-cInput__header">
      <h3 class="e-cInput__title">{{ $t(title) }}</h3>
      <div class="e-cInput__actions">
        <div class="e-cInput__action e-cInput__action--settings">
          <el-dropdown 
            trigger="click" 
            @command="handleCommand"
          >
            <button type="button">
              <svg :viewBox="icons.settings.viewBox">
                <use :xlink:href="`#${icons.settings.id}`" />
              </svg>
            </button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="delete">
                {{ $t('delete') }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div 
          v-if="!isFirst" 
          class="e-cInput__action e-cInput__action--move"
        >
          <button 
            type="button" 
            @click="$emit('move-up');"
          >
            <svg :viewBox="icons.arrowUp.viewBox">
              <use :xlink:href="`#${icons.arrowUp.id}`" />
            </svg>
          </button>
        </div>
        <div 
          v-if="!isLast" 
          class="e-cInput__action e-cInput__action--move"
        >
          <button 
            type="button" 
            @click="$emit('move-down');"
          >
            <svg :viewBox="icons.arrowDown.viewBox">
              <use :xlink:href="`#${icons.arrowDown.id}`" />
            </svg>
          </button>
        </div>
      </div>
    </header>
    <div class="e-cInput__content"><slot /></div>
  </article>
</template>

eslint-plugin-vue with recommended settings requires html-attributes on seperate lines if an element has more than one attribute: https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/max-attributes-per-line.md

is there a prettier-option to prevent errors by prettier?

  ✘  https://google.com/#q=prettier%2Fprettier  Replace `⏎··········v-if="!isLast"⏎··········class="e-cInput__action·e-cInput__action--move"⏎········` with `·v-if="!isLast"·class="e-cInput__action·e-cInput__action--move"`

Issue Analytics

State:
Created 5 years ago
Comments:25 (11 by maintainers)

Top GitHub Comments

14reactions

azdanovcommented, Nov 7, 2018

Wouldn’t it be better to adjust prettier to follow the official style-guide? https://vuejs.org/v2/style-guide/#Multi-attribute-elements-strongly-recommended

13reactions

alexander-akaitcommented, Nov 7, 2018

You should disable all stylistics rules when you use prettier

Top Results From Across the Web

User Guide | eslint-plugin-vue

If your ESLint configuration is updated (manually or from your version control), open it in the editor and choose Apply ESLint Code Style...

ESlint rules conflict - Stack Overflow

I'm doing es lint for my project, below is part of the .eslintrc.json ... /eslint-plugin/docs/rules/explicit-module-boundary-types.md says.

Configuration Files - ESLint - Pluggable JavaScript Linter

You can include built-in rules, how you want them enforced, plugins with custom rules ... file in the tests/ directory overrides conflicting specifications....

eslint-config-prettier - Awesome JS

eslint -config-prettier. Turns off all rules that are unnecessary or might conflict with Prettier. This lets you use your favorite shareable config without ......

@vue/eslint-config-typescript - npm

Besides setting the parser and plugin options, it also turns off several conflicting rules in the eslint:recommended ruleset.