Webpack-encore: Possible incompatibility with `enableEslintLoader()` and eslint-vue-plugin

[Kocal]

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

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❰ [email protected]:/srv/app|⇒  yarn list --pattern eslint  
yarn list v1.12.3
├─ @yproximite/[email protected]
│  ├─ [email protected]
│  └─ [email protected]
├─ [email protected]
│  └─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]

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 :man_shrugging:

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 :disappointed:

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)$/
  });