Is two versions eslint-version-vue essential?

[Priestch]

Tell us about your environment

• ESLint version: 5.9.0
• eslint-plugin-vue version: 5.0.0-beta.5
• Node version: v8.11.3

Please show your full configuration:

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/recommended', '@vue/prettier'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    curly: 'error',
    eqeqeq: 'error',
    'no-trailing-spaces': 'error',
    'vue/prop-name-casing': 'error',
    'vue/html-closing-bracket-spacing': 'error',
    'vue/mustache-interpolation-spacing': 'error',
    'prettier/prettier': [
      'error',
      {
        trailingComma: 'all',
        singleQuote: true,
        bracketSpacing: true,
        jsxBracketSameLine: true,
      },
    ],
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
};

What did you do?

yarn lint

# package.json
"scripts": {
    "lint": "vue-cli-service lint --fix && vue-cli-service lint:style --fix",
    "lint:style": "vue-cli-service lint:style"
  },

What did you expect to happen?
yarn lint should only fix normal format issues like before, but it changed almost all project files.
I try to figure out what happended, only find a broken yarn.lock with not resolved git conflicts. So I fixed the lock file, and I also find two version
eslint-version-vue in yarn.lock, is both versions essential? or maybe this two versions plugin cause such a mess?

eslint-plugin-vue@4.7.1 may caused by dependencies of cli-plugin-eslint in package.json.

Two version eslint-plugin-vue log

yarn why v1.12.3
[1/4] Why do we have the module "eslint-plugin-vue"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "eslint-plugin-vue@5.0.0-beta.5"
info Has been hoisted to "eslint-plugin-vue"
info This module exists because it's specified in "devDependencies".
info Disk size without dependencies: "476KB"
info Disk size with unique dependencies: "2.46MB"
info Disk size with transitive dependencies: "9.16MB"
info Number of shared dependencies: 12
=> Found "@vue/cli-plugin-eslint#eslint-plugin-vue@4.7.1"
info This module exists because "@vue#cli-plugin-eslint" depends on it.
info Disk size without dependencies: "420KB"
info Disk size with unique dependencies: "2.41MB"
info Disk size with transitive dependencies: "9.11MB"
info Number of shared dependencies: 12

What actually happened?

Before lint

<el-table-column
        prop="id"
        width="80"
        align="center"
        label="ID"
      />

After lint

<ElTableColumn prop="id" width="80" align="center" label="ID" />

[mysticatea]

Thank you for this issue.

But I'm not sure how the vue-cli-service works.
@vuejs/vue-cli would you take a look this issue?

[sodatea]

In v3.1 we upgraded the default eslint version to v5 but we did not want to break projects created by @vue/cli v3.0.x, hence the co-existence of two versions. Projects created with old versions of @vue/cli would default to the internal ESLint dependency, while new ones explicit specify the required versions in package.json.

Related commits:
vuejs/vue-cli#2560
vuejs/vue-cli@7ccf7b3#diff-a02a5204c2efd804c04f9b1277d251f5R13

[sodatea]

Maybe the issue was fixed by this: vuejs/vue-cli#2932
Please check your @vue/eslint-config-prettier version and make sure it's greater than 4.0.1

[Priestch]

It's 4.0.1 already. I checked the latest released version is 4.0.1, am I missed anything?

[sodatea]

Ahhh I mean greater than or equal to…
Then it might be an unknown bug. We’ll try to reproduce and fix it. Thanks for your report.

[michalsnik]

Is the last problem here now that ESLint formats all files @Priestch ? And the following output:

<ElTableColumn prop="id" width="80" align="center" label="ID" />

Is not what you'd expect it to be?

[Priestch]

Yes, I want to keep this format.

<el-table-column
        prop="id"
        width="80"
        align="center"
        label="ID"
      />

And I try to figure out the reason caused all project files be formatted.

[michalsnik]

The reason is prettier @Priestch. Since not long ago Prettier supports Vue templates, and if something is able to fit within the set limit it will be in one line. I bet if you add few more attributes it'll be wrapped.
If you use prettier configuration - it disables all vue rules responsible for formatting and does it all by itself: https://github.com/prettier/eslint-config-prettier/blob/master/vue.js

[Priestch]

@michalsnik It seems you got the right answer. Opinionated prettier have conflicts with eslint-plugin-vue rules.

I want to keep the old kebab-case component tag name format, What should I do except wait the prettier 1.15.3?

[Priestch]

Finally, I figure out what really happened. I found a broken yarn.lock with git conflicts and asked my teammate to fix. He resolve the conflicts, but all previous packages with locked version upgrade to latest.

Thank all you guys!

[michalsnik]

Glad you figured it out :)