not working on *.vue which include style tag

[bingluen]

Issue Type

Question / Bug

Issue Description

When the *.vue file include <style>, the linter is not working.

(But eslint is working when I using npm run dev)

Once remove the <style> ... </style> part, it is working.

example like this: (from vue-admin: https://github.com/fundon/vue-admin/blob/master/client/App.vue)

<template>
  <div id="app">
    <nprogress-container></nprogress-container>
    <navbar :show="true"></navbar>
    <sidebar :show="sidebar.opened && !sidebar.hidden"></sidebar>
    <app-main></app-main>
    <footer-bar></footer-bar>
  </div>
</template>

<script>
import NprogressContainer from 'vue-nprogress/src/NprogressContainer'
import { Navbar, Sidebar, AppMain, FooterBar } from 'components/layout/'
import { mapGetters, mapActions } from 'vuex'

export default {
  components: {
    Navbar,
    Sidebar,
    AppMain,
    FooterBar,
    NprogressContainer
  },

  beforeMount () {
    const { body } = document
    const WIDTH = 768
    const RATIO = 3

    const handler = () => {
      if (!document.hidden) {
        let rect = body.getBoundingClientRect()
        let isMobile = rect.width - RATIO < WIDTH
        this.toggleDevice(isMobile ? 'mobile' : 'other')
        this.toggleSidebar(!isMobile)
      }
    }

    document.addEventListener('visibilitychange', handler)
    window.addEventListener('DOMContentLoaded', handler)
    window.addEventListener('resize', handler)
  },

  computed: mapGetters({
    sidebar: 'sidebar'
  }),

  methods: mapActions([
    'toggleDevice',
    'toggleSidebar'
  ])
}
</script>

<style lang="scss">
@import '~animate.css';
.animated {
  animation-duration: .377s;
}

@import '~bulma';

@import '~wysiwyg.css/wysiwyg.sass';

$fa-font-path: '~font-awesome/fonts/';
@import '~font-awesome/scss/font-awesome';

.nprogress-container {
  position: fixed !important;
  width: 100%;
  height: 50px;
  z-index: 2048;
  pointer-events: none;

  #nprogress {
    $color: #48e79a;

    .bar {
      background: $color;
    }
    .peg {
      box-shadow: 0 0 10px $color, 0 0 5px $color;
    }

    .spinner-icon {
      border-top-color: $color;
      border-left-color: $color;
    }
  }
}
</style>

Bug Checklist

Linter Eslint: Debug command from the Command Palette below

atom version: 1.11.2
linter-eslint version: 8.0.0
eslint version: 3.9.1
hours since last atom restart: 1.1
platform: darwin
Using local project eslint from /Users/zhuangbinglun/repo/amarket/node_modules/eslint
linter-eslint configuration: {
  "fixOnSave": true,
  "lintHtmlFiles": true,
  "scopes": [
    "source.vue",
    "source.js",
    "source.jsx",
    "source.js.jsx",
    "source.babel",
    "source.js-semantic"
  ],
  "useGlobalEslint": false,
  "showRuleIdInMessage": true,
  "disableWhenNoEslintConfig": true,
  "eslintrcPath": "",
  "globalNodePath": "",
  "advancedLocalNodeModules": "",
  "eslintRulesDir": "",
  "disableEslintIgnore": false,
  "disableFSCache": false,
  "rulesToSilenceWhileTyping": []
}

[IanVS]

Can you please provide the information asked for in the issue template? Specifically the output of Linter Eslint: debug?

[bingluen]

I edit it. And I am sorry about that I did not allow issue template when I open this issue

[IanVS]

Does eslint work on the file when you run it directly from the CLI?

I'm not personally super-familiar with .vue files and eslint compatibility, to be honest.

[bingluen]

on vue-admin framework didn't need install CLI (or install them on global) .

In order to test CLI, I install eslint and its dependency on global.

