Encore, Vue, Eslint - Use the latest vue-eslint-parser - symfony

Question

Hi guys I'm having an issue with vue-eslint-parser. I'm trying to run it on Encore
/var/app/assets/js/app.js
1:1 error Use the latest vue-eslint-parser. See also https://github.com/vuejs/eslint-plugin-vue#what-is-the-use-the-latest-vue-eslint-parser-error vue/valid-v-pre
1:1 error Use the latest vue-eslint-parser. See also https://github.com/vuejs/eslint-plugin-vue#what-is-the-use-the-latest-vue-eslint-parser-error vue/no-duplicate-attributes
1:1 error Use the latest vue-eslint-parser. See also https://github.com/vuejs/eslint-plugin-vue#what-is-the-use-the-latest-vue-eslint-parser-error vue/no-textarea-mustache
Can't figure out what's going on, link in an error doesn't help
I'm running yarn in docker container
docker-compose.yaml file
yarn:
image: node:10
command: yarn run install_watch
working_dir: /var/app
volumes:
- .:/var/app/:cached
environment:
NPM_TOKEN: "${NPM_TOKEN}"
webpack.config.js
var Encore = require('#symfony/webpack-encore');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('app', './assets/js/app.js')
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableEslintLoader()
.enableSassLoader()
.enableVueLoader()
;
module.exports = Encore.getWebpackConfig();
package.json
{
"devDependencies": {
"#symfony/webpack-encore": "^0.22.0",
"#vue/cli-plugin-eslint": "^3.4.1",
"babel-eslint": "^8.2.1",
"eslint-loader": "^1.9.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.0.1",
"vue": "^2.6.6",
"vuex": "^3.1.0",
"vue-loader": "^15.0.11",
"vue-router": "^3.0.2",
"vue-template-compiler": "^2.6.6",
"webpack-notifier": "^1.6.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress",
"install_prod": "yarn install && yarn run build",
"install_watch": "yarn install && yarn run watch"
}
}
.eslintrc.json
{
"env": {
"browser": true,
"es6": true
},
"extends": [
"eslint:recommended",
"plugin:vue/recommended"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"parser": "babel-eslint",
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"vue"
],
"rules": {
}
}

Answer 1

Seems like there is a conflict between "parser": "babel-eslint" and the Vue plugin.
Source : https://github.com/vuejs/eslint-plugin-vue/issues/30
Solution described here : The workaround is here: https://github.com/mysticatea/vue-eslint-parser#-options
"parserOptions": {"parser": "babel-eslint"} should work.
Here is a complete working .eslintrc.js file (at least on my project):
module.exports = {
// Use only this configuration
root: true,
// File parser
parser: 'vue-eslint-parser',
parserOptions: {
// Use babel-eslint for JavaScript
'parser': 'babel-eslint',
'ecmaVersion': 2017,
// With import/export syntax
'sourceType': 'module'
},
// Environment global objects
env: {
browser: true,
es6: true,
},
extends: [
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
'standard',
// https://github.com/vuejs/eslint-plugin-vue#bulb-rules
'plugin:vue/recommended',
]
,}