vscode中prettier和eslint换行缩进冲突的问题

更新时间：2023年10月20日 10:17:12 作者：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,
},

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue实现个人信息查看和密码修改功能
本文通过实例代码给大家介绍了vue实现个人信息查看和密码修改功能，文中给大家补充介绍了vue实现密码显示隐藏切换功能，非常不错，具有一定的参考借鉴价值，感兴趣的朋友一起看看吧
2018-05-05
Vue之版本升级后不兼容的问题及解决过程
本文将探讨 Vue 版本升级后常见的不兼容问题,并提供相应的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-03-03
使用vue-router切换页面时实现设置过渡动画
今天小编就为大家分享一篇使用vue-router切换页面时实现设置过渡动画。具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
vue-simple-verify实现滑动验证码功能
登录页面经常会需要滑动验证码的情况,使用vue插件vue-simple-verify就可以轻松实现,下面小编给大家分享vue-simple-verify实现滑动验证码功能,感兴趣的朋友一起看看吧
2024-06-06
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
这篇文章主要介绍了Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-05-05
解决Vue运算符报错:Syntax Error: Unexpected token问题
这篇文章主要介绍了解决Vue运算符报错:Syntax Error: Unexpected token问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-01-01
深入理解vue输入框字符限制的优化设计方案
限制输入框字符是一项需要结合技术实现与用户体验的综合设计,通过实时限制、提交校验与性能优化,开发者可以高效解决输入限制问题,同时提升用户满意度和数据安全性,本文给大家介绍vue输入框字符限制的优化设计,感兴趣的朋友跟随小编一起看看吧
2024-12-12
Vue中keep-alive的两种应用方式
这篇文章主要介绍了Vue中keep-alive的两种应用方式，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
2020-07-07
vue.config.js配置报错解决办法(可能是与webpack混淆)
在Vue.js开发过程中,vue.config.js文件是用于配置项目的,特别是对于开发环境的设置,这篇文章主要给大家介绍了关于vue.config.js配置报错解决的相关资料,可能是与webpack混淆,需要的朋友可以参考下
2024-06-06
vue键盘事件keyup、keydown的作用
这篇文章主要介绍了vue键盘事件keyup、keydown的作用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-12-12