How to enable linting on .vue files in Visual Studio 2019

Question

I have a .Net Core Web Applicationand I use vue on the clinet side. I have configured .eslintrtc file with desired rules but it seems that the editor ignores .vue files. Please se below my configuration

module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: [
        'plugin:vue/essential',
        '@vue/standard'
    ],
    rules: {
        eqeqeq: 'off', // off
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-extend-native': [2, { exceptions: ['Object', 'Array', 'String', 'Number', 'Date'] }],
        indent: ['error', 4, { SwitchCase: 1 }],
        'vue/script-indent': ['error', 4, {
            baseIndent: 1,
            switchCase: 1,
            ignores: []
        }],
        semi: ['error', 'always'],
        'space-before-function-paren': ['error', {
            anonymous: 'always',
            named: 'never',
            asyncArrow: 'always'
        }],
        'prefer-const': 0,
        'no-case-declarations': 0,
        'no-empty-pattern': 0,
        'no-mixed-operators': 0
    },
    parserOptions: {
        parser: 'babel-eslint'
    },
    overrides: [
        {
            files: [
                '**/__tests__/*.{j,t}s?(x)'
            ],
            env: {
                mocha: true
            }
        },
        {
            files: ['*.vue'],
            rules: {
                indent: 'off'
            }
        }
    ]
};

And below are listed the package.json dev dependencies

"devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-plugin-router": "^4.5.7",
    "@vue/cli-service": "^4.1.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "eslint-plugin-vue": "^5.0.0",
    "sass": "^1.18.0",
    "sass-loader": "^10.0.3",
    "vue-template-compiler": "^2.6.12"
}

How can I configure Visual Studio 2019 to automatically linting .vue files? I mention that in Visual studio Code works (but I need to work Visual Studio 2019)

Maybe a duplicate https://stackoverflow.com/questions/44249111/eslint-support-visual-studio-2017 — hendrixchord, Oct 14 '20 at 07:09
@hendrixchord I have already seen this question, the difference is that, in my case, `esLint` doesn't work for files with other extension then `.js` — roroinpho21, Oct 15 '20 at 15:10

score 1 · Answer 1 · answered Jun 25 '21 at 13:49

So currently in visual studio you cannot specify what file types are scanned and the ESLint settings are very limited. Visual Studio will only scan the .js files by default.

ESLint lets you pass in a command-line option '--ext' to specify other file types but there is no way to configure visual studio to do so...

There is an open suggested feature on microsoft's developer community suggesting the change here

How to enable linting on .vue files in Visual Studio 2019

1 Answers1