vscode中prettier和eslint换行缩进冲突的问题
作者：Simorel
这篇文章主要介绍了vscode中prettier和eslint换行缩进冲突的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
prettier
Javascript
// Input
const example1 =
someValue === 'a' ? 'hello world, branch a'
: someValue === 'b' ? 'hello world, branch a && b'
: someValue === 'c' ? 'hello world, branch a && b && c'
: someValue === 'd' ? 'hello world, branch a && b && c && d'
: null;
const example2 =
someValue === 'a'
? someValue === 'b'
? someValue === 'c'
? 'hello world, branch a && b && c'
: 'hello world, branch a && b && !c'
: 'hello world, branch a && !b'
: null;
// Output (Prettier 1.14)
const example1 =
someValue === "a"
? "hello world, branch a"
: someValue === "b"
? "hello world, branch a && b"
: someValue === "c"
? "hello world, branch a && b && c"
: someValue === "d"
? "hello world, branch a && b && c && d"
: null;
const example2 =
someValue === "a"
? someValue === "b"
? someValue === "c"
? "hello world, branch a && b && c"
: "hello world, branch a && b && !c"
: "hello world, branch a && !b"
: null;
// Output (Prettier 1.15)
const example1 =
someValue === "a"
? "hello world, branch a"
: someValue === "b"
? "hello world, branch a && b"
: someValue === "c"
? "hello world, branch a && b && c"
: someValue === "d"
? "hello world, branch a && b && c && d"
: null;
const example2 =
someValue === "a"
? someValue === "b"
? someValue === "c"
? "hello world, branch a && b && c"
: "hello world, branch a && b && !c"
: "hello world, branch a && !b"
: null;
异常展示
prettier 格式化后输出结果
<div
v-if="
statusSetting.a === element.status ||
statusSetting.b === element.status
"
class="ticket__background"
/>
eslint冲突输出结果
<div
v-if="
statusSetting.a === element.status ||
statusSetting.b === element.status
"
class="ticket__background"
/>
解决方案
方案一
工作区禁用eslint
方案二
修改 vscode 配置
/** 保存文档时自动格式化 */
"editor.formatOnSave": false,
/** 保存时按照哪个规则进行格式化(上面的保存文档时自动格式化必须关闭否则会有冲突) */
"editor.codeActionsOnSave": {
"source.fixAll": true,
},
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。