Eslint-plugin-vue: What does this do?

[corysimmons]

I have ESLint and Prettier and all kinds of stuff going on and working fine, but I'm new to Vue.

I'm using Single File Components spread across a couple files like so:

I have Atom's ESLint plugin and get warnings when I'm not adhering to my config, but I don't see any warnings with this plugin.

// package.json
"eslintConfig": {
    "plugins": ["prettier"],
    "rules": {
      "prettier/prettier": "error"
    },
    "extends": ["plugin:vue/recommended", "prettier-standard"],
    "env": {
      "browser": true,
      "jquery": true
    },
    "globals": {
      "axios": true,
      "Vue": true
    }
  },

Would really appreciate knowing how to get this working. I think it'd help me from making silly mistakes with Vue. Thanks.

[mysticatea]

Thank you for this issue.

Could you confirm that eslint works as intended on CLI?

$ ./node_modules/.bin/eslint "path/to/your.vue"

If yes, maybe you have to configure Atom's ESLint plugin to check the .vue files (maybe by file extensions).
I'm not sure the way :cry: since I'm not familiar with Atom.

[michalsnik]

Hey @corysimmons , you need to turn Lint HTML Files option in linter-eslint atom package settings. Feel free to reopen this issue if you still have problems. I use eslint in atom and it works :)

[corysimmons]

Thanks guys, sorry I fell asleep.

@michalsnik I did that.

Here's a simple .vue

<style src="./CompanyLogo.scss" lang="scss" scoped></style>

<template>
  <figure class="company-logo" :style="{
    width: size,
    height: size,
    backgroundImage: `url(${src})`
  }"></figure>
</template>

<script src="./CompanyLogo.js"></script>

What's a good way to break that to confirm the plugin is working now?

[armano2]

Remove figure and there should be error with no invalid root template

[armano2]

Also I don't think that script with sec is supported in Vue files

[michalsnik]

Scripts in plain JS files are supported @armano2 I think I know the real problem here. It looks like the atom's 'linter-eslint' lints the .vue file only when something inside script tag changes. I need to investigate what we can do about it.. But it's rather an upstream issue if any

[corysimmons]

@michalsnik I suspected this might be the issue. My use case is Prettier + SingleFileComponents split up. No rush whatsoever, just wanted to check to make sure I wasn't missing some sweet ruleset. 🏄

Maybe re-open/re-title though?