prettier / prettier/plugin-pug
Bug: places closing paren in wrong location of v-for
Nobody has claimed this yet.
- 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:

Identical results on version 1.15.3 and 1.16.0-0.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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