情景再现
在使用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规则的部分,就实现了两者冲突的解决。