Use the latest vue-eslint-parser

[masterofnothing11]

First of all I would like to state that I'm fully aware this is a question to stackoverflow but since the community around Encore is not that big I see no options other than to come to the repository itself.

Enviroment:

• Docker version 19.03.3
• Linux Mint 19.1 Tessa

Basically I'm getting the famous error error Use the latest vue-eslint-parser. See also https://vuejs.github.io/eslint-plugin-vue/user-guide/#what-is-the-use-the-latest-vue-eslint-parser-error vue/html-indent. I have tried all the solutions that I could find on Google but nothing seems to work.

.eslintrc.js

module.exports = {
    "parser": "vue-eslint-parser",
    "parserOptions": {
        parser: "babel-eslint",
        "allowImportExportEverywhere": true,
        "ecmaFeatures": {
            "legacyDecorators": true,
            "modules": true
        },
        "ecmaVersion": 6,
        "sourceType": "module",
    },
    "extends": [
        "plugin:vue/base",
        "airbnb-base"
    ],
    "rules": {
        ...
        "vue/html-indent": [2, 4],
        ...
    },
    "env": {
        browser: true,
        es6: true,
        node: true
    },
};

webpack.config.js

...
.enableEslintLoader(eslLinterLoaderOptions => {
        eslLinterLoaderOptions.configPath = path.resolve(__dirname, '.eslintrc.js');
        eslLinterLoaderOptions.ignorePath = path.resolve(__dirname, '.eslintignore');
        eslLinterLoaderOptions.cache = false;
    })
...

package.json

...
  "devDependencies": {
    "@symfony/webpack-encore": "^0.27.0",
    "babel-eslint": "^10.0.1",
    "copy-webpack-plugin": "^4.5.3",
    "eslint": "^6.4.0",
    "eslint-plugin-vue": "^5.2.2",
    "ts-loader": "^5.3.0",
    "tslint": "^5.16.0",
    "typescript": "^3.4.5"
  },
...

Every time I run the command yarn encore --watch ESLint does it thing and check the files and the error mentioned above is thrown in almost every file.

I have tried removing the node_modules/ folder and also upgrading ESLint.

Any help would be highly appreciated

[Kocal]

Hi, it's because Encore force parser option to babel-eslint and it's not compatible with eslint-plugin-vue.

See #574 for more information.

As a workaround you can use the following code to let Encore/ESLint lint your .vue files:

Encore
  .enableEslintLoader(options => {
      delete options.parser;
  })
  .configureLoaderRule('eslint', loader => {
      loader.test = /\.(jsx?|vue)$/;
  })

[masterofnothing11]

@Kocal Completely worked for me. Thank you so much

[Kocal]

@masterofnothing11 since your issue has been resolved, can you close your issue please? Thanks! :)