prettier / prettier/plugin-pug

Bug: places closing paren in wrong location of v-for

Open
#251 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

framework: Vue type: bug
Dominant language
TypeScript
Stars
208
Forks
49
Avg merge
4h 26m
Merged PRs (30d)
8

Description

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
div.px-6.mb-2(
  v-for="transferService, index in allTransferServices"
  :key="`${transferService.protocol}-${transferService.id}`"
)
Output or Error
.px-6.mb-2(
  v-for="(transferService, index in allTransferServices)"
  :key="`${transferService.protocol}-${transferService.id}`"
)
Expected Output
.px-6.mb-2(
  v-for="(transferService, index) in allTransferServices"
  :key="`${transferService.protocol}-${transferService.id}`"
)
Additional Context

While we should technically have the parentheses in the markup, I've found a few places where they were missed as in the example above. Vue does do the right thing with that v-for and knows the first value is the value and the second is the index even without the proper parentheses. The "fix" for this appears to put the ending parentheses in the wrong place. Example diff after running yarn prettier --write src/**/*.vue:
GitKraken
Identical results on version 1.15.3 and 1.16.0-0.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the reported Pug input with the listed Prettier plugin versions and compare the actual and expected v-for output. Trace the formatter entry point that handles v-for attributes, then add coverage for the missing closing parenthesis placement; done means the expected output is produced without regressing related formatting.

Written by the indexing model from the issue text.

Assessment

Tech stack
pug
Domain
tooling
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.