Skip to content

Commit 8d69f1e

Browse files
author
Christopher Quadflieg
committed
Suggest workarounds
1 parent e29fe84 commit 8d69f1e

1 file changed

Lines changed: 36 additions & 0 deletions

File tree

README.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,42 @@ They should be set via `Prettier`'s `overrides` option
148148

149149
The definitions for these options can be found in [src/options.ts](https://github.com/prettier/plugin-pug/blob/master/src/options.ts)
150150

151+
## Some workarounds
152+
153+
There are some code examples that are not formatted well with this plugin and can damage your code.
154+
But there are workarounds for it. These generate even better pug code!
155+
156+
### Examples
157+
158+
[Issue 53](https://github.com/prettier/plugin-pug/issues/53)
159+
160+
```pug
161+
input(onClick="methodname(\"" + variable + "\", this)")
162+
// transforms to
163+
input(onClick="methodname(\"\" + variable + \"\", this)")
164+
165+
// better write
166+
input(onClick="methodname('" + variable + "', this)")
167+
// or
168+
input(onClick=`methodname("${variable}", this)`)
169+
// or you could also add the " inside the methodname-method
170+
```
171+
172+
[Issue 54](https://github.com/prettier/plugin-pug/issues/54)
173+
174+
```pug
175+
- const id = 42
176+
- const collapsed = true
177+
178+
div(id=id, class='collapse' + (collapsed ? '' : ' show') + ' cardcontent')
179+
// transforms to
180+
.cardcontent(id=id, class="collapse' + (collapsed ? '' : ' show') + '")
181+
182+
// better write
183+
.cardcontent.collapse(id=id, class=collapsed ? '' : 'show')
184+
// Now your js logic is extracted from the plain logic
185+
```
186+
151187
## Integration with editors
152188

153189
If you are using a text editor that supports Prettier integration (e.g. [Atom](https://atom.io/packages/prettier-atom)), you can have all Prettier perks for your Pug code too!

0 commit comments

Comments
 (0)