(Vue) Attributes starting with colons `:` throw syntax error

[aminimalanimal]

pug-lint marks Vue components that use v-bind shorthand syntax (preceding an attribute with a :) as having syntax errors.

Example:

button.dropdown-button(
  :class="isOpen ? 'open' : 'closed'"
  :disabled="isDisabled"
  ) {{ text }}

Pug itself was updated to remove this limitation here: https://github.com/pugjs/pug/pull/2773.

I've seen workarounds that suggest using commas, adding quotes around the attributes, or writing out v-bind, but given that pug can handle these templates, these workarounds shouldn‘t be necessary for its linter.

[superMDguy]

I just checked, and it looks like #156 fixed it

[iwata]

Fixed this issue?

[Shinigami92]

It's simple and easy to fix ^^ Just put a comma , behind each line in the brackets.

button.dropdown-button(
  :class="isOpen ? 'open' : 'closed'", //- <-- comma should be here
  :disabled="isDisabled"
) {{ text }}

[aminimalanimal]

@Shinigami92 From the original post:

I've seen workarounds that suggest using commas, adding quotes around the attributes, or writing out v-bind, but given that pug can handle these templates, these workarounds shouldn‘t be necessary for its linter.

[aminimalanimal]

@iwata I'll put checking this in my to do list and try to get to it this weekend. I have to reimplement adding pug-lint to my environment to check, since I stopped using it due to this bug.

[aminimalanimal]

Version 2.5.0 didn't fix this issue.

Command line output:

pug-lint temp
temp/button.pug:6:5
    4|   img.image(
    5|     :src="image"
  > 6|     :alt="accessibleName"
-----------^
    7|     )
    8| 

Syntax Error: Unexpected token

[ezhlobo]

I strongly believe that the real fix would be to upgrade pug-lexer version.

[aminimalanimal]

I'm not sure how to confirm whether or not that would fix this particular issue, but it's probably worth updating pug-lint's dependencies anyway:

• pug-lint@2.5 currently has pug-lexer@^2.0.1 as a dependency (4.1.0 is available)
• pug-lint@2.5 currently has 12 dependencies that are deprecated
• npm claims that there are 82 vulnerabilities (14 high, 1 critical) in its dependencies (but maybe that doesn't matter, since pug-lint is a purely locally-used tool?)

I tried to confirm that a pug-lexer update would resolve this issue, but I think I'm missing something. I:

1. cd'ed into node_modules/pug-lint
2. manually updated pug-lexer's version in package.json to 4.1.0
3. removed its existing node_modules folder (which only included a few things—4 or so, probably because the rest was shared with my other modules)
4. ran npm install within the pug-lint folder. (After this, its node_modules contained everything it actually uses)

I'm assuming that I'm probably missing a build step somewhere, though.

(I originally tried to just update its package.json's pug-lexer version to 4.1.0 and do my usual yarn install from my project's root folder, but yarn was smart enough to undo my manual dependency change in pug-lint.)

[Shinigami92]

Try to check out the project and use yarn link

[aminimalanimal]

Actually, the master branch of the project already has pug-lexer@4.0 checked in 5 months ago. Maybe it was just never published to npm?

[Shinigami92]

See what you mean. I think that pug-lint needs to re-publish? So it can depend on ^4.0.0 and should then have a version of 2.5.1

[aminimalanimal]

I tried forking the project and using yarn link. It doesn't pick up any of my errors though.

Steps taken

1. Fork repository and download locally
2. Run yarn in pug-lint repo (using current defaults and ignoring all the warnings yarn throws at me)
3. Run yarn link in pug-lint repo
4. In the main repo, run yarn link "pug-lint". Received success notification
5. Run chmod +x /usr/local/bin/pug-lint to make pug-lint executable, so that yarn can run it from another repository (it failed if I didn't do this step)
6. Run yarn lint:pug, which is an npm script I set up that runs pug-lint temp

It runs, then claims to be done, and none of the issues in my file are called out.

My files

temp/button.pug

img.image#no(
  class="thing"
  id="yeah"
  :src="image"
  :alt="accessibleName"
  ): p yo

.pug-lintrc.js

module.exports = {
  rules: {
    disallowBlockExpansion: true,
    disallowClassAttributeWithStaticValue: true,
    disallowIdLiterals: true
  },
}

[adrienverge]

pug-lint 2.6.0 was just published. Can you report whether it's working well or not? Thanks!

[aminimalanimal]

Yes! It works now.

It should be noted that the reason the yarn link stuff I attempted yesterday didn't work was because my .pug-lintrc.js file should not have contained a rules object. It should have been this instead:

module.exports = {
  disallowBlockExpansion: true,
  disallowClassAttributeWithStaticValue: true,
  disallowIdLiterals: true
}