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实现录制屏幕功能并本地保存,这里用的是用的是HBuilder X开发，结合示例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-04-04
解决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(推荐)
这篇文章主要介绍了在Vue和React中如何优雅地使用loading，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
vue2前端导出pdf文件实例demo
在Vue应用中,将页面导出为PDF文件通常涉及到前端技术的组合,下面这篇文章主要给大家介绍了关于vue2前端导出pdf文件的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-09-09
vue项目base64转img方式
这篇文章主要介绍了vue项目base64转img方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue修改swiper框架轮播图小圆点的样式不起作用的解决
这篇文章主要介绍了vue修改swiper框架轮播图小圆点的样式不起作用的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue基于viewer实现的图片查看器功能
这篇文章主要介绍了vue基于viewer实现的图片查看器的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-04-04
vue之el-menu-item如何更改导航菜单栏选中的背景颜色
这篇文章主要介绍了vue之el-menu-item如何更改导航菜单栏选中的背景颜色问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
SSM VUE Axios详解
Axios是在前端开发中常用的一个发送 HTTP 请求的库，用过的都知道,篇文章主要给大家介绍了关于vue的相关资料,需要的朋友可以参考下
2021-10-10
详解Vue的sync修饰符
.sync修饰符算是Vue的所有修饰符中较难理解的一个，本篇文章就带你走近.sync的世界，深入理解后会发现，其实也就那么回事。修饰符和指令息息相关，下面从指令 ->修饰符->.sync修饰符由浅入深地来讲解 .sync的含义及用法。
2021-05-05