具体表现为
eslint虽然配置如下
module.exports = {
root: true,
env: {
'vue/setup-compiler-macros': true, // 处理error ‘defineProps’ is not defined no-undef
node: true,
es6: true,
browser: true
},
parser: 'vue-eslint-parser',
parserOptions: {
ecmaVersion: 'latest',
parser: '@typescript-eslint/parser'
},
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:vue/vue3-recommended',
'plugin:prettier/recommended'
],
rules: {
'vue/max-attributes-per-line': [
'error',
{
singleline: 1,
multiline: 1
}
]
}
};
但是我-fix
后,格式化的代码确实不像样子
<template>
<hello-world user-msg="Hello Vue 3"
user-name="zhangsan" />
</template>
经过众多查证后,才了解到,是eslint-plugin-vue
和prettier
这两个插件冲突。去prettier或者eslint-plugin-prettier既可以看到有人提出issue
如:https://github.com/prettier/prettier/issues/5467
目前是无解状态,
但是如果因为这个就放弃使用prettier也不太合适,牺牲太大
好在prettier从v2.6.0以上,也勉为其难的支持了vue的 singleAttributePerLine
。很好用,唯一不足的是
它连 script
和style
也换行了,不过这是小事情,可以忍受
https://github.com/prettier/prettier/issues/12216
https://github.com/prettier/prettier/issues/12787
<script
setup
lang="ts"
>
...
</script>
<style
scoped
lang="scss"
>
...
</style>