search

meteorlxy / eslint-plugin-prettier-vue

:ok_hand: ESLint plugin for Prettier formatting, which is better for Vue SFC
MIT License
115 stars 9 forks source link

Problem with eslint `space-before-function-paren` rule in .js files #4

Closed jwkicklighter closed 4 years ago

jwkicklighter commented 4 years ago

We use the eslint rule space-before-function-paren in our projects, which is standard from Vue. Having this rule enabled while using eslint-plugin-prettier-vue works fine in the <script> tag of Vue SFC files, but causes a strange error in normal .js files.

image

note: there is no . between constructor and the parens, it's just a space: constructor (initialData) {

The issue may not be specifically from this plugin, but I can't seem to find any mention of it in other prettier/eslint plugins. Prettier maintainers are discussing adding the space before paren option to that project, which would get rid of the need to rely on the eslint rule, but that issue has been open for almost 2 years now.

meteorlxy commented 4 years ago

We use the eslint rule space-before-function-paren in our projects, which is standard from Vue

Actually, it's not a standard from Vue. It comes from a style guide named "Javascript Standard Style". Notice that "standard" is only part of its name, but it is NOT an official "standard".

Assuming you initialized your project via vue-cli, and you can choose "standard style" and "airbnb style". space-before-function-paren is enabled in the former, and disabled in the latter.

Prettier disable this rule, so it might confilict with the "standard" style. For this, prettier provides eslint-config-prettier/standard to disable those rules with confilictions.

there is no . between constructor and the parens, it's just a space

Yes, the dot "·" displayed here means a space indeed. Notice that dot "·" and dot "." are different.

Prettier maintainers are discussing adding the space before paren option to that project

Now you may know why the discussion happened. You can just take it as a difference between two widely used style guide.

In fact, airbnb style is more popular than standard style. You may be more familiar with standard style, because vue itself uses this style, but this style guide is not so popular in other ecosystems.

Just to mention, vue2 uses standard style, and vue-next / vue3 uses prettier style now.