vscode中eslint和prettier格式化规则冲突的简要解决方案

情景再现

在使用vscode时,一般会使用prettier作为默认格式化程序。有可能出现一种情况,即:

使用prettier格式化代码后,并不符合项目eslint的规则。

这时违背eslint规则的代码下方会出现红色标波浪线。假使,我们使用eslint来格式化代码,问题是:

eslint的格式化功能较弱,比如针对jsx、html的格式化就远不如prettier,代码会显得很丑陋。

这样,出现两难情况,使用prettier或者eslint任何一种都不行。
那么,是否可以使prettier与eslint的规则保持一致呢,这样使用prettier格式化时,就已足够了。

答案应该是肯定的,这需要修改项目对prettier的配置或者eslint的配置,使两者不再冲突。

以上的实现,不是本文的主题,篇幅会比较长。
而本文讨论的情况是,

对于某些老项目,可能不允许去修改已有的prettier或者eslint配置,这时,应该怎么处理呢?

事实上,我们可以巧妙的利用vscode的格式化程序选择功能,中和两者的矛盾。

操作方案

假设默认格式化程序是eslint,那么操作如下:

  • 鼠标右键,选择文档格式设置方式。
  • 在弹出的下拉列表中选择prettier。这时已经使用了prettier格式化了代码。
  • ctrl+shift+p,然后下拉列表中选择格式化文档。

假设你的默认格式化程序是prettier,那么稍作改变即可,相信你已经知道怎样操作,不再赘述。
这样,你先使用prettier格式化了代码,再使用eslint去纠正了不符合eslint规则的部分,就实现了两者冲突的解决。

猜你喜欢

转载自blog.csdn.net/u012443286/article/details/113732755
今日推荐