After install, I run eslint -c .eslintrc.js client/App.vue

It seems like eslint is working on CLI.

the output below

/Users/zhuangbinglun/repo/amarket/client/App.vue
  12:70  warning  Missing semicolon  semi
  13:73  warning  Missing semicolon  semi
  25:31  warning  Missing semicolon  semi
  26:30  warning  Missing semicolon  semi
  27:22  warning  Missing semicolon  semi
  28:20  warning  Missing semicolon  semi
  32:48  warning  Missing semicolon  semi
  33:51  warning  Missing semicolon  semi
  34:40  warning  Missing semicolon  semi
  36:6   warning  Missing semicolon  semi
  38:59  warning  Missing semicolon  semi
  39:57  warning  Missing semicolon  semi
  40:47  warning  Missing semicolon  semi
  45:38  warning  Missing semicolon  semi
  48:2   warning  Missing semicolon  semi

✖ 15 problems (0 errors, 15 warnings)

[IanVS]

Any chance you could put together a gist or small repo for us to try to reproduce in?

[bingluen]

I export only 0.1.9 version of vue-admin which I download, and upload it on a new repo.

https://github.com/bingluen/vue-admin-0.1.9

I am not sure that it is small enough or not.

or just need App.vue file & .eslintrc.js ? App.vue https://github.com/bingluen/vue-admin-0.1.9/blob/master/client/App.vue

.eslintrc.js https://github.com/bingluen/vue-admin-0.1.9/blob/master/.eslintrc.js

[baggsie]

Select'Lint HTML Files' in linter-eslint settings and add "eslint-plugin-html" to your .eslintrc.

[bingluen]

Hi @baggsie

Thank your answer, but it not working for me.

I try to add eslint-plugin-html into .eslintrc. and enable Lint HTML Files on linter-eslint settings.

It still not working when <style>....</style> is exists.

When I remove <style>....</style>, just keep <template> .. </template> and <script>....</script> on source code and it is working.

[baggsie]

It's working fine on my system (Windows 8.1/ Atom1.12.5)

.eslint.js

    "extends": "standard",
    "plugins": [
        "standard",
        "promise",
        "eslint-plugin-html"
    ]
};

config.cson

  autosave:
    enabled: true
  core:
    telemetryConsent: "limited"
  editor:
    fontSize: 16
  "linter-eslint":
    lintHtmlFiles: true

My Extensions: atom-beautify@0.29.13 atom-ternjs@0.16.1 emmet-snippets-compatibility@1.0.6 intellij-idea-keymap@0.2.3 language-vue@0.21.0 linter@1.11.18 linter-eslint@8.0.0 minimap@4.26.3 peacock-syntax@1.4.0 seti-icons@1.3.4 spacegray-dark-neue-ui@1.6.0 spacegray-peacock-ui@1.0.0 terminal-plus@0.14.5

[IanVS]

I try to add eslint-plugin-html into .eslintrc. and enable Lint HTML Files on linter-eslint settings.

Did you also install eslint-plugin-html in your project? Run npm install --save-dev eslint-plugin-html if not.

[Arcanemagus]

@bingluen Linting is based on the scopes at your current cursor position, when it's "not working" when you have <style> tags in there, is your cursor within those style tags? You can check the current scopes at your cursor position by running the Editor: Log Cursor Scope command from the Command Palette.

@baggsie Are things working for you after installing eslint-plugin-html?

[baggsie]

@baggsie Are things working for you after installing eslint-plugin-html?

Yes.

[IanVS]

Seems to be working as expected. Please let us know if you're still having problems, @bingluen.

[bingluen]

It is working now. Thanks !

But I find something that:

If I modify some rules on .eslintrc.js, then just open file and try to using Fix file, it is not working until I modify the file (ex. just press enter add a newline).

Is it a feature ?

[IanVS]

Hm, that doesn't seem right. Can you please open a new issue so we don't lose track of it?