Possible incompatibility with enableEslintLoader() and eslint-vue-plugin

[Kocal]

Hi, I am the frontend dev that was blaming webpack-encore one year ago 👀

First, let me congratulate you @weaverryan and the community, webpack-encore seems has become very mature over time. It's nice to have webpack 4, Babel 7 and ESLint working out of the box.

Even if I still prefer using vue-cli for a SPA (with Symfony as API) or a raw simple webpack config for smaller project, webpack-encore is really a must have for more oriented Symfony projects.

---

So I'm facing an issue with using the ESLint loader with eslint-plugin-vue for linting .vue files.

This is how I configure the eslint-loader:

Encore.enableEslintLoader(config => {
  config.configFile = __dirname + '/.eslintrc';
});

This is my .eslintrc:

{
  "extends": [
    "airbnb-base",
    "plugin:vue/recommended",
    "@yproximite/base"
  ],
  "rules": {
      ...
   }
}

And this is my ESLint dependencies:

❱Development❰ app@my-app.vm:/srv/app|⇒  yarn list --pattern eslint  
yarn list v1.12.3
├─ @yproximite/eslint-config-base@0.2.0
│  ├─ babel-eslint@10.0.1
│  └─ eslint-scope@3.7.1
├─ babel-eslint@8.2.6
│  └─ eslint-scope@3.7.1
├─ eslint-config-airbnb-base@13.1.0
├─ eslint-config-prettier@3.3.0
├─ eslint-import-resolver-node@0.3.2
├─ eslint-loader@1.9.0
├─ eslint-module-utils@2.2.0
├─ eslint-plugin-import@2.14.0
├─ eslint-plugin-prettier@3.0.0
├─ eslint-plugin-vue@5.0.0
├─ eslint-restricted-globals@0.1.1
├─ eslint-scope@4.0.0
├─ eslint-utils@1.3.1
├─ eslint-visitor-keys@1.0.0
├─ eslint@5.9.0
└─ vue-eslint-parser@4.0.3

And this is what happens when running webpack-encore:

This is a webpack-encore issue because everything is fine when running ESLint manually:

I followed the link What is the "Use the latest vue-eslint-parser" error?, and it's a problem of ESLint parser configuration.

We should do this to fix the problem:

- "parser": "babel-eslint",
  "parserOptions": {
+     "parser": "babel-eslint",
      "ecmaVersion": 2017,
      "sourceType": "module"
  }

But the parser options is hardcoded in loaders/eslint.js:

So I updated my code and tried this:

Encore.enableEslintLoader(config => {
  config.configFile = __dirname + '/.eslintrc';
  delete config.parser;
});

Screenshot

or even this:

Encore.enableEslintLoader(config => {
  config.configFile = __dirname + '/.eslintrc';
  config.parserOptions = Object.assign({}, config.parserOptions || {}, {
    parser: 'babel-eslint'
  });
  delete config.parser;
});

Screenshot

I have no more eslint-loader errors, but eslint-loader seems to not be working anymore 🤷‍♂️

Does someone already faced this issue?
I will do more investigation and see if I can help more.

Thanks!

[Kocal]

That's really strange.
This is the final configuration that ESLint use (console.log(config) here) and this is what I got:

Options parser and parserOptions.parser are correct, but webpack-encore still not displays ESLint warnings/errors 😞

This is what I have when running ESLint manually, and everything works fine:

[elmariachi111]

The problem is imho not in the configuration but rather in the loader rule setup: the eslint loader that encore configures never adds .vue files to its rules. Added it in my PR when eslint & vue loader are both active. With that patch you can

.eslintrc.json

module.exports = {
    root: true,
    parserOptions: {
      parser: "babel-eslint",
      ecmaVersion: 2017,
      sourceType: 'module',
    },
    env: {
      browser: true,
    },
    extends: ["standard", "plugin:vue/recommended"],
    plugins: ['vue'],
  };

webpack.config.js

const eslintrc = require('./.eslintrc.json')
//...
.enableVueLoader()
  .enableEslintLoader(options => {
    return eslintrc
  })
//...

and I think these are all the dependencies:
yarn add -D eslint eslint-config-standard eslint-loader eslint-plugin-import eslint-plugin-promise eslint-plugin-standard vue-eslint-parser

plays well together with vscode's js language server when this is set:

{
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      { "language": "vue", "autoFix": true }
    ],
    "vetur.validation.template": false,
    "eslint.alwaysShowStatus": true,
    "eslint.autoFixOnSave": true
  }

good luck!

[Kocal]

If someone has the same issue, since #509 you will be able to write this:

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