.vue files are not linted

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

[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"}
    ]
}

[mitar]

This should really be included somewhere in the README.