.vue files are not linted

[Zigur]

Tell us about your environment

• ESLint Version: 4.9.0
• eslint-plugin-vue Version: 3.13.17
• Node Version: 6.11.3

Please show your full configuration:

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": ["eslint:recommended", "plugin:vue/recommended"],
    // required to lint *.vue files
    plugins: [
        "vue"
    ],
    "parserOptions": {
        "parser": "babel-eslint",
        "ecmaVersion": 2017,
        /*
        "ecmaFeatures": {
            "classes": true,
            "experimentalObjectRestSpread": true,
            "jsx": true
        }, */
        "sourceType": "module"
    },
    "rules": {
        "indent": ["error", 4, { "SwitchCase": 1 } ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "warn",
            "single"
        ],
        "semi": [
            "warn",
            "always"
        ],
        "no-console": "warn",
        "no-unused-vars": "warn",
        'vue/valid-v-if': 'error'
    }
};

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

<template>
     <div v-bind:id='id' class='alert alert-primary' style='margin: 5px;'>
         <p><b>{{ title }}:</b></p>
         <p>{{ thisRecord.name }} only ({{ current.length }}):</p>
         <p>
             <ul class='bio-tags btsmall'>
                 <li v-bind:class=\"tagtype\" v-for='item in current'>
                     <a :href=\"searchLink(link, item)\" target='_blank'>
                         <span class='bio-icon-tag' style='padding-right: 5px'></span>
                         {{ item }}
                     </a>
                 </li>
             </ul>
             <div class='clearfix'></div>
         </p>
         <p><a v-bind:href=\"href\" target='_blank'>{{ otherRecord['name'] }}</a>
         only ({{ other.length }}):</p>
         <p>
             <ul class='bio-tags btsmall'>
                 <li v-bind:class=\"tagtype\" v-for='item in other'>
                     <a v-bind:href=\"searchLink(link, item)\" target='_blank'>
                         <span class='bio-icon-tag' style='padding-right: 5px'></span>
                         {{ item }}
                     </a>
                 </li>
             </ul>
             <div class='clearfix'></div>
         </p>
         <p>Shared ({{ both.length }})</span>:</p>
         <p>
             <ul class='bio-tags btsmall'>
                 <li v-bind:class=\"tagtype\" v-for='item in both'>
                     <a :href=\"searchLink(link, item)\" target='_blank'>
                         <span class='bio-icon-tag' style='padding-right: 5px'></span>
                         {{ item }}
                     </a>
                 </li>
             </ul>
             <div class='clearfix'></div>
         </p>
     </div>
     <div class='clearfix'></div>`
</template>

<script>
import Vue from 'vue';
import axios from 'axios';
import * as d3 from 'd3';
import * as venn from 'venn.js';

export default {
    delimiters: ['[[', ']]'],
    props: ['current', 'other', 'both', 'title', 'tagtype', 'count', 'id', 'href', 'link'],
    el: '#comparison-area',
    method: {
        searchLink: function (url, item) {
            const self = this;
            if (url.includes('taxonomies') || url.includes('domains')) {
                return '/search?q=&selected_facets=' + url + ':' + item
            } else {
                return '/' + self.recordIds[item];
            }
        }
    }

};
</script>

What did you expect to happen? .vue file to be linted

What actually happened? Please include the actual, raw output from ESLint. .vue files are ignored by the linter, only .js files are linted. What am I doing wrong? Do I need to modify the configuration? Is the plugins:["vue"] instruction needed? Nothing changes with or without it.

Thanks a lot for any suggestion

@Zigur Did you try this? #191 (comment)

[Zigur]

Thanks @EDMJ for your reply, I saw that comment, but I thought that the eslint-plugin-html was not needed to parse .vue files in v3, given this note here.
Should I use it and specify the html-extensions as per #191?

[mysticatea]

How do you do to lint the file?

If you are using CLI, eslint command checks only .js files by default. You have to specify the additional extension:

$ eslint "src/**/*.{js,vue}"
# or
$ eslint src --ext .vue

If you are using editor integrations, most editors check only .js files by default. You have to specify the additional extension. For example, VSCode needs to configure like:

// .vscode/settings.json
{
    "eslint.validate": [
        "javascript",
        {"autoFix": true, "language": "vue"}
    ]
}

[Zigur]

Thanks a lot, I was missing this bit. I enabled the linting of HTML files in Atom and it worked as a charm. Sorry for the hassle, thank you.

[mitar]

This should really be included somewhere in the README.

[chiawendt]

To enable linting in Atom, go to package linter-eslint > settings > "List of scopes to run ESlint on...", add text.html.vue.

[HannibalKcc]

I have no idea how to fix it with WebStorm.

Can someone share it? Thanks

[kunKun-tx]

@HannibalKcc, follow the guide here,
once you add the module and create the .eslintrc with the level of lint of your choice, WebStorm should automatically start linting.

[andre-brdoch]

To enable linting in Atom, go to package linter-eslint > settings > "List of scopes to run ESlint on...", add text.html.vue.

I did this, however, I am still having the same issue with Atom.

• on-the-fly linting does not work.
• on the fly linting does work if I do a change within the <script> tags.
• linting with CLI works