Encore, Vue, Eslint - 使用最新的 vue-eslint-parser

Question

大家好，我遇到了 vue-eslint-parser 的问题。我正在尝试在 Encore 上运行它

/var/app/assets/js/app.js 1:1 错误使用最新的 vue-eslint-parser。另见https://github.com/vuejs/eslint-plugin-vue#what-is-the-use-the-latest-vue-eslint-parser-errorvue/valid-v-pre 1:1 错误使用最新的 vue-eslint-parser。另见https://github.com/vuejs/eslint-plugin-vue#what-is-the-use-the-latest-vue-eslint-parser-errorvue/no-duplicate-attributes 1:1 错误使用最新的 vue-eslint-parser。另见https://github.com/vuejs/eslint-plugin-vue#what-is-the-use-the-latest-vue-eslint-parser-errorvue/no-textarea-mustache

无法弄清楚发生了什么，错误中的链接无济于事 我在 docker 容器中运行 yarn

docker-compose.yaml 文件

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

"parser": "babel-eslint" 和 Vue 插件之间似乎存在冲突。

• 来源：https://github.com/vuejs/eslint-plugin-vue/issues/30
• 此处描述的解决方案：解决方法在这里：https://github.com/mysticatea/vue-eslint-parser#-options "parserOptions": {"parser": "babel-eslint"} 应该可以工作。

---

这是一个完整的工作 .eslintrc.js 文件（至少在我的项目中）：

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