Vue-cli: IDE ESLint integrations do not get full configuration

[yangmingshan]

Version

3.0.0-beta.6

Reproduction link

https://github.com/yangmingshan/vue-cli-demo

Steps to reproduce

If use import() ESLint will show error message [eslint] Parsing error: Unexpected token import in VS Code, but npm run lint is ok, don't know why.

What is expected?

ESLint can parse experimental syntax

What is actually happening?

ESLint can't parse experimental syntax

---

eslint-config-prettier eslint-config-standard eslint-config-airbnb both use default parser which can't parse experimental syntax like import() for now, use babel-eslint can solve this problem.

Is this on purpose or a mistake?

If this is a mistake, I'm happy to open a PR 😜

[LinusBorg]

Well, since you say npm run lint runs fine, it must be a problem with your editor's eslint implementation, which we can't control.

[yangmingshan]

Ok, add the reproduction, can you try it. In src/router.js.

In my Sublime Text 3 have same problem.

[LinusBorg]

Well, you commented out babel-eslint from the eslint config, of course it won' work? I don't understand what this is supposed to demonstrate, sorry.

[LinusBorg]

Oh, are you saying that babel-eslint is not included in the generated .eslintrc file?

[yangmingshan]

vue-cli 3.0.0-beta.6 not use babel-eslint by default, babel-eslint is added by me. so I commented out.

The question is, is there error message in your editor. And if so, is it expected. Thanks.

[yangmingshan]

Yes, babel-eslint is not included in the generated .eslintrc file. And is it should be included in @vue/eslint-config-prettier etc.

[LinusBorg]

vue-cli 3.0.0-beta.6 not use babel-eslint by default

I think we may be missing this entry here:

parserOptions: {
  parser: 'babel-eslint'
}

according to this

I can't run the reproduction until this evening, roughtly 9-10 hours away.

Thanks for the report!

[doppelmutzi]

I had the same problems. ESLint (any option) with Jest lead to problems with imports in Jest files (at least within Visual Studio Code). npm run lint does not complain.

I could fix the problem with 2 additional manual steps.

I generate the project $ npx -p @vue/cli vue create .
Then I selected the options (in the following the relevant choices)

• I selected Linter / Formatter and Unit Testing
• I selected ESLint with error prevention only
• I selected Jest

Then npm run lint works but I get the error in Visual Studio Code as seen in the screenshot. To fix this I had to do the following:

• add babel-preset-env: yarn add --dev babel-preset-env
• replace in .babelrc the content with the following { "presets": [ [ "env", { "modules": false } ] ], "env": { "test": { "presets": ["env"] } } }

[luxueyan]

Same problems too! I have to use 'babel-eslint' and change 'extend' to standard then it work well！
But you must install these modules.

    "eslint-config-standard": "^11.0.0",
    "eslint-plugin-import": "^2.10.0",
    "eslint-plugin-node": "^6.0.1",
    "eslint-plugin-promise": "^3.7.0",
    "eslint-plugin-standard": "^3.0.1",

[xierenyuan]

me too！new can only modify the default eslint config to work.

[yyx990803]

This is because vue-cli-service lint has additional config that's not included in the .eslintrc file, so your IDEs can't figure it out.

Not really a bug of vue-cli itself, but can be improved so that it works with IDE linters out of the box.

[dhensche]

Is there a good reason for the default plugin eslint config to differ from the base config that is used for the vue-cli-service lint command? If not, I could submit a PR that just uses the lint command base config as the default config for project generation

[yozman]

the same error with 3.0.0-beta.10