.vue file with mustache code-format conflict with eslint-plugin-vue

Here is a demo.

<template>
<div>
{{ foo }}<span id="id" style="width: 20px">span content</span>
</div>
</template>

<script>
export default {
name: 'Test',
data() {
return {
foo: 'bar'
}
},
}
</script>

Key rules is:

- vue/max-attributes-per-line

- vue/html-indent

Two formart result:

<template>
<!--ESLint Result(Fix ESLint Problems)-->
<div>
{{ foo }}<span
id="id"
style="width: 20px">span content</span>
</div>
</template>

<template>
<!--Webstorm format Result(Ctrl+Alt+L)-->
<div>
{{ foo }}<span
id="id"
style="width: 20px">span content</span>
</div>
</template>

Under the mustache expression, the formatting result of webstorm is missing two spaces.

How should I set up to make the two results consistent?

Thanks!

2 comments
Comment actions Permalink

With settings like

The attributes are indented for me:

<template>
<div>
{{ foo }}<span
id="id"
style="width: 20px">span content</span>
</div>
</template>
0
Comment actions Permalink

Thank you for your reply.

In fact, after trying your settings, it did not solve the problem, so I thought of editorconfig.

When I disable editorconfig file(by click "Disable" right behind Settings may be overridden by EditorConfig.), the problem solved.

Here is my editorconfig:

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf

This must be magic!

0

Please sign in to leave a comment.