Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

prettier not fixing vue/max-attributes-per-line #94

Closed
ghost opened this issue Jun 6, 2018 · 7 comments

Comments

@ghost
Copy link

@ghost ghost commented Jun 6, 2018

What version of eslint are you using?
"^4.15.0"

What version of prettier are you using?
VS Code plugin for prettier/prettier - 1.4.0

What version of eslint-plugin-prettier are you using?
"^2.6.0"

Please paste any applicable config files that you're using (e.g. .prettierrc or .eslintrc files)

/* .eslintrc */
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    'eslint:recommended',
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/strongly-recommended'
  ],
  // required to lint *.vue files
  plugins: [
    'prettier',
    'vue'
  ],
  // add your custom rules here
  rules: {}
}

What source code are you linting?

      <!-- example.vue -->
      <div class="Cart__top">
        <button class="Cart__close  t-h5" type="button" @click="closeCart">Close</button>
        <div class="Cart__subtotal">
          <div class="Cart__subtotalTitle  t-h5">Subtotal</div>
          <div class="Cart__subtotalPrice  t-h1">€150</div>
        </div>
      </div>

What did you expect to happen?
Output after executing format document command in vs code, line 3 would be formatted such that each attribute on the button element would be on a new line. I could be making a wrong assumption that my vs code prettier extension would make use of these settings, that prettier would ever do this, or that this is even the right place to post this??

What actually happened?
No formatting of the attributes occurred.

@not-an-aardvark

This comment has been minimized.

Copy link
Member

@not-an-aardvark not-an-aardvark commented Jun 6, 2018

Hi, thanks for the report.

I noticed you haven't enabled any rules from prettier in your config file. What happens if you add "plugin:prettier/recommended" to your extends array in your config?

@ghost

This comment has been minimized.

Copy link
Author

@ghost ghost commented Jun 6, 2018

I had previously tried that too, i still get the same result.

@jjohnson1994

This comment has been minimized.

Copy link

@jjohnson1994 jjohnson1994 commented Jul 20, 2018

Also getting this issue.

What version of eslint are you using?
"^4.19.1"

What version of prettier are you using?
VS Code plugin for prettier/prettier - 1.5.0

What version of eslint-plugin-prettier are you using?
"^2.6.0"

Please paste any applicable config files that you're using (e.g. .prettierrc or .eslintrc files)
.eslintrc

  "env": {
    "es6": true
  },
  "parserOptions": {
    "parser": "babel-eslint",
    "ecmaVersion": 2017,
    "sourceType": "module"
  },
  "extends": [
    "plugin:vue/recommended",
    "plugin:prettier/recommended",
    "eslint:recommended"
  ],
  "globals": {
    "_": true,
    "moment": true,
    "$toast": true,
    "firebase": true,
    "module": true,
    "swal": true,
    "atatus": true,
    "Tawk_API": true,
    "Stripe": true
  },
  "rules": {
    "array-bracket-spacing": [2, "never"],
    "no-var": 2,
    "block-scoped-var": 2,
    "brace-style": [2, "1tbs"],
    "camelcase": 1,
    "computed-property-spacing": [2, "never"],
    "curly": 2,
    "eol-last": 2,
    "eqeqeq": [2, "smart"],
    "indent": ["error", 2, {
      "SwitchCase": 1,
      "MemberExpression": 1
    }],
    "max-depth": [1, 3],
    "max-len": [1, 300],
    "max-statements": [1, 45],
    "new-cap": 1,
    "no-extend-native": 2,
    "no-mixed-spaces-and-tabs": 2,
    "no-trailing-spaces": 2,
    "no-unused-vars": 2,
    "object-curly-spacing": [2, "always"],
    "quotes": [2, "single", "avoid-escape"],
    "semi": [2, "always"],
    "arrow-spacing": [2, {"before": true, "after": true}],
    "keyword-spacing": [2, {"before": true, "after": true}],
    "space-unary-ops": 2,
    "comma-dangle": ["error", "always-multiline"],
    "prefer-arrow-callback": 2,
    "vue/html-quotes": "single",
    "vue/max-attributes-per-line": [2, {
      "singleline": 1,
      "multiline": {
        "max": 1,
        "allowFirstLine": false
      }
    }]
  }
}

.prettierrc

{
  "printWidth": 300,
  "singleQuote" : true,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

Anyone got any ideas?

@not-an-aardvark

This comment has been minimized.

Copy link
Member

@not-an-aardvark not-an-aardvark commented Jul 20, 2018

To fix this issue, you should disable the vue/max-attributes-per-line rule since it seems like it conflicts with how prettier attempts to style your code.

@dsegovia90

This comment has been minimized.

Copy link

@dsegovia90 dsegovia90 commented Nov 14, 2018

Hey I stumbled upon this issue as well, it seems that prettier clashes with eslint rules. I fix it by changing the actual vue/max-attributes-per-line rule like so:

'vue/max-attributes-per-line': [2, {
  'singleline': 20,
  'multiline': {
     'max': 1,
     'allowFirstLine': false
   }
}]

This allows multiple (20) attributes in a single line, but it will not allow after certain chars per line (I got it configured at 80), so feel free to bump that up if you have a different char limit per line.

You can use this docs as reference to tweak it to your needs.

👍

@BPScott

This comment has been minimized.

Copy link
Member

@BPScott BPScott commented Nov 14, 2018

It's worth pointing out that eslint-config-prettier contains a vue config that shall disable all eslint-plugin-vue rules that would conflict with prettier's output.

@diazemiliano

This comment has been minimized.

Copy link

@diazemiliano diazemiliano commented Dec 10, 2018

Thanks @dsegovia90 !
Really useful info.

ysKuga added a commit to ysKuga/nuxt-edge-nue that referenced this issue Apr 28, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.