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

Bug: corrupts pug variable names that are assigned to bound Vue props #250

Closed
2 of 7 tasks
bitencode opened this issue Jul 5, 2021 · 3 comments · Fixed by #252
Closed
2 of 7 tasks

Bug: corrupts pug variable names that are assigned to bound Vue props #250

bitencode opened this issue Jul 5, 2021 · 3 comments · Fixed by #252
Assignees
Labels
framework: Vue Related to the framework Vue type: bug Functionality that does not work as intended/expected

Comments

@bitencode
Copy link
Contributor

bitencode commented Jul 5, 2021

Plugin Version

v1.15.3 & 1.16.0-0

Prettier Version

v2.3.1

Which frameworks are affected?

  • none
  • vue
  • angular
  • svelte

Node Version

v12.19.1

Which operating systems have you used?

  • Linux
  • macOS
  • Windows

Prettier config

{
  arrowParens: 'always',
  bracketSpacing: true,
  jsxBracketSameLine: false,
  printWidth: 100,
  proseWrap: 'preserve',
  semi: true,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'es5',
  useTabs: false,
  pugAttributeSeparator: 'none',
  pugClassNotation: 'literal',
  pugEmptyAttributes: 'none',
  pugExplicitDiv: true,
  pugFramework: 'vue',
  pugIdNotation: 'literal',
  pugSingleFileComponentIndentation: true,
  pugSingleQuote: false,
  pugSortAttributes: 'asc',
  pugSortAttributesBeginning: ['^:?is', '^v-for', '^v-', '^:?id$', '^:?key$', '^:?ref$'],
  pugSortAttributesEnd: ['^:', '^v-on$', '^@', '^v-html$', '^v-text$'],
  pugWrapAttributesThreshold: 1,
}

Input

- const circleSize = 72
- const circleWidth = 7
- v-progress-circular(
  :color="getProgressColor(currentCapacity)"
  :size=circleSize
  :value="capacityPercentage"
  :width=circleWidth
) {{ currentCapacity }}/{{ maxCapacity }}

Output or Error

- const circleSize = 72
- const circleWidth = 7
v-progress-circular(
  :color="getProgressColor(currentCapacity)"
  :size="ircleSiz"
  :value="capacityPercentage"
  :width="ircleWidt"
) {{ currentCapacity }}/{{ maxCapacity }}

Expected Output

- const circleSize = 72
- const circleWidth = 7
v-progress-circular(
  :color="getProgressColor(currentCapacity)"
  :size=circleSize
  :value="capacityPercentage"
  :width=circleWidth
) {{ currentCapacity }}/{{ maxCapacity }}

Additional Context

I expect if someone forgot to wrap an attribute value in quotes that lint --fix or yarn prettier --write src/**/*.vue would wrap the value correctly in the configured quote style. Instead it replaces the first and last character of the attribute value with the quote. Example diff after running yarn prettier --write src/**/*.vue:
If a pug variable is used as the value of a bound Vue prop, it should not be wrapped in quotes:
GitKraken
Identical results on version 1.15.3 and 1.16.0-0.

@bitencode bitencode changed the title Bug: corrupts attributes that were missing quotes Bug: corrupts bound Vue attributes that are missing quotes Jul 6, 2021
@Shinigami92 Shinigami92 added framework: Vue Related to the framework Vue type: bug Functionality that does not work as intended/expected labels Jul 6, 2021
@bitencode bitencode changed the title Bug: corrupts bound Vue attributes that are missing quotes Bug: corrupts pug variable names that are assigned to bound Vue props Jul 6, 2021
@bitencode
Copy link
Contributor Author

Updated title and description based on new understanding of what the actual problem is.

@Shinigami92
Copy link
Member

Released in beta v1.16.0-1

@bitencode
Copy link
Contributor Author

@Shinigami92 I tested v1.16.0-1 on our code - it changed nearly 400 files (mainly prop order, stack/wrap attributes, and some line length). So, did exactly what I'm looking for 👍 ❤️. Outside of the #251 issue, I don't see any problems - I'm manually fixing the v-for problem in our code because I don't find any Vue documentation that says it's valid anyway.

Thanks! 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
framework: Vue Related to the framework Vue type: bug Functionality that does not work as intended/expected
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants