到底如何配置才能在-vscode-中正常使用-eslint-和-prettier

jiezi

5 年前

心中一直有个疑惑，添加 –fix 参数后的 eslint 是否能替代 prettier 作为 JavaScript 格式化工具。

凑巧网上正好看到一篇文章《到底如何配置，才能在 vscode 中正常使用 eslint 和 prettier？》聊了类似的问题。于是，顺着这个思路，我也来说一说。

一个是 lint 工具，一个是格式化工具，两者本各司其职，相得益彰。但偏偏 eslint 有个附属功能也能干格式化的活，于是问题随之而来——同干一件事，规则冲突时，到底该听谁的呢？

demo

// .prettierrc
{"trailingComma": "all"}

// code 
var a = [1, 2]

你会惊奇的发现，prettier 并没有在数组后添加逗号。其实，prettier 的这个配置等价于

.eslintrc.js

{
    rules: {'comma-dangle': [2, 'only-multiline'],
    }
}

如果你希望总是显示尾部的逗号，按照下面配置，那么，冲突已发生

{
    rules: {'comma-dangle': [2, 'always'],
    }
}

vscode 插件 prettier-eslint 的出现，提供了一个思路：

Code ➡️ prettier ➡️ eslint –fix ➡️ Formatted Code

最终结果以 prettier 的为准，但这个结果可能并不符合 eslint 配置的规则。

我认为是可以替代的，有以下几点理由：

eslint-config-prettier 与 eslint-plugin-prettier 两个包可以佐证。虽然 eslint-config-prettier 是这么介绍自己的：

Turns off all rules that are unnecessary or might conflict with Prettier.
另外，可参考 eslint 官方文档 Working with Custom Formatters。

两者都是基于 AST 工作的，所以 eslint 是可以替代 prettier 的。至于，格式化代码性能上表现，由于没有深入研究，不作讨论。

prettier 的优点也是其缺点——配置简单，而 eslint 的配置相对来说更复杂。
因此，要么单独配置 eslint 完成格式化功能，要么，添加 eslint-config-prettier 与 eslint-plugin-prettier 两个包后，再配合两者一起使用。

缘起