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实现录制屏幕功能并本地保存,这里用的是用的是HBuilder X开发,结合示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • 解决vue项目Error:Cannot find module‘xxx’类报错问题

    解决vue项目Error:Cannot find module‘xxx’类报错问题

    当npm运行报错Error:Cannot find module 'xxx'时,通常是因为node_modules文件或依赖未正确安装,解决步骤包括删除node_modules和package-lock.json文件,重新运行npm install,并根据需要安装额外插件,若网络问题导致安装失败
    2024-10-10
  • 优雅地使用loading(推荐)

    优雅地使用loading(推荐)

    这篇文章主要介绍了在Vue和React中如何优雅地使用loading,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue2前端导出pdf文件实例demo

    vue2前端导出pdf文件实例demo

    在Vue应用中,将页面导出为PDF文件通常涉及到前端技术的组合,下面这篇文章主要给大家介绍了关于vue2前端导出pdf文件的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • vue项目base64转img方式

    vue项目base64转img方式

    这篇文章主要介绍了vue项目base64转img方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue修改swiper框架轮播图小圆点的样式不起作用的解决

    vue修改swiper框架轮播图小圆点的样式不起作用的解决

    这篇文章主要介绍了vue修改swiper框架轮播图小圆点的样式不起作用的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue基于viewer实现的图片查看器功能

    vue基于viewer实现的图片查看器功能

    这篇文章主要介绍了vue基于viewer实现的图片查看器的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • vue之el-menu-item如何更改导航菜单栏选中的背景颜色

    vue之el-menu-item如何更改导航菜单栏选中的背景颜色

    这篇文章主要介绍了vue之el-menu-item如何更改导航菜单栏选中的背景颜色问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • SSM VUE Axios详解

    SSM VUE Axios详解

    Axios是在前端开发中常用的一个发送 HTTP 请求的库,用过的都知道,篇文章主要给大家介绍了关于vue的相关资料,需要的朋友可以参考下
    2021-10-10
  • 详解Vue的sync修饰符

    详解Vue的sync修饰符

    .sync修饰符算是Vue的所有修饰符中较难理解的一个,本篇文章就带你走近.sync的世界,深入理解后会发现,其实也就那么回事。修饰符和指令息息相关,下面从指令 ->修饰符->.sync修饰符由浅入深地来讲解 .sync的含义及用法。
    2021-05-05

最新评论