Eslint-plugin-vue: Compatibility with ESLint 4

[BenoitZugmeyer]

Hi, eslint-plugin-html author here. ESLint released its v4, and I released a v3 of my plugin to support it.

I've got some users who are using the vue plugin reporting issues because the html plugin version is fixed to v2. Would you mind changing the html plugin version to v3?

As I understand, you are planing to move away from the html plugin. I don't mind, but I think that in the meantime, users should be allowed to upgrade to ESLint v4.

[michalsnik]

Hi @BenoitZugmeyer. This is a problem indeed, and we should probably fix it, but in the meanwhile we just released eslint-plugin-vue@beta, which basically is 3.0.0 (we merged eslint-plugin-vue-trial with this plugin) and we encourage people to try our new release. It will be the official version as soon as we gather some feedback from users. The sooner the better :) Documentation is still on dev branch but soon it will me on master too.

[yyx990803]

Ah well it's a bit awkward now because eslint-plugin-html@3 has some breaking changes, so if we bump it it's technically a breaking change for eslint-plugin-vue too, but we just used the 3.0.0 tag
😂

Two options:

1. deprecate 3.0.0, release 2.x with ESLint 4 compat as 3.0.1;

2. keep 3.0.0, release 2.x with ESLint 4 compat as 2.1.0.

Option (2) is technically violating semver, but the breaking changes are relatively small and it would probably be less confusion for the users.

[michalsnik]

Our 3.0.0 resolves this issue and adds new rules so it's the recommended way of getting rid of this problem. But if we want to update previous release I'm opting for 2nd option @yyx990803 proposed to not confuse users too much.

@BenoitZugmeyer is [email protected] compatible with both [email protected] and [email protected]?

[BenoitZugmeyer]

Yes, compatible with all versions of eslint starting from v2.

[vvo]

Hi, I just tried to use https://github.com/vuejs/eslint-plugin-vue/tree/dev (@beta) without any luck. Seems like the README is providing an installation procedure that does not work.

There's no recommended.js file inside the node_modules/eslint-plugin-vue

[michalsnik]

Hey @vvo, you either need to specify 3.0.0 in package.json or do "npm install eslint-plugin-vue@beta". Readme is being updated as we speak. Stay tuned, it should be on master branch soon, probably tomorrow :)

[vvo]

I did install @beta but then it said it was not able to find eslint-plugin-vue, if you look at the package.json inside the installed npm package, it has a main to lib/index.js but there's no lib/index.js

[michalsnik]

Try now @vvo, I just merged #23 and released 3.0.1, still as @beta. That's actually weird because I installed it before publishing and it worked nice, but it apparently shouldn't regarding the location of the index.js. Anyway it's now fixed and I hope it works now. Please let me know when you try it.

[vvo]

Do I need to somehow enforce eslint to also pass on .vue files (like with the html plugin)? If so we should maybe say so in readme?

[vvo]

I cannot get it work:

> npm run lint

> [email protected] lint /Users/vvo/Dev/Algolia/vue-instantsearch
> eslint .

Cannot read property 'some' of undefined
TypeError: Cannot read property 'some' of undefined
    at Object.isUnambiguousModule [as isModule] (/Users/vvo/Dev/Algolia/vue-instantsearch/node_modules/eslint-module-utils/unambiguous.js:29:18)
    at Function.ExportMap.parse (/Users/vvo/Dev/Algolia/vue-instantsearch/node_modules/eslint-plugin-import/lib/ExportMap.js:348:20)
    at Function.ExportMap.for (/Users/vvo/Dev/Algolia/vue-instantsearch/node_modules/eslint-plugin-import/lib/ExportMap.js:326:25)
    at Function.ExportMap.get (/Users/vvo/Dev/Algolia/vue-instantsearch/node_modules/eslint-plugin-import/lib/ExportMap.js:284:23)
    at processBodyStatement (/Users/vvo/Dev/Algolia/vue-instantsearch/node_modules/eslint-plugin-import/lib/rules/namespace.js:58:47)
    at Array.forEach (native)
    at Linter.Program (/Users/vvo/Dev/Algolia/vue-instantsearch/node_modules/eslint-plugin-import/lib/rules/namespace.js:87:14)
    at emitOne (events.js:101:20)
    at Linter.emit (events.js:191:7)
    at NodeEventGenerator.applySelector (/Users/vvo/Dev/Algolia/vue-instantsearch/node_modules/eslint/lib/util/node-event-generator.js:265:26)

Eslint project: https://github.com/algolia/eslint-config-algolia/tree/feat/eslint-plugin-vue

You can try in a new repo:

terminal

yarn add \
eslint babel-eslint prettier \
eslint-config-algolia@next eslint-config-prettier \
eslint-plugin-import eslint-plugin-jest eslint-plugin-prettier \
--dev

yarn add [email protected] --dev

.eslintrc.js

module.exports = {
  extends: 'algolia/vue',
};

The try to lint anything, it will fail.

[vvo]

Also does it lint JavaScript inside <script> code blocks of .vue components?

[vvo]

Thanks for the detailed explanation, I am unsure I can fix that myself, maybe @ljharb has more knowledge on this parse and parserServices API mismatch between those two eslint plugins.

In the meantime, any way I can still use eslint-plugin-vue, maybe by disabling the import plugin on vue files or smg?

[ljharb]

If it's not a documented API, and nobody's requested it before on eslint-plugin-import, then naturally we'd have no idea about it.

Please feel free to file an issue and/or a PR on eslint-plugin-import.

Separately, the HTML plugin should not violate semver; it should backport v4 compat to the 2.x line without additional changes. Violating semver will never reduce user confusion.

[mysticatea]

I made a workaround for eslint-plugin-import in vue-eslint-parser. I expect the integration problem is solved in the next patch release.

[michalsnik]

Problem with eslint-plugin-import plugin should be fixed in: v3.1.1 which I just released. I also released v2.1.0 which now supports eslint-plugin-html and Eslint 4.

[michalsnik]

Feel free to reopen this issue if you have more questions.

[vvo]

Hi I am having a different issue now that this one was fixed:

I guess that one just means that prettier is unable to go through those template tags. We are using prettier on the whole codebase, I don't know the state of this for now.

https://github.com/prettier/prettier/issues/2097
https://github.com/prettier/prettier/issues/1674

cc @vjeux I guess prettier is unable to format <template> nowadays while our eslint configuration uses eslint-plugin-prettier and try to lint .vue and .js files? Thanks

[vjeux]

@vvo: we're working on printing vue files (both the html part of it and the inline js) but it's not released (only in master) and very early on. You should find a way to only run prettier on js files for now or help out with the printing of vue files.

Hopefully in the next few weeks proper vue support should be good to go. I'm pretty excited about it :)