Lint pug template

[Aysnine]

Tell us about your environment

• ESLint Version: 5.8.0
• eslint-plugin-vue Version: 5.0.0-0
• Node Version: 8.12.0

Please show your full configuration:

{
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^2.5.17"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.1.1",
    "@vue/cli-plugin-eslint": "^3.1.1",
    "@vue/cli-service": "^3.1.1",
    "@vue/eslint-config-prettier": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0-0",
    "pug": "^2.0.3",
    "pug-plain-loader": "^1.0.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue-template-compiler": "^2.5.17"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/prettier"
    ],
    "rules": {
      "prettier/prettier": [
        "warn",
        {
          "singleQuote": true,
          "semi": false,
          "trailingComma": "none"
        }
      ]
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

What did you do? Please include the actual source code causing the issue.

<template lang="pug">
  #app
    img(alt='Vue logo', src='./assets/logo.png')
    hello-world(msg='Welcome to Your Vue.js App')
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

What did you expect to happen?

• Create vue app by vue-cli3 with lint ( eslint & prettier )
• Add pug support, yarn add pug pug-plain-loader -D
• Edit the template of App.vue use pug, got incorrect lint.

What actually happened? Please include the actual, raw output from ESLint.

 WARNING  Compiled with 1 warnings                                             15:54:43
Module Warning (from ./node_modules/@vue/cli-plugin-eslint/node_modules/eslint-loader/index.js):
warning: Replace `⏎····img(alt='Vue·logo',·src='./assets/logo.png')⏎····hel
lo-world(msg='Welcome·to` with `·img(alt='Vue·logo',·src='./assets/logo.png')·hell
o-world(msg='Welcome·to⏎·` (prettier/prettier) at src\App.vue:2:7:
  1 | <template lang="pug">
> 2 |   #app
    |       ^
  3 |     img(alt='Vue logo', src='./assets/logo.png')
  4 |     hello-world(msg='Welcome to Your Vue.js App')
  5 | </template>


1 warning found.
1 warning potentially fixable with the `--fix` option.

yarn lint --fix then

<template lang="pug">
  #app img(alt='Vue logo', src='./assets/logo.png') hello-world(msg='Welcome to
  Your Vue.js App')
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

work around

<!-- prettier-ignore -->
<template lang="pug">
  #app
    img(alt='Vue logo', src='./assets/logo.png')
    hello-world(msg='Welcome to Your Vue.js App')
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

[armano2]

issue is related to vue-eslint-parser: vuejs/vue-eslint-parser#29

[michalsnik]

We don't support pug templates. This should be raised once vue-eslint-parser has support for it or once it ignores parsing templates of unknown languages. I highly recommend using HTML instead of any HTML preprocessor to get the best possible support and migration path in the future (codemods most likely won't support PUG either).

[Aysnine]

@michalsnik thanks :) it is fixed in prettier
prettier/prettier#5388

[Shinigami92]

Author of https://github.com/prettier/plugin-pug here.

Please watch/star https://github.com/Shinigami92/eslint-plugin-vue-pug-sfc
I will try to tackle eslint vue pug support in next time

[Shinigami92]

https://www.npmjs.com/package/eslint-plugin-vue-pug-sfc/v/1.0.0-alpha.2 👀

This is a first alpha and "supports" vue-pug-sfc/this-in-template for the never option. always is currently NOT supported due to it is much harder to implement.

Please give it a try and please also start to create issues in the repo for every rule you want to get support for!
Please do NOT use the --fix option right know (or at least with a backup), cause it can damage your code!
The ranges are not accurate yet so the ~~~~ lines are positioned to broad right now.

Please also feel free to jump into the code and help me 😃
If you use VSCode jump into the Debug Launcher and run the tests with debug-breakpoints.

---

Please note, if you consider this plugin as helpful, that I'm open to receive money via GitHub sponsoring. I would really appreciate it.

---

I will not spam here anymore, so please lets move all discussions to the project's repo.