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

问题

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": {
    }
}

回答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',
    ]
,}

来源：https://stackoverflow.com/questions/54823909/encore-vue-eslint-use-the-latest-vue-eslint-parser

标签

symfony

Vue.js

Webpack

eslint

webpack-encore